這邊給的一個例子是商城的幾個示例頁面蛉威，首先貼出做出來的幾個頁面添坊。
該示例的完成是根據(jù)官方文檔超升，在編寫過程中參考完成的嗓违。有疑問可以查看官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/九巡。
首先的話打開微信開發(fā)者工具創(chuàng)建我們的項目。
創(chuàng)建好項目后的項目結構如下：（這里做了些調整蹂季，也添加了一些新的文件夾用來存放對應的文件）
如果有需要修改小程序的標題冕广，背景色等，可以打開app.json文件里進行修改偿洁，navigationBarTitleText對應的是標題撒汉，navigationBarTextStyle對應的是標題顏色，navigationBarBackgroundColor對應的是標題背景顏色涕滋。
接下來的話就對上述幾個實現(xiàn)了的頁面所用到的一些小程序里的知識簡單的說下睬辐。
首頁的輪播圖，是用到了swiper這個組件宾肺。對應代碼如下：
這里請求數(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);
????}????
})?
商品列表頁設計到了一個下拉刷新的問題溯饵，這里則采用到了小程序里的onReachBottom。我們可以在這一個函數(shù)里寫下下拉刷新的請求锨用。
商品詳情頁的話涉及到了一個加減數(shù)量的問題丰刊，這里寫了以下兩個函數(shù)進行操作：
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
? ? })
? }
最后還有一個是關于分享的，小程序提供了這樣一個onShareAppMessage方法增拥，使用如下：onShareAppMessage: function () {
? ? return {
? ? ? title: '商品詳情頁',
? ? ? path: '/page/detail/detail?goods_id=1',
? ? ? success: function (res) {
? ? ? ? // 轉發(fā)成功
? ? ? },
? ? ? fail: function (res) {
? ? ? ? // 轉發(fā)失敗
? ? ? }
? ? }
? }
上述代碼中啄巧，可以在方法里編輯分析的標題，分析的路徑掌栅，以及成功與失敗時進行的提示/操作等秩仆。
以上是我完成這次幾個頁面所涉及到的一些知識做下簡單的記錄，說明猾封。如果需要了解更多的話可以到小程序簡易教程上了解：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201818澄耍。
