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


Posted in Javascript onJanuary 21, 2017

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

实现效果图:

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

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

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

Javascript 相关文章推荐
javascript中文本框中输入法切换的问题
Dec 10 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
Bootstrap框架安装使用详解
Jan 21 #Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 #Javascript
微信小程序 九宫格实例代码
Jan 21 #Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
巧用canvas
Jan 21 #Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
自荐书范文
2013/12/08 职场文书
酒店经理职责
2014/01/30 职场文书
群众路线党课主持词
2014/04/01 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
安全负责人任命书
2014/06/06 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
初中班主任心得体会
2016/01/07 职场文书