微信小程序 “萬利商城”實戰之七： 商品列表頁的展示及編碼實現

前面講了每個微信小程序頁面都包含4個文件， 以首頁為例 ，分別是

index.js, index.json, index.wxml, index.wxss ， 先看編碼后的頁面展示效果如下 ：

按照頁面編寫順序， 先從index.wxml頁面布局文件開始 ，刪除里面的全部內容， 加入下面的代碼：

<view class="container">
 

<view class="list1" wx:for="{{productList}}" wx:key="produceId">
  <view>
    <image class="image1" src="{{item.imageUrl}}"></image>
  </view>
  <view class="detail1">
    <text>{{item.productName}}</text>
    <text>{{item.price}}</text>
    <text>{{item.originalPrice}}</text>
  </view>
</view>


</view>

接下來我們就來逐個分析，和html中的標簽不同 ，小程序中有一套自己的標簽系統 ， 部分標簽和html中的名稱是一樣的 ， 用法也基本相同，在小程序中，容器標簽是<view>，它相當於html中的<div>，頁面的排版都由<view>控制完成，<view>可以嵌套，標簽的樣式由 class屬性來定義， 放在index.wxss中，和html中css文件的功能一樣，上面的代碼中 ，

<view class="container"></view>就是最外層的容器 ，如果我們要更改本頁面的背景顏色 ， 直接修改container這個樣式中的相關內容就可以了。

<view class="list1" wx:for="{{productList}}" wx:key="produceId"></view>用來循環輸出商品信息。

如果標簽中有wx:for這樣的屬性，表示這個標簽是循環展現的， productList是一個json數組，定義在index.js的data屬性中(下面我們會詳細介紹index.js)，

只要是從index.js的data屬性傳遞過來的數據，在index.wxml中使用都要用{{ }}包裹起來 ，這種寫法就是錯誤的 wx:for="productList" ，

wx:key屬性用來指定數組的key是多少， 官方的解釋是指定wx:key后會有更好的性能。 既然 productList是一個json數組 ，

那在循環輸出數據的時候怎么表示數組中的每一項呢？微信小程序約定用item這個關鍵字來表示，

{{item.productName}}就表示輸出該數組項的productName值 ， 同時還約定， 如果要顯示數組各項的序號，

用index這個關鍵字來表示，下表從0開始 ， 我們將這一行<text>{{item.productName}}</text>改成

<text>{{index}}  {{item.productName}}</text> 就可以看到產品名稱前有0,1,2的序號了。

 

接下來我們在看index.wxss文件的內容 ：

.image1
{
  width:300rpx;
  height:300rpx;
}


.list1
{
  border:solid 3rpx #c0c0c0;
  width: 96%;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20rpx;
  align-content:space-around
}

.detail1
{ 
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
}

 

image1 , list1 , detail1分別對應index.wxml文件中的三個class 屬性值 ， 只有class="container"這個屬性值container沒有看到，

它定義在app.wxss這樣一個全局樣式文件中 ， 一些全局性的屬性可以放到app.wxss中去定義 ， 避免每個頁面都要去寫，維護起來也方便，

比如每個頁面的背景顏色就可以放在app.wxss中去定義。

前面說過，小程序的像素量度單位是rpx ， 不要使用px ，好處是不同的手機即使分辨率不同， 小程序也可以自己去適配，如果寫成px ,

一旦手機的分辨率或大小不同， 頁面格式就會亂掉了。

 

小程序的頁面布局用display:flex;布局模型，如果元素要橫排 ，就用 flex-direction: row; ， 豎排 就用 flex-direction: column;

其他在css中的屬性， 如width:300rpx;  height:300rpx;   border:solid 3rpx #c0c0c0;   margin-top: 20rpx;在wxss文件中都可以使用。

 

最后我們來看index.js文件中的內容 ：

//index.js
//獲取應用實例
const app = getApp()

Page({

  data: {
    productList: []
  },
 

  initProductList:function()
  {
    var _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/products',
      data:{},
      method:'GET',
      success:function(res){
        //var productLists=res.data;
        var productLists=[
          {'productId':111,'productName':'預發測試黑色11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg'},
          {'productId':122,'productName':'預發測試黑色22','price':15.9,'originalPrice':25.9,'imageUrl':'../../images/product22.jpg'},
          {'productId':133,'productName':'預發測試黑色33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg'}
        ];
        _this.setData({productList:productLists});
      }
    })

  },



  onLoad: function (options) {
    this.initProductList();
  },
     
})

 

每個js頁面的代碼都是從Page( )這個頁面構造函數開始的， 里面的代碼由兩部分組成 ，

  data: {
    productList: []
  },

這一部分用來定義數據 ， 凡是index.wxml中需要用到的數據，都應該定義在 data:{ }中，這里productList: []就是定義的一個空數組，

頁面在執行的時候會根據wxml {{ }}中的變量名稱到data:{ }中找對應的變量 ，找到后就用變量的值來替換wxml中的變量，

最后將頁面展示展示給用戶。index.wxml中<view class="list1" wx:for="{{productList}}" wx:key="produceId"></view>標簽內的

{{productList}}就對應js文件data屬性中的productList .

 

另一部分就是事件代碼，如：

  initProductList:function()
  {
    var _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/products',
      data:{},
      method:'GET',
      success:function(res){
        //var productLists=res.data;
        var productLists=[
          {'productId':111,'productName':'預發測試黑色11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg'},
          {'productId':122,'productName':'預發測試黑色22','price':15.9,'originalPrice':25.9,'imageUrl':'../../images/product22.jpg'},
          {'productId':133,'productName':'預發測試黑色33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg'}
        ];
        _this.setData({productList:productLists});
      }
    })

  },



  onLoad: function (options) {
    this.initProductList();
  },

 

onLoad: function (options) {}是頁面生命周期函數，在頁面第一次加載的時候自動執行 ， 
當我們第一次訪問index.wxml這個頁面的時候，會自動執行index.js文件中的onLoad()函數，在這個函數里， 
我們用this.initProductList();的方式調用了initProductList()這個函數，
目的就是將商品數據設置到頁面上供用戶瀏覽。

而initProductList:function(){}函數調用了微信小程序的API: wx.request() , 
這個API的作用是到Web服務器上抓取產品數據，各個參數的作用如下 ：

url: Web服務器訪問地址
data:傳遞給Web服務器的參數
method:參數傳遞方式是GET還是POST
success:function(res){}成功執行后的回調函數，獲取Web服務器的返回數據用res.data這個屬性得到，如下面的代碼

var productLists = res.data;

這里為了更直觀的體現Web服務器返回的數據， 將上面的代碼注釋起來了， 用的是mock的數據，如下 ：

var productLists=[
          {'productId':111,'productName':'預發測試黑色11','price':12.9,'originalPrice':22.9,'imageUrl':'../../images/product11.jpg'},
          {'productId':122,'productName':'預發測試黑色22','price':15.9,'originalPrice':25.9,'imageUrl':'../../images/product22.jpg'},
          {'productId':133,'productName':'預發測試黑色33','price':18.9,'originalPrice':38.9,'imageUrl':'../../images/product33.jpg'}
        ];

得到 Web服務器的數據后用小程序中內置的setData()函數將數據設置給data:{ }中定義的變量productList，如下：

_this.setData({productList:productLists});

執行完這個行代碼后頁面才會將產品數據展示出來，頁面顯示如下：

注 ： 在調用wx.request({})函數的時候為了演示方便，並沒有去做頁面session驗證和授權，
實際項目中需要加上這一部分 ，具體做法參考前面的章節，已做了詳細說明。