小程序template怎样渲染页面的

template模板渲染demo

wxml页面
<view class="btmcon">
    <text class="btmtitle">学情分析</text>
    <view id="btn-body" >
      <!-- 学情报告分享模板开始indexs -->
        <view class="haschild-body" wx:for="{{array}}" wx:key="id" wx:for-index="indexs" wx:for-item="itemName" bindtap="switch" data-id="{{itemName.dataTime}}">
            <view class="text">
                <text >{{itemName.time}}</text>
                <text style="font-size:46rpx;">/{{itemName.day}}</text>
            </view>
            <view class="right-con">
              <view class="btmtitle">学情分析报告</view>
              <view class="fontsize subjectNum">共<text>{{itemName.tallSubject}}</text>学科</view>
              <view class="fontsize subjectNames"><text style="margin-right:8rpx" wx:for='{{itemName.subjectName}}' >{{item}}</text></view>
            </view>
        </view>
        <!-- 学情报告分享模板结束 -->
        <!-- 没有数据显示 -->
        <view class="noData" wx:if="{{condition}}">
          <image src="/image/noData.png"></image>
          <text>暂无数据</text>
        </view>
    </view>

  </view>

wxss样式
.btmcon{
   padding: 0rpx 30rpx 60rpx;
}
.btmtitle{
  color: #E54B5D;
  font-weight: bolder;
  font-size: 40rpx;
  letter-spacing: 5rpx;
}
#btn-body{
  margin-top: 20rpx;
  /* background: #fff; */
  min-height: 200rpx;
}
.haschild-body{
  background-color: #fff;
  min-height: 100rpx;
  margin-bottom: 10rpx;
  display: flex;
  flex: 1;
  justify-content:left;
  padding: 20rpx;
}
.haschild-body .text{
  width: 130rpx;
  height: 130rpx;
  display: inline-block;
  background: #9CBBFF;
  text-align: center;
  line-height: 130rpx;
  color: #fff;
  font-weight: bold;
  /* font-size: 46rpx; */
  font-size: 36rpx;
  margin-right: 20rpx;
}
.fontsize{
  font-size: 28rpx;
}
.subjectNum{
  margin: 6rpx 0;
}
.right-con{
  width: calc( 100% - 150rpx );
}
.subjectNames{
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

　下面是arry数据

page({

   data:{
       array: [
          {tallSubject: 3, subjectName: ['语文','数学','英语'], time: "08", day: "15", dataTime: "2019/08/15"},
          {tallSubject: 3, subjectName: ['语文','数学','英语'], time: "08", day: "16", dataTime: "2019/08/16"},
           {tallSubject: 3, subjectName: ['物理','化学','历史'], time: "08", day: "17", dataTime: "2019/08/17"},
            {tallSubject: 3, subjectName: ['历史','数学','政治','语文'], time: "08", day: "18", dataTime: "2019/08/18"}
        ],
    }, 

})

　效果图：
　　

　　为了便于初学者理解，写的template示例比较简单；更复杂的template模板渲染逻辑，可以直接留言

具体用法详情查看小程序文档
，，后面会添加使用例子