這邊給的一個例子是商城的幾個示例頁面，首先貼出做出來的幾個頁面。
該示例的完成是根據(jù)官方文檔，在編寫過程中參考完成的。有疑問可以查看官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/。
首先的話打開微信開發(fā)者工具創(chuàng)建我們的項目。
創(chuàng)建好項目后的項目結(jié)構(gòu)如下：（這里做了些調(diào)整，也添加了一些新的文件夾用來存放對應(yīng)的文件）
如果有需要修改小程序的標(biāo)題，背景色等，可以打開app.json文件里進(jìn)行修改，navigationBarTitleText對應(yīng)的是標(biāo)題，navigationBarTextStyle對應(yīng)的是標(biāo)題顏色，navigationBarBackgroundColor對應(yīng)的是標(biāo)題背景顏色。
接下來的話就對上述幾個實現(xiàn)了的頁面所用到的一些小程序里的知識簡單的說下。
首頁的輪播圖，是用到了swiper這個組件。對應(yīng)代碼如下：
這里請求數(shù)據(jù)時采用的是 wx.request 這個api：
wx.request({
????url: "",
????data: {},
????method:'POST',
????header: { 'Content-Type': 'application/json' },
????success: function (res) {
????????console.log(res)
????????that.data = res.data.data;
????????that.setData({????
????????????data: that.data,
????????????color: !that.data.color
????????});
????},
????fail: function (res) {
????????console.log(res.data.errmsg);
????}????
})?
商品列表頁設(shè)計到了一個下拉刷新的問題，這里則采用到了小程序里的onReachBottom。我們可以在這一個函數(shù)里寫下下拉刷新的請求。
商品詳情頁的話涉及到了一個加減數(shù)量的問題，這里寫了以下兩個函數(shù)進(jìn)行操作：
minus: function () {
? ? var num = this.data.num;
? ? if (num > 1) {
? ? ? num--;
? ? }else{
? ? ? num = 1;
? ? }
? ? this.setData({
? ? ? num: num
? ? })
? },
? plus: function() {
? ? var num = this.data.num;
? ? num++ ;
? ? this.setData({
? ? ? num: num
? ? })
? }
最后還有一個是關(guān)于分享的，小程序提供了這樣一個onShareAppMessage方法，使用如下：onShareAppMessage: function () {
? ? return {
? ? ? title: '商品詳情頁',
? ? ? path: '/page/detail/detail?goods_id=1',
? ? ? success: function (res) {
? ? ? ? // 轉(zhuǎn)發(fā)成功
? ? ? },
? ? ? fail: function (res) {
? ? ? ? // 轉(zhuǎn)發(fā)失敗
? ? ? }
? ? }
? }
上述代碼中，可以在方法里編輯分析的標(biāo)題，分析的路徑，以及成功與失敗時進(jìn)行的提示/操作等。
以上是我完成這次幾個頁面所涉及到的一些知識做下簡單的記錄，說明。如果需要了解更多的話可以到小程序簡易教程上了解：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201818。
