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