微信小程序(一)- 自定义组件

        本人是做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

至此,简单的组件自定义相信大家都有方向了。

上一篇:关于Glide加载https协议图片时3.x和4.x版本处理