昨天，微信正式對(duì)外發(fā)布了小程序的公測，雖然暫時(shí)不支持對(duì)外發(fā)布，普通消費(fèi)者若想體驗(yàn)小程序，還需要等待一段時(shí)間，但是也意味著有更多的開發(fā)者可以參與到小程序的開發(fā)中來。今天我們就拿這個(gè)玩物志的小程序?yàn)槔菔疽幌氯绾我徊讲接梦⑿判〕绦蜷_發(fā)一個(gè)完整的電商類小程序，并分享一下小程序開發(fā)過程中需要注意的點(diǎn)。

本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本，因版本升級(jí)出現(xiàn)的差異，請(qǐng)注意甄別。

玩物志小程序跟常見的電商平臺(tái)類似，主要由首頁、分類頁、商品列表頁、商品詳情頁、購物車、訂單結(jié)算頁和個(gè)人中心等幾大模塊組成。接下來會(huì)分幾期來對(duì)每個(gè)模塊的關(guān)鍵點(diǎn)作詳細(xì)說明，其中會(huì)粗略地穿插介紹一些常用簡單內(nèi)置組件的使用，最后利用小程序的 template 模板，對(duì)自定義組件化開發(fā)的實(shí)現(xiàn)提供了三種參考模式。

首先新建一個(gè)文件夾 coolbuy 作為項(xiàng)目目錄，里面包含：
common 目錄——用來放置項(xiàng)目公用的文件；
pages 目錄——項(xiàng)目頁面開發(fā)目錄，里面的每個(gè)子目錄代表一個(gè)獨(dú)立頁面，分別包含與目錄同名的 .wxml（必須），.wxss，.js（必須）和 .json 文件；
templates——目錄 用來放置自定義的組件；
utils 目錄——用來放置工具類 js 文件；
app.js——小程序邏輯；
app.json——小程序公共設(shè)置；
app.wxss——小程序公共樣式表；

首先來看首頁的實(shí)現(xiàn)。首頁在 pages/index 目錄下，包括 index.wxml, index.wxss, index.js 三個(gè)文件。

首頁的完整 Demo 圖如下：

index

第一步是實(shí)現(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 組件會(huì)有一個(gè)默認(rèn)的樣式。
官方文檔中說 image 組件默認(rèn)寬度300px、高度225px，但是根據(jù)開發(fā)者工具 v0.10.102800 版中的測試，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)樣式引起的問題。
可以參考愛范兒發(fā)表過的文章：微信小程序組件默認(rèn)樣式優(yōu)先級(jí) bug 解析

我們要根據(jù)實(shí)際情況給它重新定義一個(gè)寬高值：

/*** index.wxss ***/
.slide-image {
 width: 750rpx;
 height: 450rpx;
}
在這里使用了小程序特有的 rpx 單位，這個(gè)尺寸單位會(huì)放到第二期的頁面布局中來講。

另一個(gè)注意點(diǎn)是不要將大圖片放到項(xiàng)目目錄中，因?yàn)樾〕绦虼a總大小不能超過 1 MB，而大圖片會(huì)占用大量的空間，所以要盡量避免在項(xiàng)目目錄中放置大圖片。如有需要，建議只在項(xiàng)目目錄中放置少量 icon 類的小圖片，其他大圖片可以上傳到自己的服務(wù)器或者網(wǎng)盤中，然后在 中的 src 中設(shè)置圖片的網(wǎng)絡(luò)資源地址。在手機(jī)測試或者正式上線之前，要注意是否有引用了本地大圖片導(dǎo)致代碼超出大小限制的問題。

接下來看數(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í)長
 }
});
在 Page 里的 data 會(huì)以 JSON 的形式由邏輯層傳至視圖層，然后在視圖層中使用 Mustache 語法（雙大括號(hào)）接收傳入的數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的數(shù)據(jù)綁定。經(jīng)過綁定后的數(shù)據(jù)變動(dòng)可以在視圖中實(shí)時(shí)反應(yīng)，也可以通過開發(fā)者工具中的 AppData Panel 中查看和編輯頁面中的所有 data 數(shù)據(jù)。特別是當(dāng)你不知道 data 數(shù)據(jù)是否被設(shè)置成功的時(shí)候，可以到 AppData Panel 來查看一下，免去了手動(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í)際上訪問的是 Page.prototype.setData()。它可以用來新增和修改 this.data 里的值，同時(shí)還有一個(gè)重要的功能是將數(shù)據(jù)從邏輯層發(fā)送到視圖層，從而實(shí)時(shí)改變頁面的狀態(tài)，保持邏輯層和視圖層數(shù)據(jù)的一致性。

需要注意的是，如果使用 this.data.property = value，同樣可以設(shè)置 this.data 的值，但是它不會(huì)將數(shù)據(jù)發(fā)送到視圖層，無法改變頁面的狀態(tài)，所以一定要避免使用 this.data.property = value 的方式設(shè)置數(shù)據(jù)。

言歸正傳，現(xiàn)在我們的目的是要得到一個(gè) banners 數(shù)組，然后利用 wx:for 將 banners 數(shù)組中的每一項(xiàng)渲 swiper-item 中。
我們可以在頁面加載 (onLoad) 時(shí)，使用 wx.request() 發(fā)起一個(gè) ajax 請(qǐng)求，來獲取到所需要的 banner 列表數(shù)據(jù)。

先來看一下 wx.request(object) 的使用方法：
object 參數(shù)說明：
url 設(shè)置發(fā)送請(qǐng)求的地址
method 請(qǐng)求方式，默認(rèn)為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

特別注意所有值都要使用大寫，經(jīng)過我們測試，若使用小寫，在安卓中會(huì)導(dǎo)致無法發(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)求，訪問獲取 banner 列表的服務(wù)器 API。
我們將各服務(wù)器 API 的訪問地址都保存在 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 模塊化的方法，模塊通過 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ù)。先來總結(jié)一下，本文介紹了小程序中內(nèi)置組件、數(shù)據(jù)綁定和發(fā)送請(qǐng)求 API 的用法，提醒初學(xué)者一些不容易注意到的坑，通過上面的介紹和實(shí)際代碼演示，希望能幫助初學(xué)者更容易理解和使用小程序的基他組件和 API。

下期我們將會(huì)介紹小程序中 flax 布局結(jié)合 rpx 的應(yīng)用和 template 模板以及交互反饋類 API 的使用。