• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序请求wx.request数据,渲染到页面

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

先说一下基本使用。官网也有。

比如说你在App.js里面有这些变量。想修改某些值。
data: {
main_view_bgcolor: "",
border: "",
}
修改方式有两种,一是直接用“=”赋值,这种是可以修改,并且你把修改之后的值打印出来可以看到确实修改了,但是不推荐使用这样的方式。
因为,一般我们想修改data里面的值,往往都是因为这些数据都在main.wxml中绑定了,可以实现动态修改并实时刷新显示。刚刚这种方式容易发生数据被修改但是页面没有变化。
所以说一下下面这种方式:
在你绑定的自定义函数(往往都是绑定的点击事件)里面,
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.ogeek.net/article/105467.htm

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序--通过请求网页获取信息并显示发布时间:2022-07-18
下一篇:
微信小程序 在使用wx.request时显示加载中发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap