用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 实战教程 查看内容

如何写一个微信小程序组件

纸飞机 2017-6-15 11:16

背景先谈下背景,在做一款产品的时候需要用到日期选择器,但是官方的却不太满足需求,因为无法选择农历啊。所以自己来造一个轮子好了,造轮子之前先想想啊,万一以后多个地方要用到,多个项目要用,怎么办呢?那把这 ...

背景

先谈下背景,在做一款产品的时候需要用到日期选择器,但是官方的却不太满足需求,因为无法选择农历啊。所以自己来造一个轮子好了,造轮子之前先想想啊,万一以后多个地方要用到,多个项目要用,怎么办呢?

那把这个轮子抽象,定义输入输出,即接口。组件里面怎么运转调用方不管啊,给了什么输入,就只管结果好了。

组件三要素

组件的三要素就是

小程序

定义的三种文件:

  • js
  • wxml
  • wxss

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


<template name="myTemplate">
  <view>
    <text> {{index}}: {{msg}} text>
    <text> Time: {{time}} text>
  view>
template>

用法

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

<import src="../cal/calendar.wxml">import>

<template is="myTemplate" data="{{...item}}"/>

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

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

模板里面的数据实际显示的是item的属性,而不是和item同级的属性。
模板还有一种用法

<template is="myTemplate" data="{{index,msg,time}}"/>

这样就要传入模板中用到的三个变量,而不是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文件

class Calendar {
...
}

日期类有自己的作用域名,所以组件内部的事件导致数据更新的时候,还是要用页面更新数据的方法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());
}

具体组件请参考我的github:

calendar

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏