如今开发中，前后端分离的开发方式已经深入人心了。真正独立开发过前后端的开发者都知道，使用“假数据”在前端进行渲染页面，那么后期只需在服务器连接数据库调用数据即可。今天，我们来看看在小程序如何实现循环假数据进行页面渲染。
onLoad: function (options) {
//页面初始化options为页面跳转所带来的参数
var posts_content = [
{
date: ‘OCT 12 2016‘,
title: ‘葉秋月‘,
post_img: ‘/image/post/crab.png‘,
author_img: ‘/image/avatar/1.png‘,
img_condition: true,
content: ‘《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,
view_num: ‘999‘,
collect_num: ‘999‘
},
{
date: ‘OCT 12 2016‘,
title: ‘葉秋月‘,
post_img: ‘/image/post/bl.png‘,
author_img: ‘/image/avatar/1.png‘,
img_condition: true,
content: ‘《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,
view_num: ‘999‘,
collect_num: ‘999‘
}
]
2.设置数据，发送到JS文件中的dataJSON对象中：
this.setData({
posts_key:posts_content});
console.log(this);
}
//这里的this时当前页面的post对象，由它调用方法setData。
在wxml文件中使用循环语句调用假数据：
//item是元素，index是元素索引，从0开始
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index">
<view class=‘post-container‘>
<view class=‘post-author-date‘>
<image wx:if="{{item.img_condition}}" src=‘{{item.author_img}}‘ class=‘post-author‘></image>
<text class=‘post-date‘>{{item.date}}</text>
</view>
<text class=‘.post-title‘>{{item.title}}</text>
<image class=‘post-image‘ src=‘{{item.post_img}}‘></image>
<text class=‘post-content‘>{{item.content}}</text>
<view class=‘post-like‘>
<image src=‘../../image/icon/chat.png‘ class=‘post-like-image‘></image>
<text class=‘post-like-font‘>{{view_num}}</text>
<image src=‘../../image/icon/view.png‘ class=‘post-like-image‘></image>
<text class=‘post-like-font‘>{{collect_num}}</text>
</view>
</view>
</block>
