微信小程序-自定义组件
本人是做Android出身，一开始对本专业还是难舍难分的，相信一些过来的人都能体会的。真正涉及到前端界，还是在16年底，那时候React-Native新进花旦，热度一度飙升，曾有传言要统治移动端。当时，公司CTO决定试试水，从此我便一只脚踏上了前端之路。
由于RN的部分前端基础，在18年初，公司决定进军微信小程序，于是我又来了。那么在经历了一年多的断断续续独立开发了2个项目后，我对于小程序的又有了什么理解呢？之前是只做功能，不管代码风格，复用，分包等，现在越来越注重代码的质量了，当然这些会给你带来更少的bug。
言归正传，我们平时会使用到类似下面这种item，当然左边也可以加icon的
1-1
1-2
一般来说我们都会各个页面都自己写自己的，但是后来发现这种方式最直接的弊端就是增加代码量，使项目的体积越来越大。我们知道小程序对于体积是有大小限制的，目前是最大8M，每个包最大2M，而且包太大也会影响加载效率。所以，我们需要用最少的代码实现更多的功能。上述这些item，我们其实能抽象出来，作为独立的自定义组件。
在项目结构里可以单独一个文件夹，比如component，里面放置各种自定义的组件，我的项目部分目录如下
2-1
在component目录上右键，选择新建component，名字可以自己随意取，比如上图的myitem，建好之后就如上图。其实和普通页面的页面结构是一样的，json和js文件是有区别的，读者可以自行比对。
第一步：修改wxml文件
1）打开wxml文件，可以写上自己的通用代码，下面贴上我自己的item通用代码
myitem.wxml
其实这就是我们平时写的界面，只是抽取了部分变量，由父组件传入。比如，class，leftIcon，tabHeight等，还有事件onItemClick等。那么这些东西我们都需要在js文件里配置好。但是对于样式及class，如果我们在自定义组件内的wxss里已经定义了，那么再由外部传入时，相同属性的会不起作用。所以推荐都是由外部传入，对于一些不变的样式可以在自定义组件内写死。js样例文件如下：
myitem.js
由于此处样式大多都是在自定义组件内使用，所以就写在了myitem.wxss中
myitem.wxss
myitem.wxss
第二步：使用
1）接下来我们需要引入到我们需要使用的地方，在需要引入的地方的js文件中
my.js
备注：注意如果只使用一个自定义组件，那么需要把后面的逗号去掉
2）再使用处中使用myitem，和最开始的样例图对应
my.wxml
user.wxml
至此，简单的组件自定义相信大家都有方向了。
