微信小程序開發--模板(template)使用，數據加載，點擊交互

時間 2019-12-14

標籤微信程序開發模板 template 使用數據加載點擊交互简体版

原文原文鏈接

　　微信小程序視圖層提供了模板(template)，能夠在模板中定義代碼片斷，而後在不一樣的地方調用。結果在數據渲染那懵逼了。按照官網上對模板的說明和對數據的加載。node

一、定義模板

　　使用name屬性，做爲模板的名字。而後在<template/>內定義代碼片斷，如：小程序

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">　　//此處的name 有ID的意味，便於其餘頁面加載該模板時使用和查找
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

二、使用模板

　　先將模板的wxml文件和wxss文件路勁連接導入到須要使用模板的wxml文件和wxss文件內，而後在須要導入模板的wxml文件內使用 is屬性，聲明須要的使用的模板，而後將模板所須要的data傳入，如：微信小程序

<import src="../template/msgItem/msgItem.wxml"/>　　　　
<template is="msgItem" data="{{...item}}"/>　　<!--{{...item}}  ...是將數據展開，即這樣將數據傳輸到模板時，其實是將item按鍵值對展開-->
Page({
    data: {
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        }
    }
});

@import "../template/msgItem/msgItem.wxss";

　　is屬性可使用Mustache語法，來動態決定具體須要渲染哪一個模板：數組

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

三、模板數據傳入

　　在頁面的 template 標籤中將模板所須要的data傳入，如：微信

<!--展開：-->
<template is="lookRecord"  data="{{...followRecords}}"/>

　　展開：傳入的數據已經按鍵值對模式被一一展開，直接經過對象的屬性就能獲取對象中的值，這點跟VUE的模板使用差很少。但若是模板中存在 wx:for="{{followRecords}}" 運用，即傳入的對象中某個屬性的值是一個數組Array，系統則會報渲染結構錯誤，找不到屬性。xss

，這時這種展開式傳值就不行了。this

　　那就採用不展開的形式。不展開：傳入的數據在模板中按照屬性一對一調用的方式獲取數據，如：spa

<!--不展開：-->
<template is="lookRecord"  data="{{lookRecord}}"/>

<view class="information-feedback-area" wx:for="{{lookRecord.feedbackBasicInfor}}" wx:for-index="index" wx:for-item="indexData">
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[0].option}}</text>
            <image class="information-options-image" src="{{indexData[0].icon}}"></image>
        </view>
    </view>
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[1].option}}</text>
            <image class="information-options-image" src="{{indexData[1].icon}}"></image>
        </view>
    </view>
</view>

四、模板點擊交互

　　在理清楚數據的獲取和渲染後，模板中綁定事件，實現正常交互，就是最後的問題了。因爲模板(template)沒有本身的JS文件，因此模板的交互功能方法都是寫在引用該模板的頁面的JS控制模塊內。如：code

　　我在 detailedInformation 頁面調用了 basicInformation模板，那麼模板basicInformation 內的全部交互功能都是寫在detailedInformation.js內的。下面定義事件，如：orm

//detailedInformation.js
templateInteraction: function () {
    var tampData = this.data.item;
    tampData.clickAction = "nodeOperation ";
    this.setData({item: tampData})
},
nodeOperation: function () {
    console.log("模板交互功能方法執行！")
},

　　而後在模板中綁定該事件，如：

<template is="basicInformation" data="{{item}}"></template>

<template name="basicInformation">
    <view class="information-container">
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">電\r\t\r\t\r\t\r\t\r\t\r\t話1:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho1}}">{{basicInformation.phone1}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho1}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">電\r\t\r\t\r\t\r\r\t\r\t話2:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho2}}">{{basicInformation.phone2}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho2}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
    </view>
</template>