微信小程序数据交互与渲染实例详解

2019-11-19 17:49:35

字体：大中小

来源：转载

供稿：网友

微信小程序数据交互与渲染

实现效果图：

微信小程序的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; }

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇：vue实现添加标签demo示例代码

下一篇：前端编码规范（3）JavaScript 开发规范