微信小程序请求wx.request数据,渲染到页面
先说一下基本使用。官网也有。
data: {
main_view_bgcolor: "",
border: "",
}
this.setData({
border:"aa"//这个border跟上面data里面的border是对应的。
}) //这里有一个ES6 this作用域的问题,切记...
这种方式,点击之后触发事件,执行函数,更新数据,同时可以实时更新渲染界面。
下面是一个例子:(我关闭了域名和https验证)
item.wxml
<view wx:for="{{userData}}" wx-for-index="index" wx-for-item="item">
{{index}}: {{item.name}}
</view>
item.js
// pages/items/item.js
Page({ /**
* 页面的初始数据
*/
data: {
'message':'message-string',
'userData':[{id:"123",name:"123"},{id:"456",name:"456"}] //初始值
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;//把this对象复制到临时变量that
const wxreq = wx.request({
url: 'http://jsonplaceholder.typicode.com/users',
data:{
//id:"1",
//name:'Leanne Graham'
},
success: function (res){
console.log(res.data);
this.userData = res.data; //无效不能实时的渲染到页面
that.setData({ userData: res.data });//和页面进行绑定可以动态的渲染到页面 },
fail: function (res){
console.log(res.data);
this.userData = "数据获取失败";
}
}) }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
结果:
参考:https://www.jb51.net/article/105467.htm
微信小程序请求wx.request数据,渲染到页面的更多相关文章
- 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
- 微信小程序:wx.request之post请求后端无法获取数据的问题
前言:小程序的开发中总是踩到各种坑,看文档也不知所云: 例如当我们在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 问题: ...
- 微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常
新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能原因:0:后台域名没有配置0.1:域名不支持https1:没有重启工具:2:域名没有备案,或是备案后不足24小 ...
- 微信小程序与Vue js数据渲染对比
//小程序 Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) } }) ...
- 微信小程序请求数据
微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序遍历wx:for,wx:for-item,wx:key
微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...
- 微信小程序开发(request请求后台获取不到data)
1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post ...
- 微信小程序前台的用户数据入库(后台Laravel)
首先 我们可以看到微信小程序官方 文档 wx.login api-login.jpg 通过此图 我们知道 前台要传 一个 code给后台,后台拿到code 并结合appid和appsecret请求 ...
随机推荐
- 【jQuery】select动态追加的option选中
var turnUpHidden = $("input[name='turnUpHidden']").val(); if(turnUpHidden != "") ...
- pytest文档6-fixture之yield实现teardown
前言 上一篇讲到fixture通过scope参数控制setup级别,既然有setup作为用例之前前的操作,用例执行完之后那肯定也有teardown操作. 这里用到fixture的teardown操作并 ...
- Andorid之Annotation框架初使用(四)
代替繁琐的finViewById @EActivity public class MyActivity extends Activity { // Injects R.id.myEditText @V ...
- linux服务器之间的文件同步;rsync+inotifywait;同步多个目录
1.双向同步:unison+inotify 2.单向同步:rsync+inotify python版的pyinotify 本文介绍第二种方法: 1.Inotify 是一个 Linux特性,它监控文件系 ...
- Integer判断相等,到底该用==还是equals
在项目中涉及到整数判断的时候一直都是使用"=="进行判断的,但是用的时候心里老是在犯嘀咕,是不是应该使用equals呀?今天来看下这个问题! 在Object类中,equals方法的 ...
- Android宝典入门篇-进阶
学习Android前后有快有1个月了,本着不耍流氓,谈恋爱就要结婚的信念(其实AD开发也挺有趣的),做了自己的第一个Android小应用.本来准备今天和大家分享的,考虑到在不同屏幕上的效果没测试和本着 ...
- C# 实现将 PDF 转文本的功能
更新 2014年2月27日: 这篇文章最初只描述使用 PDFBox 来解析PDF文件.现在它已经被扩展到包括使用 IFilter 和 iTextSharp 的例程了. 这篇文章和对应的Visual S ...
- CentOS7下命令安装火狐浏览器
使用命令安装火狐浏览器,需要切换root(su root)下,执行下面的命令,自动下载所需依赖包,完成安装 yum -y install firefox 然后重启即可
- Android获取cpu使用率,剩余内存和硬盘容量
1.内存信息 在proc/meminfo下有具体的内存使用情况,我这里获取的内存信息就是从这个文件中获取的.获取到具体的内存信息后依据我自己的需求,从bufferdreader中单独抽取出来了剩余的内 ...
- 百度地图API画多边型,测面积
效果: 脚本: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...