微信小程序 - 组件

官方文档见:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/

 

我们的封装:

var BaseComponentOption = require("../../utils/BaseComponentOption");
var option = BaseComponentOption.init({
  properties: {
    //说明文字
    label: {
      type: String
    },
    //最小值限制
    min: {
      type: Number,
      value: 0
    },
    //最大值
    max:{
      type:Number,
      value:9999
    },
    // 当前值
    value: {
      type: String,
      value: ""
    }

  },
  //传参对象,和 官方文档一致,只是内部做了封装,默认提供一个 entity:Object , style:String 的参数
  attached() {

  },
  ready() {

  },
  methods:{
    abate(e){
      if (!isNaN(this.data.min)) {
        if (this.data.min >= this.data.value) {
          return;
        }
      }
      console.log(this.data.value);
      this.data.value--;
      this.setData(this.data);
      this.triggerEvent('change', this.data.value)  
    },
    add(e){
      if(this.data.max){
        if (this.data.max<=this.data.value){
          return;
        }
      }
      this.data.value++;
      this.setData(this.data) 
      this.triggerEvent('change', this.data.value)  
    }
  }
});

/**
 * 自定义组件  线路在列表中的展示
 */
Component(option)

BaseComponentOption 中 默认封装了:
属性  entity  对应外部传递过来的 对象, 类型  Object 
     style  用于外部自定义样式, 预留字段
方法  showDefaultImage  用于默认图片的处理 
其他:  只要按照 BaseComponentOption.init 方式去初始化组件,即可有无限可能


值得注意的是:  组件中定义的 样式,只在组件内部可用,不会影响到外部
             同样,外部Page的样式也不会干扰到组件
　　　　　　 　　所以,如果需要使用 全局样式
需要单独  require外部css


<tag>

   内部内容
</tag>
这里的标签内内部内容,在组件wxml中使用<slot /> 标签表示

这里的封装暂时很简单,只有生命周期的封装, 支持mixins请见官方文档 
目前的方案是,组件只负责展示,尽量 不做数据的处理,所有的处理在外部完成,减少技术复杂度,尽快上手