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


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 相关文章推荐
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
单位速度在实战中的运用
2020/03/04 星际争霸
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python获取当前路径实现代码
2017/05/08 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python3注册全局热键的实现
2020/03/22 Python
详解Django中异步任务之django-celery
2020/11/05 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
保研推荐信
2014/05/09 职场文书
建设工程授权委托书
2014/09/22 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Vue2.0搭建脚手架
2022/03/13 Vue.js
利用Redis实现点赞功能的示例代码
2022/06/28 Redis