小程序组件与模板之模板传值与交互。

一、小程序模板与组件的区别

　　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

小程序组件与模板之模板传值与交互。

猜你喜欢