微信小程序-将请求到的后台数据渲染到页面上_如何在js小程序中请求数据后,把 result的数据渲染到view-优快云博客

本文展示了一个小程序页面使用WXML结合JS动态加载数据的例子，包括页面代码、后台JSON数据及JS请求处理流程。通过wx:for循环遍历后台返回的数据，实现活动名称、价格及截止时间等信息的动态展示。

#仅作为自己的技术积累#

//页面代码

<view class="robOne" wx:for="{{returnData}}" wx:for-item="item">
<text class="enjoy">{{item.activityName}}</text>
<text class="money">\n￥{{item.price}}</text>
<text class='abort'>截止{{item.endTime}}</text>
</view>

//后台返回的json数据

{
    "msg":"请求成功",
    "code":"000000",
    "data":[
        {
            "price":0.01,
            "activityName":"吊打的都来拼团啊",
            "state":"1",
            "endTime":"2018-06-10 21:10"
        }
    ],
    "time":"20180504163732"
}

//js代码

onLoad: function (options) {
var that=this;  
    wx.request({
      url: this.data.appletUrl+'/applet/marketing/marketingListInfo',
      header: {
        'content-type': 'application/json'
      },
      data:{
        token:this.data.token,
       
      },
      //请求后台数据成功  
      success: function (res) {
        //wx.showToast('请求成功')
       //将获取到的json数据，存在名字叫zhihu的这个数组中
        that.setData({
          returnData: res.data.data,
        })
        //res代表success函数的事件对，第一个data是固定的，第二个data是上面json数据中data 
      }
    })
},