COURSE 小程序教程
我們的作品，他們的故事
Our work, their stories
Our work, their stories
電商類微信小程序?qū)嵗坛?/span>
發(fā)布人:龍兵科技
16-11-07
昨天，微信正式對外發(fā)布了小程序的公測，雖然暫時不支持對外發(fā)布，普通消費者若想體驗小程序，還需要等待一段時間，但是也意味著有更多的開發(fā)者可以參與到小程序的開發(fā)中來。今天我們就拿這個玩物志的小程序為例，演示一下如何一步步用微信小程序開發(fā)一個完整的電商類小程序，并分享一下小程序開發(fā)過程中需要注意的點。
本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本，因版本升級出現(xiàn)的差異，請注意甄別。
玩物志小程序跟常見的電商平臺類似，主要由首頁、分類頁、商品列表頁、商品詳情頁、購物車、訂單結(jié)算頁和個人中心等幾大模塊組成。接下來會分幾期來對每個模塊的關(guān)鍵點作詳細說明，其中會粗略地穿插介紹一些常用簡單內(nèi)置組件的使用，最后利用小程序的 template 模板，對自定義組件化開發(fā)的實現(xiàn)提供了三種參考模式。
首先新建一個文件夾 coolbuy 作為項目目錄，里面包含：
common 目錄——用來放置項目公用的文件；
pages 目錄——項目頁面開發(fā)目錄，里面的每個子目錄代表一個獨立頁面，分別包含與目錄同名的 .wxml（必須），.wxss，.js（必須）和 .json 文件；
templates——目錄 用來放置自定義的組件；
utils 目錄——用來放置工具類 js 文件；
app.js——小程序邏輯；
app.json——小程序公共設置；
app.wxss——小程序公共樣式表；
首先來看首頁的實現(xiàn)。首頁在 pages/index 目錄下，包括 index.wxml, index.wxss, index.js 三個文件。
首頁的完整 Demo 圖如下：
index
第一步是實現(xiàn) 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，但是根據(jù)開發(fā)者工具 v0.10.102800 版中的測試，image 組件的默認樣式為：
image {
width: 320px
height: 240px
display: inline-block
overflow: hidden
}
這個值可能會在小程序以后的升級中進行修改。
Tip: 跟 image 組件類似，大多數(shù)小程序內(nèi)置組件都會有自己的默認樣式，初學者可以利用開發(fā)都工具中的 Wxml Panel，多了解一下這些組件的默認樣式，可以避免很多由組件默認樣式引起的問題。
可以參考愛范兒發(fā)表過的文章：微信小程序組件默認樣式優(yōu)先級 bug 解析
我們要根據(jù)實際情況給它重新定義一個寬高值：
/*** index.wxss ***/
.slide-image {
width: 750rpx;
height: 450rpx;
}
在這里使用了小程序特有的 rpx 單位，這個尺寸單位會放到第二期的頁面布局中來講。
另一個注意點是不要將大圖片放到項目目錄中，因為小程序代碼總大小不能超過 1 MB，而大圖片會占用大量的空間，所以要盡量避免在項目目錄中放置大圖片。如有需要，建議只在項目目錄中放置少量 icon 類的小圖片，其他大圖片可以上傳到自己的服務器或者網(wǎng)盤中，然后在 中的 src 中設置圖片的網(wǎng)絡資源地址。在手機測試或者正式上線之前，要注意是否有引用了本地大圖片導致代碼超出大小限制的問題。
接下來看數(shù)據(jù)的綁定
/*** index.js ***/
Page({
data: {
banners: [], //初始化一個 banners 數(shù)組
//以下四項設置 swiper 組件的參數(shù)值
indicatorDots: true,
autoplay: true, //開啟自動切換
interval: 5000, //自動切換時間間隔
duration: 1000 //滑動動畫時長
}
});
在 Page 里的 data 會以 JSON 的形式由邏輯層傳至視圖層，然后在視圖層中使用 Mustache 語法（雙大括號）接收傳入的數(shù)據(jù)，實現(xiàn)動態(tài)數(shù)據(jù)的數(shù)據(jù)綁定。經(jīng)過綁定后的數(shù)據(jù)變動可以在視圖中實時反應，也可以通過開發(fā)者工具中的 AppData Panel 中查看和編輯頁面中的所有 data 數(shù)據(jù)。特別是當你不知道 data 數(shù)據(jù)是否被設置成功的時候，可以到 AppData Panel 來查看一下，免去了手動打 console.log 進行調(diào)試的麻煩。
實現(xiàn)動態(tài)數(shù)據(jù)綁定的另一個方式是使用 this.setData() 方法，this 在這里代表的是 Page, 而 setData 是在 Page.prototype 中的方法，所以 this.setData() 實際上訪問的是 Page.prototype.setData()。它可以用來新增和修改 this.data 里的值，同時還有一個重要的功能是將數(shù)據(jù)從邏輯層發(fā)送到視圖層，從而實時改變頁面的狀態(tài)，保持邏輯層和視圖層數(shù)據(jù)的一致性。
需要注意的是，如果使用 this.data.property = value，同樣可以設置 this.data 的值，但是它不會將數(shù)據(jù)發(fā)送到視圖層，無法改變頁面的狀態(tài)，所以一定要避免使用 this.data.property = value 的方式設置數(shù)據(jù)。
言歸正傳，現(xiàn)在我們的目的是要得到一個 banners 數(shù)組，然后利用 wx:for 將 banners 數(shù)組中的每一項渲 swiper-item 中。
我們可以在頁面加載 (onLoad) 時，使用 wx.request() 發(fā)起一個 ajax 請求，來獲取到所需要的 banner 列表數(shù)據(jù)。
先來看一下 wx.request(object) 的使用方法：
object 參數(shù)說明：
url 設置發(fā)送請求的地址
method 請求方式，默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
特別注意所有值都要使用大寫，經(jīng)過我們測試，若使用小寫，在安卓中會導致無法發(fā)起請求，而在開發(fā)者工具和 iOS 中則正常。
data 設置請求的參數(shù)
在 GET 方法中會將 data 轉(zhuǎn)換成 query 字符串，拼接在 url 后面，若 url 本身帶有同名的 query 參數(shù)，那么 data 中的參數(shù)會覆蓋 url 中的 query 參數(shù)；
success 請求成功返回的回調(diào)函數(shù)，回調(diào)參數(shù) res = {data: '服務器返回的數(shù)據(jù)', errMsg: '錯誤信息', statusCode: HTTP 狀態(tài)碼}
特別注意，在開發(fā)者工具和 iOS 中，res.statusCode 的類據(jù)類型是一個數(shù)值，而在安卓中的數(shù)據(jù)類型是一個字符串，所以在判斷 res.statusCode 時不能直接使用 === 操作符，而應該用 == 操作符，或者是先對 res.statusCode 進行數(shù)據(jù)類型轉(zhuǎn)換。
現(xiàn)在就可以在 onLoad 中調(diào)用 wx.request() 發(fā)起請求，訪問獲取 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) 將公共代碼引入。
發(fā)起 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() 的回調(diào)函數(shù)中判斷 res.statusCode 是否為 200，若為 200 則代表請求成功，接著將數(shù)據(jù)保存到 banners 數(shù)組中。
我們在 success 回調(diào)函數(shù)中使用 _this.setData({ banners: res.data.objects }); 設置 banners 的值。這里不能直接使用 this.setData() ，因為 success 回調(diào)函數(shù)是一個閉包，我們要先在閉包外面定義 var _this = this; ，再調(diào)用 _this.setData() ，以保證閉包內(nèi)能到正確的 this 值。
現(xiàn)在，在視圖中我們就能看到完整的 banner 列表了。
篇幅所限，剩余內(nèi)容下期繼續(xù)。先來總結(jié)一下，本文介紹了小程序中內(nèi)置組件、數(shù)據(jù)綁定和發(fā)送請求 API 的用法，提醒初學者一些不容易注意到的坑，通過上面的介紹和實際代碼演示，希望能幫助初學者更容易理解和使用小程序的基他組件和 API。
下期我們將會介紹小程序中 flax 布局結(jié)合 rpx 的應用和 template 模板以及交互反饋類 API 的使用。
本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本，因版本升級出現(xiàn)的差異，請注意甄別。
玩物志小程序跟常見的電商平臺類似，主要由首頁、分類頁、商品列表頁、商品詳情頁、購物車、訂單結(jié)算頁和個人中心等幾大模塊組成。接下來會分幾期來對每個模塊的關(guān)鍵點作詳細說明，其中會粗略地穿插介紹一些常用簡單內(nèi)置組件的使用，最后利用小程序的 template 模板，對自定義組件化開發(fā)的實現(xiàn)提供了三種參考模式。
首先新建一個文件夾 coolbuy 作為項目目錄，里面包含：
common 目錄——用來放置項目公用的文件；
pages 目錄——項目頁面開發(fā)目錄，里面的每個子目錄代表一個獨立頁面，分別包含與目錄同名的 .wxml（必須），.wxss，.js（必須）和 .json 文件；
templates——目錄 用來放置自定義的組件；
utils 目錄——用來放置工具類 js 文件；
app.js——小程序邏輯；
app.json——小程序公共設置；
app.wxss——小程序公共樣式表；
首先來看首頁的實現(xiàn)。首頁在 pages/index 目錄下，包括 index.wxml, index.wxss, index.js 三個文件。
首頁的完整 Demo 圖如下：
index
第一步是實現(xiàn) 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，但是根據(jù)開發(fā)者工具 v0.10.102800 版中的測試，image 組件的默認樣式為：
image {
width: 320px
height: 240px
display: inline-block
overflow: hidden
}
這個值可能會在小程序以后的升級中進行修改。
Tip: 跟 image 組件類似，大多數(shù)小程序內(nèi)置組件都會有自己的默認樣式，初學者可以利用開發(fā)都工具中的 Wxml Panel，多了解一下這些組件的默認樣式，可以避免很多由組件默認樣式引起的問題。
可以參考愛范兒發(fā)表過的文章：微信小程序組件默認樣式優(yōu)先級 bug 解析
我們要根據(jù)實際情況給它重新定義一個寬高值：
/*** index.wxss ***/
.slide-image {
width: 750rpx;
height: 450rpx;
}
在這里使用了小程序特有的 rpx 單位，這個尺寸單位會放到第二期的頁面布局中來講。
另一個注意點是不要將大圖片放到項目目錄中，因為小程序代碼總大小不能超過 1 MB，而大圖片會占用大量的空間，所以要盡量避免在項目目錄中放置大圖片。如有需要，建議只在項目目錄中放置少量 icon 類的小圖片，其他大圖片可以上傳到自己的服務器或者網(wǎng)盤中，然后在 中的 src 中設置圖片的網(wǎng)絡資源地址。在手機測試或者正式上線之前，要注意是否有引用了本地大圖片導致代碼超出大小限制的問題。
接下來看數(shù)據(jù)的綁定
/*** index.js ***/
Page({
data: {
banners: [], //初始化一個 banners 數(shù)組
//以下四項設置 swiper 組件的參數(shù)值
indicatorDots: true,
autoplay: true, //開啟自動切換
interval: 5000, //自動切換時間間隔
duration: 1000 //滑動動畫時長
}
});
在 Page 里的 data 會以 JSON 的形式由邏輯層傳至視圖層，然后在視圖層中使用 Mustache 語法（雙大括號）接收傳入的數(shù)據(jù)，實現(xiàn)動態(tài)數(shù)據(jù)的數(shù)據(jù)綁定。經(jīng)過綁定后的數(shù)據(jù)變動可以在視圖中實時反應，也可以通過開發(fā)者工具中的 AppData Panel 中查看和編輯頁面中的所有 data 數(shù)據(jù)。特別是當你不知道 data 數(shù)據(jù)是否被設置成功的時候，可以到 AppData Panel 來查看一下，免去了手動打 console.log 進行調(diào)試的麻煩。
實現(xiàn)動態(tài)數(shù)據(jù)綁定的另一個方式是使用 this.setData() 方法，this 在這里代表的是 Page, 而 setData 是在 Page.prototype 中的方法，所以 this.setData() 實際上訪問的是 Page.prototype.setData()。它可以用來新增和修改 this.data 里的值，同時還有一個重要的功能是將數(shù)據(jù)從邏輯層發(fā)送到視圖層，從而實時改變頁面的狀態(tài)，保持邏輯層和視圖層數(shù)據(jù)的一致性。
需要注意的是，如果使用 this.data.property = value，同樣可以設置 this.data 的值，但是它不會將數(shù)據(jù)發(fā)送到視圖層，無法改變頁面的狀態(tài)，所以一定要避免使用 this.data.property = value 的方式設置數(shù)據(jù)。
言歸正傳，現(xiàn)在我們的目的是要得到一個 banners 數(shù)組，然后利用 wx:for 將 banners 數(shù)組中的每一項渲 swiper-item 中。
我們可以在頁面加載 (onLoad) 時，使用 wx.request() 發(fā)起一個 ajax 請求，來獲取到所需要的 banner 列表數(shù)據(jù)。
先來看一下 wx.request(object) 的使用方法：
object 參數(shù)說明：
url 設置發(fā)送請求的地址
method 請求方式，默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
特別注意所有值都要使用大寫，經(jīng)過我們測試，若使用小寫，在安卓中會導致無法發(fā)起請求，而在開發(fā)者工具和 iOS 中則正常。
data 設置請求的參數(shù)
在 GET 方法中會將 data 轉(zhuǎn)換成 query 字符串，拼接在 url 后面，若 url 本身帶有同名的 query 參數(shù)，那么 data 中的參數(shù)會覆蓋 url 中的 query 參數(shù)；
success 請求成功返回的回調(diào)函數(shù)，回調(diào)參數(shù) res = {data: '服務器返回的數(shù)據(jù)', errMsg: '錯誤信息', statusCode: HTTP 狀態(tài)碼}
特別注意，在開發(fā)者工具和 iOS 中，res.statusCode 的類據(jù)類型是一個數(shù)值，而在安卓中的數(shù)據(jù)類型是一個字符串，所以在判斷 res.statusCode 時不能直接使用 === 操作符，而應該用 == 操作符，或者是先對 res.statusCode 進行數(shù)據(jù)類型轉(zhuǎn)換。
現(xiàn)在就可以在 onLoad 中調(diào)用 wx.request() 發(fā)起請求，訪問獲取 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) 將公共代碼引入。
發(fā)起 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() 的回調(diào)函數(shù)中判斷 res.statusCode 是否為 200，若為 200 則代表請求成功，接著將數(shù)據(jù)保存到 banners 數(shù)組中。
我們在 success 回調(diào)函數(shù)中使用 _this.setData({ banners: res.data.objects }); 設置 banners 的值。這里不能直接使用 this.setData() ，因為 success 回調(diào)函數(shù)是一個閉包，我們要先在閉包外面定義 var _this = this; ，再調(diào)用 _this.setData() ，以保證閉包內(nèi)能到正確的 this 值。
現(xiàn)在，在視圖中我們就能看到完整的 banner 列表了。
篇幅所限，剩余內(nèi)容下期繼續(xù)。先來總結(jié)一下，本文介紹了小程序中內(nèi)置組件、數(shù)據(jù)綁定和發(fā)送請求 API 的用法，提醒初學者一些不容易注意到的坑，通過上面的介紹和實際代碼演示，希望能幫助初學者更容易理解和使用小程序的基他組件和 API。
下期我們將會介紹小程序中 flax 布局結(jié)合 rpx 的應用和 template 模板以及交互反饋類 API 的使用。
