027-87227388

微信小程序组件开发

发布时间:2020-10-31 浏览:29

微信小程序组件开发

    组件的三要素就是小程序定义的三种文件:js,wxml,wxss。因为js本身就是模块化开发,所以这天然有利于组件化。wxml和wxss呢,定义了组件的皮肤,小程序的模板template标签可以方便wxml的复用。至于wxss,没有独立出来,目前没发现要怎么整合到独立的组件中去,而不与其他的wxss发生耦合。

    微信小程序组件开发教程

    用法

    //  如果模板是写在单独的wxml文件,则要inport,引入。路径则是当前文件的相对路径。

    import>

   

    需要注意的是data数据是有单独的作用域的,只能使用data传入的数据。具体的理解就是:

    data: {
    item: {
        index: int
        msg: string
        time: string
    },
    index: int
    msg: string
    time: string
}

    模板里面的数据实际显示的是item的属性,而不是和item同级的属性。

    模板还有一种用法

   

    这样就要传入模板中用到的三个变量,而不是item一个对象。模板渲染的结果则是最外层的index属性,而不是item的index属性值。

    …符号是扩展运算符,理解为将一个对象所以的属性展开传递给模板,这样的好处是不要传递多个,写出的代码更加简洁。扩展运算符是ES6的特性,有兴趣可以深入学习。

    如果运用扩展运算符给模板传入数据,像上面怎么去更新单个key的值呢?小程序提供了可以根据属性路径更新的方法:

    // 更新单个key,

    this.setData({

    index: 1

    });

    /* 更新对象中的单个key

    item: {

    index: int 

    msg: string

    time: string

    }

    */

    this.setData({

    \'item.index\': 1

    });

    // path必须是字符串,不能是变量替代。下面是不行的

    path =  \'item.index\';

    this.setData({

    path: 1

    });

    虽然用法上是有点限制,但也避免了传入一堆的参数给模板。值得注意的是入参data的item必须是有初始化值,否则会报错。

    举一个日历组件开发的实例,利用template和js就可以打造这样一款组件了。
微信小程序组件开发教程

    定义一个wxml文件和一个js文件,日期类有自己的作用域名,所以组件内部的事件导致数据更新的时候,还是要用页面更新数据的方法this.setData,所以必须要将页面对象传递给组件内部。
页面调用组件:
// this 是当前页面page对象,含有setData方法。
var calendar = new Calendar(this, function(date) {
  that.setData({
      date: date
  })
});

    // 当选择日期变化的时候,组件内部事件: this.pageCtx 则是page上下文,即上面实例化组件入参的this对象。

    changeCalendarTab(e) {

    this.pageCtx.setData({
       \'calendar_data.selectDateType\':
           +e.target.dataset.tap
   });
   this.data.selectDateType = +e.target.dataset.tap;
   this.changeCallBack && this.changeCallBack(this.getCurrentSelectDate());
}

    这样就完成了一个组件编写,任何需要用到的地方都可以引入了。小程序一个不太好的地方是没有包管理的概念,导致跨项目见的公共模块复用起来比较麻烦。