1.wx.request请求数据
index.js文件
onLoad: function () { var that = this; wx.request({ url: 'https://route.showapi.com/90-87?######=f1161d6416e74e1b821485dd8554ef6b&tid=###',//要遍历的url，http没有数据的话用https error: function (XmlHttpRequest, textStatus, errorThrown) { alert("操作失败!"); }, success: function (result) { var postList = result.data.showapi_res_body.pagebean.contentlist; console.log(postList); that.setData({ indexDate: postList }); } })}
打印的数据如下：
2.新建template模板
name属性就是模板的名字
3.在index.wxml引用模板
<!--content star--><view class='content'><import src="template/template.wxml" /> //引用模板文件<view hidden="{{currentTab!==0}}"> <block wx:for="{{indexDate}}" wx:for-item="newsItem"> //wx:for 遍历前面ajax请求返回的数据， wx：for-item 相当于别名 <template is="xinwen" data="{{...newsItem}}"/> //is是你要引用那个功能模快，一个模板文件里面可以写多个模块，data就是你要引用的数据，语法是
//{{...newsItem}} newItem就是前面的别名，
</block></view></view>
4.在模板文件中直接调用数据就ok了
<template name="xinwen"><view class='content'> <view>{{title}}</view> <view class='content_img'> <view wx:for="{{images}}" wx:for-item="images" wx:key="id"> <view class='flex-view-item ig'> <image style="width: 200px; height: 200px;" src="{{images.u}}"></image> </view> </view> </view><view class='flex-row img'> <view wx:for="{{item.images}}" wx:for-item="images" wx:key="id"> <view class='flex-view-item ig'> <image src="{{images.u}}" style='width:250rpx; height:250rpx; float:left;'></image> </view> </view> </view> <view>{{media_name}}</view> </view></template>
5.效果，样式可以在调一下，在wxss文件
6.这里遍历图片的时候遇到多层遍历，
解决方法如下：
<view wx:for="{{item.images}}" wx:for-item="images" wx:key="id"> <view class='flex-view-item ig'> <image src="{{images.u}}" style='width:250rpx; height:250rpx; float:left;'></image> </view> </view>