微信小程序 数据交互与渲染实例详解
微信小程序 数据交互与渲染实现效果图:微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下。 },onReady: function () {
this.loadList(); },onPullDownRefresh: function () { this.loadList(); wx.stopPullDownRefresh() } }) 在loadList函数中进行了网络请求,请求的数据放到了data的list中。我们使用setData来修改list,在该函数调用之后,微信小程序的框架就会判断数据状态的变化,然后进行diff判断,如果有变化就渲染到界面中。这个与react.js的渲染方式相似,主要是内部维护了一个类似于虚拟文档的对象,然后通过对虚拟文档的判断来呈现界面,这样可以大大提高性能。 这里我们还做了一个下拉刷新的触发,即onPullDownRefresh函数,为了能够使用下拉刷新,我们需要进行配置,现在我们只需要当前页面生效,所以只要在对应页的json中配置即可,即在list.json中配置。 list.json 如果需要所有的页面的生效,可以在app.json中的window中配置。 app.json 在app.json中,还有一个pages,我们需要路由的页面都需要在这里注册,否则无法路由到。 在请求数据的时候,加入了等待和获取成功失败的提示。这需要相应的页面配合,页面代码list.wxm.如下 .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; } 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |