小程序-組件component和模版template的選擇和使用

小程序提供了組件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: '您目前尚未積分' }

這樣 一個簡單的模版 就作好了