手把手教你开发电商类小程序 Vol.1 | 实战教程
前段时间,微信正式对外发布了小程序的公测,虽然暂时不支持对外发布,但也意味着有更多的开发者可以参与到小程序的开发中来。
作为第一批获得微信小程序内测资格的媒体,爱范儿(微信号 ifanr)的技术团队曾用一个上午时间,完成了旗下电商平台玩物志(微信号 coolbuy)的小程序 Demo ,并第一时间分享了开发经验,引发广泛关注。
今天知晓程序(微信号 zxcx0101)就以玩物志的小程序为例,演示如何一步步开发一个完整的电商类小程序,并分享小程序开发过程中需要注意的点。
注:本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本,因版本升级出现的差异,请注意甄别。
玩物志小程序跟常见的电商平台类似,主要由首页、分类页、商品列表页、商品详情页、购物车、订单结算页和个人中心等几大模块组成。
知晓程序(微信号 zxcx0101)会分几期来对每个模块的关键点作详细说明。
在此过程中,也会穿插介绍一些常用简单内置组件的使用,最再后利用小程序的 template
模板,对自定义组件化开发的实现提供三种参考模式。
准备开工
我们先新建一个文件夹 coolbuy
作为项目目录,里面包含:
common
目录——用来放置项目公用的文件pages
目录——项目页面开发目录,里面的每个子目录代表一个独立页面,分别包含与目录同名的.wxml
(必须),.wxss
,.js
(必须)和.json
文件templates
——目录 用来放置自定义的组件utils
目录——用来放置工具类 js 文件app.js
——小程序逻辑app.json
——小程序公共设置app.wxss
——小程序公共样式表
轮播 banner 样式定义
接下来,是首页的实现。
首页在 pages/index
目录下,包括 index.wxml
, index.wxss
, index.js
三个文件。
首页的完整 Demo 图如下:
第一步,实现 banner 轮播图,来看代码:
/*** index.wxml ***/
<swiper class="banner-swiper"
indicator-dots="{{ indicatorDots }}"
autoplay="{{ autoplay }}"
interval="{{ interval }}"
duration="{{ duration }}">
<swiper-item class="swiper-item" wx:for="{{ banners }}">
<navigator url="../detail/detail?id={{ item.productId }}">
<image src="{{ item.image }}" class="slide-image"></image>
</navigator>
</swiper-item>
</swiper>
值得注意的是,image
组件会有一个默认的样式。
官方文档中说 image
组件默认宽度 300px、高度 225px,但是,根据开发者工具 v0.10.102800 版中的测试,image
组件的默认样式为:
image {
width: 320px
height: 240px
display: inline-block
overflow: hidden
}
这个值可能会在小程序以后的升级中进行修改。
知晓程序(微信号 zxcx0101)提醒: 跟 image
组件类似,大多数小程序内置组件都会有自己的默认样式,初学者可以利用开发都工具中的 Wxml Panel,多了解一下这些组件的默认样式,可以避免很多由组件默认样式引起的问题。
可以参考爱范儿发表过的文章:微信小程序组件默认样式优先级 bug 解析
我们要根据实际情况给它重新定义一个宽高值:
/*** index.wxss ***/
.slide-image {
width: 750rpx;
height: 450rpx;
}
在这里使用了小程序特有的 rpx 单位,这个尺寸单位会放到第二期的页面布局中来讲。
另一个注意点是,不要将大图片放到项目目录中,因为小程序代码总大小不能超过 1 MB,而大图片会占用大量的空间,所以要尽量避免在项目目录中放置大图片。
如有需要,建议只在项目目录中放置少量 icon 类的小图片,其他大图片可以上传到自己的服务器或者网盘中,然后在 src
中设置图片的网络资源地址。
在手机测试或者正式上线之前,要注意是否有引用了本地大图片导致代码超出大小限制的问题。
准备获取 banner 数据,并绑定到视图层
接下来看数据的绑定:
/*** index.js ***/
Page({
data: {
banners: [], //初始化一个 banners 数组
//以下四项设置 swiper 组件的参数值
indicatorDots: true,
autoplay: true, //开启自动切换
interval: 5000, //自动切换时间间隔
duration: 1000 //滑动动画时长
}
});
在 Page
里的 data
会以 JSON
的形式由逻辑层传至视图层,然后在视图层中使用 Mustache 语法(双大括号)接收传入的数据,实现动态数据的数据绑定。
经过绑定后的数据变动可以在视图中实时反应,也可以通过开发者工具中的 AppData Panel 中查看和编辑页面中的所有 data
数据。
知晓程序(微信号 zxcx0101)提醒:当你不知道 data
数据是否被设置成功的时候,可以到 AppData Panel 来查看一下,免去了手动打 console.log
进行调试的麻烦。
实现动态数据绑定的另一个方式是使用 this.setData()
方法,this
在这里代表的是 Page,
而 setData
是在 PageX.prototype
中的方法,所以 this.setData()
实际上访问的是 Page.prototype.setData()
。
它可以用来新增和修改 this.data
里的值,同时还有一个重要的功能是将数据从逻辑层发送到视图层,从而实时改变页面的状态,保持逻辑层和视图层数据的一致性。
需要注意的是,如果使用 this.data.property = value
,同样可以设置 this.data
的值,但是它不会将数据发送到视图层,无法改变页面的状态。
知晓程序(微信号 zxcx0101)提醒:一定要避免使用 this.data.property = value
的方式设置数据。
从服务器获取 banner 数据
言归正传,现在我们的目的是要得到一个 banners 数组,然后利用 wx:for
将 banners
数组中的每一项渲染到 swiper-item 中。
我们可以在页面加载 (onLoad) 时,使用 wx.request()
发起一个 ajax
请求,来获取到所需要的 banner 列表数据。
先来看一下 wx.request(object)
的使用方法。首先是 object
可以接受的参数值:
url:
设置发送请求的地址。method:
请求方式,默认为GET
,有效值:OPTIONS
,GET
,HEAD
,POST
,PUT
,DELETE
,TRACE
,CONNECT。
知晓程序(微信号 zxcx0101)提醒,所有值都要使用大写。经过我们测试,若使用小写,在安卓中会导致无法发起请求,而在开发者工具和 iOS 中则正常。data:
设置请求的参数。如果 method 值为 GET,这个函数会将data
转换成query
字符串,拼接在url
后面,若 url 本身带有同名的 query 参数,那么data
中的参数会覆盖url
中的query
参数;
小程序执行 wx.request(object)
发送请求并收到 success
(成功)的消息后,会自动执行请求成功返回的回调函数。回调函数执行时,会自动收到类似这样的回调参数:
res = {data: '服务器返回的数据', errMsg: '错误信息', statusCode: HTTP 状态码}
特别注意,在开发者工具和 iOS 中,res.statusCode
的类据类型是一个数值,而在安卓中的数据类型是一个字符串,所以在判断 res.statusCode
时不能直接使用 ===
操作符,而应该用 ==
操作符,或者是先对 res.statusCode
进行数据类型转换。
现在,就可以在 onLoad
中调用 wx.request()
发起请求,访问获取 banner 列表的服务器 API
。
我们将各服务器 API
的访问地址都保存在 API_URL
对象,保存在 utils/config.js
中:
/*** config.js ***/
const CONFIG = {
API_URL: {
BANNER_QUERY: http://ifanr.com/api/banner
}
}
module.exports = CONFIG;
然后需要在 index.js
中使用 require
引入 utils/config.js
文件,引入路径为当前文件的相对路径:
/*** index.js ***/
var CONFIG = require('../../utils/config.js');
于是,我们就知道了在小程序中 js 模块化的方法,模块通过 module.exports
对外暴露接口,在需要使用这些模块的文件中,使用 require(path)
将公共代码引入。
发起 wx.request
请求:
/*** index.js ***/
var CONFIG = require('../../utils/config.js');
Page({
data: {
...
},
onLoad: function () {
var _this = this;
wx.request({
url: CONFIG.API_URL.BANNER_QUERY,
method: 'GET',
data: {
limit: 6,
img_size: 'small'
},
success: function (res) {
if (res.statusCode == 200) {
_this.setData({
banners: res.data.objects
});
}
}
});
}
});
在 wx.request()
的回调函数中判断 res.statusCode
是否为 200
,若为 200
则代表请求成功,接着将数据保存到 banners
数组中。
我们在 success
回调函数中使用 _this.setData({ banners: res.data.objects });
设置 banners
的值。
知晓程序(微信号 zxcx0101)提醒:这里不能直接使用 this.setData()
,因为 success
回调函数是一个闭包,我们要先在闭包外面定义 var _this = this;
,再调用 _this.setData()
,以保证闭包内能到正确的 this
值。
现在,在视图中我们就能看到完整的 banner 列表了。
本文介绍了小程序中内置组件、数据绑定和发送请求 API 的用法,提醒了初学者一些不容易注意到的坑,通过上面的介绍和实际代码演示,希望能帮助初学者更容易理解和使用小程序的基他组件和 API
。
下一期,知晓程序(微信号 zxcx0101)将会介绍小程序中 flex
布局结合 rpx
的应用和 template
模板以及交互反馈类 API
的使用。请继续关注我们的内容。
关注知晓程序 ( 微信号 zxcx0101),回复「解读」,获取小程序官方文档的浓缩版解读文章。
知晓程序 ( 微信号 zxcx0101)是爱范儿旗下专注于小程序生态的公众号。我们会提供最全面、新鲜的小程序资讯 ( 消息、观点、指南、活动)和服务,你可以在这里了解到关于小程序的一切。
快速关注知晓程序↓↓↓