小程序-组件component和模版template的选择和使用

小程序提供了组件component和模版template那什么时候选择哪一个使用呢？我总结了一下

template主要是模版，对于重复的展示型模块进行展示，其中调用的方法或者数据data都是需要引用页面进行定义

component组件，相对于template更完整，接近于一个独立的模块，有自己的逻辑方法，数据，属性，可以提供外部引用页面使用方法进行交互；

所以涉及到业务逻辑交互多的重复模块使用组件component更合适一些，如果仅仅是展示性性用template即可

使用：

组件component：

1.创建组件目录

因为组件不是真正的wxml，所以不再page 里面需要单独创建一个目录

小程序-组件component和模版template的选择和使用

之后结构形式和 wxml相同均为四个文件，这里有一个注意点，这里创建的是组件需要在json文件中进行配置更多的注意细节可以看官网api

{
  "component": true
}

小程序-组件component和模版template的选择和使用

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