小程序template的使用

一、创建模板
独立建立一个tempate目录,如下，给模板起个name用来选择哪个模板

<template name='mianmo'>
  <image src='{{over_image_url}}'></image>
  <view>{{item_name}}</view>
  <view>{{sale_point}}</view>
</template>

二、在需要用的地方引进

<import src="/template/template" />

使用：
template传值data="{{…item}}“或者data=”{{item}}"
这两者的区别三个点是对对象的展开，取值时直接拿，比如id就是{{id}}而
不展开就是{{item.id}}。对集合进行遍历，模板只需接收数据即可渲染出多条数据

<!-- 引入 -->
<import src="/template/template" />
<view wx:for="{{movieList}}" wx:key="index">
  <template is="mianmo" data="{{...item}}"></template>
</view>

三、获取数据
定义一个对象接收数据

data: {
    movieList:[]
  },

发起请求（我使用的是屈臣氏面膜api，目前数据还在开放）

var that=this;
wx.request({
      url: 'https://h5.watsons.com.cn/item/ws/group_list?current_page=1&page_size=20&group_id=15591&device_id=d8fe69b0-699b-11e9-aa79-bdee290d4c08', 
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          movieList: res.data.data.item_list
        })
        console.log(that.data.movieList)
      }
    })

做完这3步基本就可以实现模板渲染了。
效果图如下（样式没写）

总结：在实际开发中，先获取数据，观察数据的层级、以及数据的属性等，再在应用页遍历对象集合，传递数据，最后才是写模板（填写哪些需要的值）。如各位大佬发现有错欢迎指出，给出建议也会虚心接受，发文的意义一是对知识点的总结和帮助记忆（忘记还可以看看）以及对简单的业务逻辑的分析思考。二是分享，能帮上有需要的人也是好的