Detailed explanation and examples of data interaction and rendering of WeChat applet

This article mainly introduces the relevant information on the detailed explanation of data interaction and rendering examples of WeChat applet. Friends in need can refer to it

WeChat applet data interaction and rendering

Implementation renderings:

The API of the WeChat applet provides an API for network interaction. We only need to call it to communicate with the backend. For data interaction, the API is wx.request. The specific code is as follows.

//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() 
 } 
})

A network request is made in the loadList function, and the requested data is placed in the data list. We use setData to modify the list. After this function is called, the WeChat applet framework will determine the change in data status, then perform a diff judgment, and render it to the interface if there is any change. This is similar to the rendering method of react.js. It mainly maintains an object similar to a virtual document internally, and then renders the interface by judging the virtual document, which can greatly improve performance.

Here we also made a pull-down refresh trigger, that is, the onPullDownRefresh function. In order to be able to use pull-down refresh, we need to configure it. Now we only need the current page to take effect, so just configure it in the json of the corresponding page. Yes, it can be configured in list.json.

list.json

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

If you need all pages to take effect, you can configure it in the window in app.json.

app.json

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

In app.json, there is also a pages. The pages we need to route need to be registered here, otherwise they cannot be routed.

When requesting data, prompts for waiting and obtaining success and failure have been added. This requires the cooperation of the corresponding page. The page code list.wxm is as follows

<!--list.wxml--> 
<view> 
 <!--默认隐藏--> 
 <loading>正在加载</loading> 
 <scroll-view> 
  <view> 
   <block> 
    <view> 
     <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; 
}

Thanks for reading, I hope it can help everyone, thank you for your support of this site!

The above is the detailed content of Detailed explanation and examples of data interaction and rendering of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!