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


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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
前端编码规范(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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
基于jQuery实现可编辑的表格
2019/12/11 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Django之路由层的实现
2019/09/09 Python
python-地图可视化组件folium的操作
2020/12/14 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
司机的工作范围及职责
2013/11/13 职场文书
店长职务说明书
2014/02/04 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
详解JAVA的控制语句
2021/11/11 Java/Android
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏