微信小程式的api中提供了網路互動的api，我們只要呼叫即可和後端進行資料互動，該api為wx.request.，具體程式碼如下。

//list.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    list:[],
    hiddenLoading: true,
    url: ''
  },
  loadList: function () {
    var that = this;
    that.setData({
      hiddenLoading: !that.data.hiddenLoading
    })
    var url = app.urls.CloudData.getList;
    that.setData({
      url: url
    });
    wx.request({
      url: url,
      data: {},
      method: 'GET',
      success: function (res) {
        var list= res.data.list;
        if (list == null) {
          list = [];
        }
        that.setData({
          list: list,
          hiddenLoading: !that.data.hiddenLoading
        });
         wx.showToast({
          title: "獲取資料成功",
          icon:  'success',
          duration: 2000
        })
      },
      fail: function (e) {
        var toastText='獲取資料失敗' + JSON.stringify(e);
        that.setData({
          hiddenLoading: !that.data.hiddenLoading
        });
        wx.showToast({
          title: toastText,
          icon:  '',
          duration: 2000
        })
      },
      complete: function () {
        // complete
      }
    }),
  //事件處理函式
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {

  },
  onReady: function () {
    this.loadList();
  },
  onPullDownRefresh: function () {
    this.loadList();
    wx.stopPullDownRefresh()
  }
})
 

在loadList函式中進行了網路請求，請求的資料放到了data的list中。我們使用setData來修改list，在該函式呼叫之後，微信小程式的框架就會判斷資料狀態的變化，然後進行diff判斷，如果有變化就渲染到介面中。這個與react.js的渲染方式相似，主要是內部維護了一個類似於虛擬文件的物件，然後通過對虛擬文件的判斷來呈現介面，這樣可以大大提高效能。

這裡我們還做了一個下拉重新整理的觸發，即onPullDownRefresh函式，為了能夠使用下拉重新整理，我們需要進行配置，現在我們只需要當前頁面生效，所以只要在對應頁的json中配置即可，即在list.json中配置。

list.json

{
    "navigationBarTitleText": "產品列表",    
    "enablePullDownRefresh":true
}

如果需要所有的頁面的生效，可以在app.json中的window中配置。

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true
  }
}
 

在app.json中，還有一個pages，我們需要路由的頁面都需要在這裡註冊，否則無法路由到。

在請求資料的時候，加入了等待和獲取成功失敗的提示。這需要相應的頁面配合，頁面程式碼list.wxm.如下

<!--list.wxml-->
<view class="container container-ext">
  <!--預設隱藏-->
  <loading hidden="{{hiddenLoading}}">正在載入</loading>
  <scroll-view scroll-y="true">
    <view>
      <block wx:for="{{list}}" wx:key="no">
        <view class="widget">
          <view>
            <text >{{item.no}}({{item.content}})</text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

/**list.wxss**/

.widget {
  position: relative;
  margin-top: 5rpx;
  margin-bottom: 5rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-left: 40rpx;
  padding-right: 40rpx;
  border: #ddd 1px solid;
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

最終的呈現效果

歡迎打描左側二維碼打賞。

轉載請註明出處