小程序組件與模板之模板傳值與交互。

一、小程序模板與組件的區別

　　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