文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ在上一篇小程序使用WXS的文章中，介绍了wxs的使用，通过wxs处理数据，然后进行渲染到视图层，简化了数据处理，封装了通用的数据处理，避免了重复代码的使用。今天要介绍的是小程序的自定义组件。类似于android开发过程中使用的自定义视图，封装成一个通用的组件，可以在不同的页面中复用；复杂的页面可以拆分成多个低耦合的模块，便于代码维护。一个自定义组件包含4个文件：jsjsonwxmlwxss。如果在微信开发者工具中选择Component，会自动创建这4个文件。在json文件中设置：{"component":true}这组文件可以作为自定义定义组件使用。一个简单的例子，一个自定义项被用作一个组件。在组件的wxml文件中编写页面元素{{txt}}{{title}}{{subTitle}}组件提供了一个节点用于承载component引用时提供的子节点可以作为占位符，后面view可以直接填充到这个节点中。wxss是对应组件的样式。内容{显示：flex;证明内容：空格之间；对齐项目：居中；左填充：10px；padding-right:10px}.title{color:#424242}.subTitle{color:#939393;font-size:16px}js文件中的Component构造函数可以指定组件的属性、数据、方法等。/***组件属性列表*/properties:{title:{type:String,//属性类型value:"--"//属性初始值},subTitle:{type:String,value:"--"},}属性列表中的值渲染在组件的wxml中。/***组件初始数据*/data:{txt:"color"}，组件内部数据用于wxml渲染。在需要使用该组件的页面的json文件中添加。注意路径是绝对路径{"usingComponents":{"item":"/component/item/item"//绝对路径}}wxml页面中直接使用- 标签，该标签下的节点文本用于填写1,
一个简单的页面渲染组件也可以接受风格是从外面传进来的。在组件的js文件Component构造函数中，Component({externalClasses:['title-class']})注意这里用的是*-class形式的定义，在组件的wxml中定义如果是外部使用在{{title}}中，可以看到外部样式传递给了组件使用。//wxml文件1,//wxss.red-class{color:red}一个简单的组件示例就完成了。在实际项目中，很容易通过自定义组件在不同页面复用。欢迎关注我的个人博客：https://www.manjiexiang.cn/更多精彩，敬请关注微信公众号：春风相识，不如相知相知。一起学习，一起进步。！！更多精彩：【pythonitchat爬取微信好友信息】(https://mp.weixin.qq.com/s?__...【python爬虫学习：爬虫QQ聊并生成词云图，满满的回忆】（https://mp.weixin.qq.com/s?__...[python图片在线转人物绘画预览](https://mp.weixin.qq.com/s?__...[android仿微信表情下雨了！](https://mp.weixin.qq.com/s?__...[仿支付宝首页头部拉伸效果](https://mp.weixin.qq.com/s?__...【自己的一个小程序】(https://mp.weixin.qq.com/s?__...
