template怎么调用js数据_tempalte运行js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43915012/article/details/105751820

该博客介绍了在小程序开发中如何在onLoad函数获取服务器数据，并通过自定义函数传递到模板（template）的WXML中进行显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在主函数下面的onLoad函数将所需要的数据从服务器请求过来

onLoad: function (options) {
    var searchDetail=app.globalData.baseUrl+"/v2/movie/top250"+"?start=0&count=3";
      getMessageData:function(url){
    var that =this;
    wx.request({
      url: url,
      complete: (res) => {},
      fail: (res) => {},
      header: {
        "content-type":"json"
      },
      method: 'GET',
      success: (url) => {
        that.getMessageUrlData(url.data)
      }
    })
  },
  },`

然后在使用函数将请求的数据中自己所需要的数据传出

 getMessageUrlData:function(searchData){
      var searchDatas=[];
     for(var idx in searchData.subjects){
        var subject=searchData.subjects[idx]; 
        var title=subject.title;
      var temp={
        title:title,
        coverageUrl:subject.images.large,
        messageId:subject.id
      }
      searchDatas.push(temp);//将temp里面的数据传到searchDatas这个js数组中
    }
    this.setData({
      searchDatas:searchDatas//将searchDatas数组的数据传出
    })

  },

然后在template的wxml里面接收数据并应用

<template name="message">
<block wx:for="{{searchDatas}}" wx:for-item="search" wx:key="key">
/**这个wx:for-item的默认值是item。如果不修改的话下面的search应该换成item*/
  <view class="message-body" catchtap="goMessagesDetail" data-id="{{search.messageId}}">
    <image src="{{search.coverageUrl}}"></image>
    <text>{{search.title}}</text>
  </view>
  </block>
</template>