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


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间隔刷新的简单实例
Nov 14 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue实现滑动到底部加载更多效果
Oct 27 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
星际流派综述
2020/03/04 星际争霸
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
ThinkPHP路由详解
2015/07/27 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
javascript操作cookie
2017/01/17 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python调用fortran模块
2016/04/08 Python
python监控文件并且发送告警邮件
2018/06/21 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python 实现目录复制的三种小结
2019/12/04 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
毕业自我鉴定总结
2014/03/24 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
小学音乐课教学反思
2016/02/18 职场文书