小程序-組件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
      })
    }
  }
})

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();
  }
})

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: '您目前還沒有積分'
  }

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