推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
如何写一个微信小程序组件
发布时间:2020-12-31
背景先谈下背景，在做一款产品的时候需要用到日期选择器，但是官方的却不太满足需求，因为无法选择农历啊。所以自己来造一个轮子好了，造轮子之前先想想啊，万一以后多个地方要用到，多个项目要用，怎么办呢？那把这 ...
背景
先谈下背景，在做一款产品的时候需要用到日期选择器，但是官方的却不太满足需求，因为无法选择农历啊。所以自己来造一个轮子好了，造轮子之前先想想啊，万一以后多个地方要用到，多个项目要用，怎么办呢？
那把这个轮子抽象，定义输入输出，即接口。组件里面怎么运转调用方不管啊，给了什么输入，就只管结果好了。
组件三要素组件的三要素就是小程序定义的三种文件：
js
wxml
wxss
因为js本身就是模块化开发，所以这天然有利于组件化。wxml和wxss呢，定义了组件的皮肤，小程序的模板template标签可以方便wxml的复用。至于wxss，没有独立出来，目前没发现要怎么整合到独立的组件中去，而不与其他的wxss发生耦合。
<template name=http://www.yiyongtong.com/archives/"myTemplate"> <view> <text> {{index}}: {{msg}} text> <text> Time: {{time}} text> view> template>用法
// 如果模板是写在单独的wxml文件，则要inport，引入。路径则是当前文件的相对路径。 <import src=http://www.yiyongtong.com/archives/"../cal/calendar.wxml">import> <template is=http://www.yiyongtong.com/archives/"myTemplate" data=http://www.yiyongtong.com/archives/"{{...item}}"/>需要注意的是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文件
class Calendar { ... }