当前位置:千优问>百科知识>微信小程序商城类开发

微信小程序商城类开发

2019-07-24 23:51:08 编辑:leo 浏览量:458

微信小程序商城类开发

从微信社交渠道听得最多的一句话便是:新产品、新需求,产品推广要结合顶尖的SEO人才与无缺的营销团队,才能把品牌与产品打起来,这句话确实没有错,可是从中能够发现忽略了很重要的一点:竞争对手,咱们并没有把竞争对手摸清楚,或者说没有做深化的竞品剖析和深化的考虑,就大张旗鼓地执行了,如此这样,往往导致投入的资金血本无归,运营的微信商城被进军的企业压垮。这段时间,接触到微信小程序,并尝试着做了一个商城类的小程序。以下是项目开发的过程,这次首要从项目结构目录、大局装备和商城引导页来分享。

新建一个小程序,生成目录如上图所示,pages文件首要寄存小程序的页面文件,其间每个文件夹为一个页面,每个页面下包括四个文件(以单页文件名为index为例,其文件内包括index.js、index.json、index.wxml、index.wxss四个文件)。utils文件用来寄存大局js文件,公共用到的事情处理代码能够放置到此文件夹中,便利之后页面调用。app.js是系统的办法处理大局文件,也就是说文件中规定的函数和数据,在整个小程序中,每一个结构页面和文件都能够运用this获取。App.json是系统大局装备文件,包括设置页面途径,设置底部,网络,调试形式,设置导航头的色彩,字体大小,下面有没有tabbar等功能。App.wxss是大局款式表,类似css文件中常用大局款式reset.css。project.config.json为项目的装备文件。

大局装备,首要体现在app.js和app.json。app.js中首要运用的事情为onlaunch,它用于监听小程序初始化后触发。当打开小程序,会进行获取商城的名称,获取用户信息,用户登录,本地存储的过程。微信提供了丰厚的API,简化开发过程,其间用的最多的是wx.request(),它类似于ajax,用于前后台的数据交互。经过调用接口wx.login()获取暂时登录凭证(code);简化过程如下:

其中,标红的globalDat是一个全局变量,它可以在在pages文件夹下任何一个页面中调用,

储存方法:

调用方法如下:

引导页的页面截图如图二,页面上从后台获取的信息为商品名称和用户头像。首页,定义文件夹名称为index,放置在pages文件夹中,为了便利装备,其子目录一致命名为index.wxml、index.wxss、index.js、index.json。增加一个页面,则需要在app.json中增加,例如:

以下是index.wxml页面结构代码:

代码中运用{{}}来完结数据绑定,数据来历于index.js,还运用了条件烘托和点击事情。运用wx:if="{{show}}"来判断是否需要烘托该代码块,假如show为真,则显现,不然躲藏。与它有相同功能的是hidden,可是之间有所区别,wx:if在躲藏的时分不烘托,而hidden在躲藏时仍然烘托,只是不出现。所以当频频切换的时分用hidden,偶尔切换时用wx:if。Bindtab为点击事情,当点击此元素,触发toStore办法。

在开发过程中,难免会遇到一些问题,此过程中发现在款式文件中运用background-images:url(本地图片途径地址);在视图层不显现。解决办法:改用网络url或者,或者不选用背景图增加图片,选用image标签。

以上是商城小程序开发大局装备及引导页制造的全部内容,未完待续。

 

标签:小程序商城