小程序template

小程序的模板

模板需要单独创建一个文件夹，（wxml,wxss,js需要单独建立）

image.png

这里的wxml,js,wxss,这几个文件是要单独引入需要添加的页面中的
其中wxml wxss不需要再写入输出出口以便外部调用，需调用的页面会根据wxml中template标签的name属性通过is属性调用模板name来引入模板，wxss是直接通过文件名调用引入，js需要写入输出出口，调用页面请求来引用，下面是演示代码：
js的模板输出(module.exports,输出的是个对象)与调用引入(require)
template1.js

var content_for=[
    {background:"#ea0c51",title:"检测性格"},
    {background:"#8b10c5",title:"深藏在深处的你"},
    {background:"#643df3",title:"看图识人"},
    {background:"#1ed6c8",title:"沙盘识人"},
    {background:"#1ac139",title:"寻找同类"}
]
//输出出口
module.exports={
 templates1: content_for
}

调用页面：

var content_date=require("../template1/template1.js");
const app = getApp()
Page({
  data:{},
onLoad:function(){
   this.setData({
      key:content_date.templates1
    })
}

})

wxml书写与引入
template1.wxml

<template name="relax_data" >
   <view class="relax_itme" style="background: {{item.background}}">
      {{item.title}}
    </view>
</template>

注意：模板页的最大标签必须是template 引入页面通过name（这里是relax_data）和 import来引入

调用页面

<import src="../template1/template1.wxml"/>
<block wx:for="{{key}}" wx:for-item="item" wx:for-index="index" wx:key="">
  <template is="relax_data" data="{{item}}"></template>
  
</block>

template1.wxss的写入与引入（@import）

.relax_itme{
    width:675rpx;
    margin-left:37rpx;
    margin-top:40rpx;
    border-radius: 12rpx;
    background: #5c97b8;
    height:180rpx;
    line-height: 180rpx;
    font-size: 20px;
    font-weight: 700;
}

调用页面：

@import "../template1/template1.wxss";