小程序-组件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: '您目前还没有积分'
  }

这样 一个简单的模版 就做好了