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 的使用。
