小程式提供了元件component和模版template那什麼時候 選擇哪一個使用呢？我總結了一下
template主要是模版，對于重複的展示型子產品進行展示，其中調用的方法或者資料data都是需要引用頁面進行定義
component元件，相對于template更完整，接近于一個獨立的子產品，有自己的邏輯方法，資料，屬性，可以提供外部引用頁面使用方法進行互動；
是以 涉及到業務邏輯互動多的重複子產品 使用元件component更合适一些，如果僅僅是展示性性 用template即可
使用：
元件component：
1.建立元件目錄
因為元件不是真正的wxml，是以不再page 裡面 需要單獨建立一個目錄
之後結構形式 和 wxml相同 均為四個檔案，這裡有一個注意點，這裡建立的是元件 需要在json檔案中進行配置 更多的注意細節 可以看官網api
{
"component": true
} 
2.主要的邏輯都集中在js中，這是我的關于各種協定的一個元件的js
const app = getApp()
Component({
/**
* 元件的屬性清單
*/
properties: { //定義元件屬性
agreement: { //用來顯示提示資訊
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '協定名稱' // 屬性初始值（可選），如果未指定則會根據類型選擇一個
},
agreementCont: {
type: String,
value: ''
},
//z這個圖示 和下面 的baseRes效果是一樣的 是一個靜态資源的路徑擷取，對于公共常量 如何引入到元件的中第一種方法
iconRes: { //圖示類型
type: String,
value: app.config.BASE_RESOURCE
}
},
/**
* 元件的初始資料
*/
data: {
isShow: false
},
/**
* 元件的方法清單
*/
ready: function () {
//這裡是第二種方法 對于取公共資料globalData的一種方法 需要在ready中調用，直接寫在data中并不生效
this.setData({
baseRes: app.globalData.baseRes
})
},
methods: {
close: function () {
this.setData({
isShow: false
})
},
show: function (tit, txt) {
this.setData({
isShow: true,
agreementCont: txt,
agreement: tit
})
}
}
}) View Code
wxml:
<view class="agree-box" wx:if="{{isShow}}">
<view class="agree-cont">
<view class="agree-txt">
<view class="agreement">{{agreement}}</view>
<scroll-view scroll-y="true" class='agreementCont'>
<text class="agreementCont-txt">{{agreementCont}}</text>
</scroll-view>
</view>
//這裡的iconRes 或者 baseRes 均可以擷取到
<image src="{{iconRes}}argee-close.png" class="close" bindtap='close'></image>
</view>
</view> 一個基礎設定
const config = require('./utils/config.js') //這是一個公共常量的配置檔案
const service = require('./utils/service.js')
const onfire = require("./utils/onfire.js")
import mini from './utils/mini.js'
const util = require("./utils/util.js")
App({
api: service,
mini: mini,
util: util,
onfire: onfire,
config: config,
globalData: {
baseRes: config.BASE_RESOURCE,
windowHeight: null
},
onLaunch: function () {
var that = this;
//that.test();
that.getWindowHeight(); //擷取螢幕高度
that.bindNetworkChange();
this.getToken();
}
}) View Code
3.調用元件
引用的wxml中 此處的命名agree 标簽 和 app.json中的配置有關 ( id 與 js中相同 友善擷取元件 )
<agree id="agree"></agree> app.json
"usingComponents": {
"toast": "./components/toast",
"agree": "./components/agree"
}, 引用元件的js中
在ready中 将元件聲明
onReady: function () {
this.toast = this.selectComponent("#toast");
this.agree = this.selectComponent("#agree");
}, 調用元件的的事件
showAgree: function () {
var that = this;
if (that.data.applyData.serviceNetworkId) {
滿足條件後 請求接口 擷取 元件需要的資料 調用元件方法 将所需要的參數 傳入 調用元件内某些方法
app.api.applyAgreement({
"serviceNetworkId": that.data.applyData.serviceNetworkId
}).then(res => {
if (res) {
//這裡的 agree 是在ready中聲明的
that.agree.show('會員卡申請協定', res.constitutionInfoText);
} else {
that.agree.show('申請協定', '暫無内容');
}
})
} else {
that.toast.showToast('請選擇4S店', true);
}
} 這樣一個簡單的元件就完成了
模版template
這裡說一個資料為空時候的統一展示template
1.建立一個template檔案夾，這裡建立檔案 在page中即可，也是四個檔案（不過我試驗了一下 隻有 wxml和wxss 有用，js中的資料擷取沒有用，是以隻能依靠調用的時候将資料傳入）
之後noData.wxml中 命名為noData的template 模版
template.wxml檔案中能寫多個模闆，用name區分，頁面調用的時候也是以name指向對應的template塊
裡面有兩個變量 baseRes和noDataMsg 在調用的noData這個template進行傳參展示
<template name="noData">
<view class="nodata-cont">
<image src="{{baseRes}}nodata-public.png" class="nodata-img"></image>
<text class="nodata-txt">{{noDataMsg}}</text>
</view>
</template> 調用noData的wxml
這裡的 is="這個是template的name" data是該頁面中資料 作為參數傳入，作為template中的資料展示
<import src="../template/noData.wxml" />
....
<template wx:else is="noData" data="{{baseRes,noDataMsg}}"></template> wxss
@import "./pages/template/noData.wxss" 引用noData的js，将需要的變量 聲明在data中
data: {
baseRes: app.globalData.baseRes,
noDataMsg: '您目前還沒有積分'
} 這樣 一個簡單的模版 就做好了