2020.8.07 微信小程序（组件封装）

今天说一下微信小程序组件的封装…

为什么要封装组件？

写组件的目的就是为了复用，它的好处太多了

a. 写更少的代码。

b. 减少开发时间。

c. 代码的bug更少。

d. 占用的字节更少。
…
组件复用使我们的代码组织变得非常灵活。

那么组件到底怎么封装，其实就和vue组件封装的思想一样的
最近在写这样一个小程序：

可以看到页面是有很多小块组成的，如果都在home页面开发的话，先不说js逻，就页面布局也很费劲，后期代码也不好维护，这个时候就可以用组件的方式来写。可以把组件定义好的标签直接引到home主页就可以了，有问题可以到相应的组件里修改就可以了。

下面开始封装组件：

1.创建一个组件：
在page的同级目录下，创建一个文件夹，命名为components文件夹,这个文件夹是用来放组件的。如图：

Component组件像页面一样由wxml、wxss、js和json4个文件组成，而且这4个文件放在同一个目录中。但是js文件和json文件与页面不同。
下面是js代码：

 // components/demo/index.js
 Component({
 /**
 * 组件的属性列表
 */
 properties: {
 	name: {
 		type: String,
 		value: ''
	}
},

/**
* 组件的初始数据
*/
data: {
	type: "组件"
},
/**
* 组件的方法列表
*/
methods: {
	click: function () {
		console.log("component!");
	 }
}

然后配置json文件：

{
   "component": true,
   "usingComponents": {}
 }

然后在页面中引用组件：

{
    "navigationBarTitleText": "模板demo",
    "usingComponents": {
  		 "demo": "../../components/demo/index" 
     }
 }

最后在模板文件中进行使用就可以了，其中name的值为json配置文件中usingComponents的键值：

<demo name="comp"></demo>
     <!--使用demo组件，并传入值为“comp”的name属性（参数）-->

这样，一个组件就封装好了

注意：组件中不会自动引用公共样式，如果需要则需在样式文件中import引入就可以了。

 @import "../../app.wxss";