Data interaction and rendering of WeChat applets and examples

This article mainly introduces detailed information about the small program data interaction and rendering instances. For more information about the small program data interaction and rendering instances, see the next article, for more information, see

Applet data interaction and rendering

Implementation:

The applet api provides an api for network interaction. we only need to call the api to perform data interaction with the backend. The api is wx. request. the specific code is as follows.

// List. js // Obtain the application instance 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: "succeeded in obtaining data", icon: 'success', duration: 2000})}, fail: function (e) {var toastText = 'data retrieval failed' + 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 '})}, 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 stored in the data list. We use setData to modify the list. after this function is called, the mini-program framework will judge the changes in the data status and then conduct diff judgment. if there is any change, it will be rendered to the interface. This is similar to the rendering method of react. js. it mainly maintains an object similar to a virtual document internally and presents the interface through judgment of the virtual document, which can greatly improve the performance.

Here we also set a pull-down refresh trigger, that is, the onPullDownRefresh function. to be able to use the pull-down refresh function, we need to configure it. now we only need the current page to take effect, therefore, you only need to configure in the json of the corresponding page, that is, in list. json configuration.

List. json

{"NavigationBarTitleText": "Product List", "enablePullDownRefresh": true}

If you want all pages to take effect, you can configure them 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 another page, and the pages we need to route must be registered here, otherwise they cannot be routed.

When you request data, a message indicating waiting and successful retrieval failed is added. This requires the corresponding page combination. the page code list. wxm. is as follows:

  
   
    
  
   
Loading
    
     
       
         
           
       
       
         {Item. no }}( {item. content }})
        
           
         
       
     
   
 

/**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; }

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

The above is a detailed explanation of the data interaction and rendering of small programs and the details of the instance. For more information, see other related articles in the first PHP community!