COURSE 小程序教程
我们的作品，他们的故事
Our work, their stories
Our work, their stories
电商类微信小程序实例教程
16-11-07
昨天，微信正式对外发布了小程序的公测，虽然暂时不支持对外发布，普通消费者若想体验小程序，还需要等待一段时间，但是也意味着有更多的开发者可以参与到小程序的开发中来。今天我们就拿这个玩物志的小程序为例，演示一下如何一步步用微信小程序开发一个完整的电商类小程序，并分享一下小程序开发过程中需要注意的点。
本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本，因版本升级出现的差异，请注意甄别。
玩物志小程序跟常见的电商平台类似，主要由首页、分类页、商品列表页、商品详情页、购物车、订单结算页和个人中心等几大模块组成。接下来会分几期来对每个模块的关键点作详细说明，其中会粗略地穿插介绍一些常用简单内置组件的使用，最后利用小程序的 template 模板，对自定义组件化开发的实现提供了三种参考模式。
首先新建一个文件夹 coolbuy 作为项目目录，里面包含：
common 目录——用来放置项目公用的文件；
pages 目录——项目页面开发目录，里面的每个子目录代表一个独立页面，分别包含与目录同名的 .wxml（必须），.wxss，.js（必须）和 .json 文件；
templates——目录 用来放置自定义的组件；
utils 目录——用来放置工具类 js 文件；
app.js——小程序逻辑；
app.json——小程序公共设置；
app.wxss——小程序公共样式表；
首先来看首页的实现。首页在 pages/index 目录下，包括 index.wxml, index.wxss, index.js 三个文件。
首页的完整 Demo 图如下：
index
第一步是实现 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
}
这个值可能会在小程序以后的升级中进行修改。
Tip: 跟 image 组件类似，大多数小程序内置组件都会有自己的默认样式，初学者可以利用开发都工具中的 Wxml Panel，多了解一下这些组件的默认样式，可以避免很多由组件默认样式引起的问题。
可以参考爱范儿发表过的文章：微信小程序组件默认样式优先级 bug 解析
我们要根据实际情况给它重新定义一个宽高值：
/*** index.wxss ***/
.slide-image {
width: 750rpx;
height: 450rpx;
}
在这里使用了小程序特有的 rpx 单位，这个尺寸单位会放到第二期的页面布局中来讲。
另一个注意点是不要将大图片放到项目目录中，因为小程序代码总大小不能超过 1 MB，而大图片会占用大量的空间，所以要尽量避免在项目目录中放置大图片。如有需要，建议只在项目目录中放置少量 icon 类的小图片，其他大图片可以上传到自己的服务器或者网盘中，然后在 中的 src 中设置图片的网络资源地址。在手机测试或者正式上线之前，要注意是否有引用了本地大图片导致代码超出大小限制的问题。
接下来看数据的绑定
/*** index.js ***/
Page({
data: {
banners: [], //初始化一个 banners 数组
//以下四项设置 swiper 组件的参数值
indicatorDots: true,
autoplay: true, //开启自动切换
interval: 5000, //自动切换时间间隔
duration: 1000 //滑动动画时长
}
});
在 Page 里的 data 会以 JSON 的形式由逻辑层传至视图层，然后在视图层中使用 Mustache 语法（双大括号）接收传入的数据，实现动态数据的数据绑定。经过绑定后的数据变动可以在视图中实时反应，也可以通过开发者工具中的 AppData Panel 中查看和编辑页面中的所有 data 数据。特别是当你不知道 data 数据是否被设置成功的时候，可以到 AppData Panel 来查看一下，免去了手动打 console.log 进行调试的麻烦。
实现动态数据绑定的另一个方式是使用 this.setData() 方法，this 在这里代表的是 Page, 而 setData 是在 Page.prototype 中的方法，所以 this.setData() 实际上访问的是 Page.prototype.setData()。它可以用来新增和修改 this.data 里的值，同时还有一个重要的功能是将数据从逻辑层发送到视图层，从而实时改变页面的状态，保持逻辑层和视图层数据的一致性。
需要注意的是，如果使用 this.data.property = value，同样可以设置 this.data 的值，但是它不会将数据发送到视图层，无法改变页面的状态，所以一定要避免使用 this.data.property = value 的方式设置数据。
言归正传，现在我们的目的是要得到一个 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
特别注意所有值都要使用大写，经过我们测试，若使用小写，在安卓中会导致无法发起请求，而在开发者工具和 iOS 中则正常。
data 设置请求的参数
在 GET 方法中会将 data 转换成 query 字符串，拼接在 url 后面，若 url 本身带有同名的 query 参数，那么 data 中的参数会覆盖 url 中的 query 参数；
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 的值。这里不能直接使用 this.setData() ，因为 success 回调函数是一个闭包，我们要先在闭包外面定义 var _this = this; ，再调用 _this.setData() ，以保证闭包内能到正确的 this 值。
现在，在视图中我们就能看到完整的 banner 列表了。
篇幅所限，剩余内容下期继续。先来总结一下，本文介绍了小程序中内置组件、数据绑定和发送请求 API 的用法，提醒初学者一些不容易注意到的坑，通过上面的介绍和实际代码演示，希望能帮助初学者更容易理解和使用小程序的基他组件和 API。
下期我们将会介绍小程序中 flax 布局结合 rpx 的应用和 template 模板以及交互反馈类 API 的使用。
本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本，因版本升级出现的差异，请注意甄别。
玩物志小程序跟常见的电商平台类似，主要由首页、分类页、商品列表页、商品详情页、购物车、订单结算页和个人中心等几大模块组成。接下来会分几期来对每个模块的关键点作详细说明，其中会粗略地穿插介绍一些常用简单内置组件的使用，最后利用小程序的 template 模板，对自定义组件化开发的实现提供了三种参考模式。
首先新建一个文件夹 coolbuy 作为项目目录，里面包含：
common 目录——用来放置项目公用的文件；
pages 目录——项目页面开发目录，里面的每个子目录代表一个独立页面，分别包含与目录同名的 .wxml（必须），.wxss，.js（必须）和 .json 文件；
templates——目录 用来放置自定义的组件；
utils 目录——用来放置工具类 js 文件；
app.js——小程序逻辑；
app.json——小程序公共设置；
app.wxss——小程序公共样式表；
首先来看首页的实现。首页在 pages/index 目录下，包括 index.wxml, index.wxss, index.js 三个文件。
首页的完整 Demo 图如下：
index
第一步是实现 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
}
这个值可能会在小程序以后的升级中进行修改。
Tip: 跟 image 组件类似，大多数小程序内置组件都会有自己的默认样式，初学者可以利用开发都工具中的 Wxml Panel，多了解一下这些组件的默认样式，可以避免很多由组件默认样式引起的问题。
可以参考爱范儿发表过的文章：微信小程序组件默认样式优先级 bug 解析
我们要根据实际情况给它重新定义一个宽高值：
/*** index.wxss ***/
.slide-image {
width: 750rpx;
height: 450rpx;
}
在这里使用了小程序特有的 rpx 单位，这个尺寸单位会放到第二期的页面布局中来讲。
另一个注意点是不要将大图片放到项目目录中，因为小程序代码总大小不能超过 1 MB，而大图片会占用大量的空间，所以要尽量避免在项目目录中放置大图片。如有需要，建议只在项目目录中放置少量 icon 类的小图片，其他大图片可以上传到自己的服务器或者网盘中，然后在 中的 src 中设置图片的网络资源地址。在手机测试或者正式上线之前，要注意是否有引用了本地大图片导致代码超出大小限制的问题。
接下来看数据的绑定
/*** index.js ***/
Page({
data: {
banners: [], //初始化一个 banners 数组
//以下四项设置 swiper 组件的参数值
indicatorDots: true,
autoplay: true, //开启自动切换
interval: 5000, //自动切换时间间隔
duration: 1000 //滑动动画时长
}
});
在 Page 里的 data 会以 JSON 的形式由逻辑层传至视图层，然后在视图层中使用 Mustache 语法（双大括号）接收传入的数据，实现动态数据的数据绑定。经过绑定后的数据变动可以在视图中实时反应，也可以通过开发者工具中的 AppData Panel 中查看和编辑页面中的所有 data 数据。特别是当你不知道 data 数据是否被设置成功的时候，可以到 AppData Panel 来查看一下，免去了手动打 console.log 进行调试的麻烦。
实现动态数据绑定的另一个方式是使用 this.setData() 方法，this 在这里代表的是 Page, 而 setData 是在 Page.prototype 中的方法，所以 this.setData() 实际上访问的是 Page.prototype.setData()。它可以用来新增和修改 this.data 里的值，同时还有一个重要的功能是将数据从逻辑层发送到视图层，从而实时改变页面的状态，保持逻辑层和视图层数据的一致性。
需要注意的是，如果使用 this.data.property = value，同样可以设置 this.data 的值，但是它不会将数据发送到视图层，无法改变页面的状态，所以一定要避免使用 this.data.property = value 的方式设置数据。
言归正传，现在我们的目的是要得到一个 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
特别注意所有值都要使用大写，经过我们测试，若使用小写，在安卓中会导致无法发起请求，而在开发者工具和 iOS 中则正常。
data 设置请求的参数
在 GET 方法中会将 data 转换成 query 字符串，拼接在 url 后面，若 url 本身带有同名的 query 参数，那么 data 中的参数会覆盖 url 中的 query 参数；
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 的值。这里不能直接使用 this.setData() ，因为 success 回调函数是一个闭包，我们要先在闭包外面定义 var _this = this; ，再调用 _this.setData() ，以保证闭包内能到正确的 this 值。
现在，在视图中我们就能看到完整的 banner 列表了。
篇幅所限，剩余内容下期继续。先来总结一下，本文介绍了小程序中内置组件、数据绑定和发送请求 API 的用法，提醒初学者一些不容易注意到的坑，通过上面的介绍和实际代码演示，希望能帮助初学者更容易理解和使用小程序的基他组件和 API。
下期我们将会介绍小程序中 flax 布局结合 rpx 的应用和 template 模板以及交互反馈类 API 的使用。
