小編給大家分享一下微信小程序如何實現(xiàn)數(shù)據(jù)交互與渲染，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、博羅網(wǎng)站維護、網(wǎng)站推廣。

微信小程序 數(shù)據(jù)交互與渲染

實現(xiàn)效果圖：

微信小程序的api中提供了網(wǎng)絡(luò)交互的api，我們只要調(diào)用即可和后端進行數(shù)據(jù)交互，該api為wx.request.，具體代碼如下。

//list.js 
//獲取應(yīng)用實例 
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: "獲取數(shù)據(jù)成功", 
     icon: 'success', 
     duration: 2000 
    }) 
   }, 
   fail: function (e) { 
    var toastText='獲取數(shù)據(jù)失敗' + JSON.stringify(e); 
    that.setData({ 
     hiddenLoading: !that.data.hiddenLoading 
    }); 
    wx.showToast({ 
     title: toastText, 
     icon: '', 
     duration: 2000 
    }) 
   }, 
   complete: function () { 
    // complete 
   } 
  }), 
 //事件處理函數(shù) 
 bindViewTap: function () { 
  wx.navigateTo({ 
   url: '../logs/logs' 
  }) 
 }, 
 onLoad: function () { 
 
 }, 
 onReady: function () { 
  this.loadList(); 
 }, 
 onPullDownRefresh: function () { 
  this.loadList(); 
  wx.stopPullDownRefresh() 
 } 
})

在loadList函數(shù)中進行了網(wǎng)絡(luò)請求，請求的數(shù)據(jù)放到了data的list中。我們使用setData來修改list，在該函數(shù)調(diào)用之后，微信小程序的框架就會判斷數(shù)據(jù)狀態(tài)的變化，然后進行diff判斷，如果有變化就渲染到界面中。這個與react.js的渲染方式相似，主要是內(nèi)部維護了一個類似于虛擬文檔的對象，然后通過對虛擬文檔的判斷來呈現(xiàn)界面，這樣可以大大提高性能。

這里我們還做了一個下拉刷新的觸發(fā)，即onPullDownRefresh函數(shù)，為了能夠使用下拉刷新，我們需要進行配置，現(xiàn)在我們只需要當前頁面生效，所以只要在對應(yīng)頁的json中配置即可，即在list.json中配置。

list.json

{ 
  "navigationBarTitleText": "產(chǎn)品列表",   
  "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，我們需要路由的頁面都需要在這里注冊，否則無法路由到。

在請求數(shù)據(jù)的時候，加入了等待和獲取成功失敗的提示。這需要相應(yīng)的頁面配合，頁面代碼list.wxm.如下

 
 
  
 正在加載 
  
   
    
     
      
      {{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; 
}

以上是“微信小程序如何實現(xiàn)數(shù)據(jù)交互與渲染”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！