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

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

  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

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

上一篇:微信公众号签名错误 invalid signature


下一篇:VS2008中Web Reference和Service Reference的区别