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

微信小程序数据交互与渲染详解及实例
这篇文章主要介绍了微信小程序 数据交互与渲染实例详解的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 数据交互与渲染实例详解的相关资料,需要的朋友可以参考下

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

实现效果图：

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