一、小程序模板与组件的区别
1、template主要是展示，方法则需要在调用的页面中定义。而component组件则有自己的业务逻辑，可以看做一个独立的page页面。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。
二、模板的使用
1、目录关系
2、定义模板。①在主页面下新建template目录②或者在页面同级目录新建一个公共template目录。③或者是将多个模板写入同一个template文件中（感觉这种方式比较好，因为有name属性，所以不用担心冲突）；模板目录一般只包含wxml和wxss文件（因为template没有自己的js逻辑），并且名字也要相同。
3、编写模板（html）。不同的template用name属性区分，写法与普通wxml相同，并用一个template标签将内容包裹起来。如下：
<template name="passWord"> <view class=\'passWord\'> <view class=\'form\'> <view class=\'list\'><label>手机号：</label><input placeholder=\'输入手机号\' placeholder-class=\'placeholder\' value=\'{{tel}}\'></input></view> <view class=\'list\'> <label>验证码：</label> <input placeholder=\'输入验证码\' placeholder-class=\'placeholder\' maxlength=\'10\' value=\'\' name=\'code\' bindconfirm=\'{{item[2].finish}}\'> <button bindtap=\'{{item[0].click}}\' disabled=\'{{item2.getCodeBtn}}\' class=\'shortBtn\'>{{item2.getCodeText}}</button> </input> </view> </view> <view class=\'bottomBtn\'> <button bindtap=\'{{item[1].tap}}\' disabled=\'{{loginBtn}}\' class=\'longBtn\' type=\'primary\'>下发密码</button> </view> </view> </template>
4、编写样式（wxss）。样式文件编写也与普通的wxss相同。如下：
.container{ display: flex; align-items: center; justify-content: center; margin:30% auto; flex-direction: column; } .container .pswText{ font-weight: bold; font-size: 40rpx; } .container .password{ border: 1px solid #ddd; border-radius: 5px; padding: 25rpx 20rpx; margin-top: 40rpx; }
5、模板使用。在主页面通过import标签的src属性引入模板。然后通过template标签的is属性决定使用哪个模板。（data是模板传值）
<!-- 引入模板 --> <import src="passWord/passWord.wxml" /> <import src="passWordShow/passWordShow.wxml" /> <template is="{{Temp}}" data="{{item,item2,tel,loginBtn,password}}"></template>
6、样式使用。同样在主wxss里面通过@import引入模板样式。
@import "passWord/passWord.wxss";
@import "passWordShow/passWordShow.wxss";
三、模板传值与交互（因为template没有自己的js逻辑。所以交互相对麻烦，只能通过template的data属性传值交互）
1、js方面：先在主页面js文件写好data。
const app = getApp() Page({ /** * 页面的初始数据 */
//data里面的值都能通过template中的data属性传递过去 data: { Temp:"passWord", item:[{"click":"sendCode"},{"tap":"send"},{"finish":"finished"}], item2:{ getCodeBtn: false, getCodeText: "获取验证码" }, loginBtn:true, tel:"", password:"123456" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let peopleTel = wx.getStorageSync("loginObj").peopleTel; this.setData({ tel: peopleTel }) },
//-------------------------------------自定义模板方法----------------------------------------- sendCode(e) { let that = this; wx.request({ url: app.globalData.webPath + \'/sendCode\', data: {peopleTel:that.data.tel}, method: "POST", success: function (res) { //console.log(res.data); } }); if (!this.data.getCodeBtn) { var second = 60; var Timmer = null; var obj = { getCodeBtn: true, getCodeText: "(" + second + ")S" } this.setData({ item2:obj }) function Count() { if (second <= 1) { clearInterval(Timmer) var obj = { getCodeBtn: false, getCodeText: "获取验证码" } that.setData({ item2:obj }) } else { second-- var obj = { getCodeBtn: true, getCodeText: "(" + second + ")S" } that.setData({ item2: obj }) } } Timmer = setInterval(Count, 1000) } }, send:function(){ let that = this; //下发密码 wx.request({ url: \'https://www.apiopen.top/novelApi\', method:\'POST\', success:function(res){ if(res){ //that.data.password = res that.setData({ Temp:"pswShow" }) } }, fail:function(res){ wx.showToast({ title: \'下发失败\', icon:\'none\' }) } }) }, finished:function(e){ let smsCode = e.detail.value; this.setData({ smsCode: smsCode }) if (smsCode !=""){ this.setData({ loginBtn: false }) }else{ this.setData({ loginBtn: true }) } } })
2、主页面方面：通过data和Mustache语法传递多个数据，用逗号隔开。如果要展开对象，则在数据前加入"...data"语法。
<!-- 引入模板 --> <import src="passWord/passWord.wxml" /> <import src="passWordShow/passWordShow.wxml" /> <template is="{{Temp}}" data="{{item,item2,tel,loginBtn,password}}"></template>
3、template方面：
①data传过来的tel，直接通过mustache语法可以接收。
②data传过来的item/item2中的方法。也可以通过bindtap方法绑定。如
{{item[0].click}} =》对应的是主页面data中的sendCode方法。这些自定义方法写在主页面js即可。
{{item[1].tap}} =》 对应的是主页面data中的send方法。
{{item[2].finish}} =》对应的是主页面data中的finished方法。
<template name="passWord"> <view class=\'passWord\'> <view class=\'form\'> <view class=\'list\'><label>手机号：</label><input placeholder=\'输入手机号\' placeholder-class=\'placeholder\' value=\'{{tel}}\'></input></view> <view class=\'list\'> <label>验证码：</label> <input placeholder=\'输入验证码\' placeholder-class=\'placeholder\' maxlength=\'10\' value=\'\' name=\'code\' bindconfirm=\'{{item[2].finish}}\'> <button bindtap=\'{{item[0].click}}\' disabled=\'{{item2.getCodeBtn}}\' class=\'shortBtn\'>{{item2.getCodeText}}</button> </input> </view> </view> <view class=\'bottomBtn\'> <button bindtap=\'{{item[1].tap}}\' disabled=\'{{loginBtn}}\' class=\'longBtn\' type=\'primary\'>下发密码</button> </view> </view> </template>
四、原理（只是为了方便理解，实际上绑定机制还得细究）
1、因为template没有自己的js逻辑，所以想要交互只能通过模板的data属性传值。
2、传入过去的对象，再通过模板的bindtap绑定对象方法。当你点击模板中绑定方法的元素时，他就会触发主页面js中data的对象方法。然后找到js中的方法并执行。
五、拓展应用
通过is属性切换template的name。可应用于tab选项卡。但逻辑比较复杂的推荐使用组件实现。
六、参考其他常用传值思路
1、https://www.jianshu.com/p/29e16dfa25a4
2、https://blog.csdn.net/hxfghgh/article/details/82808370
请发表评论