微信小程序自定义组件
概述
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护,自定义组件在使用时与基础组件非常相似
类似于页面,一个自定义组件由 json
、wxml
、wxss
、js
4个文件组成
代码实现
新建Component
首先新建一个文件夹,命名为components
,和pages
文件夹的位置同级,用于管理所有组件
在components
文件夹内新建一个文件夹,命名为input
,右键点击这个文件夹并选择新建Component,也命名为input
,项目结构如下图所示
组件wxml代码
1 | <!--components/input/input.wxml--> |
组件js文件
只改了属性列表,定义了一个属性inputValue
,数据类型为Number
,默认值为666
1 | // components/input/input.js |
使用组件
页面使用组件之前,首先在该页面的json文件
中进行引用声明,需要提供每个自定义组件的标签名
和对应的自定义组件文件路径
,标签名怎么写都行
1 | { |
页面wxml代码如下,my-input
和上面的要一样,input-value
是上面定义的属性inputValue
(改成inputValue也可以),如果不写input-value
会显示其默认值666
1 | <!--pages/demo/demo.wxml--> |
效果
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LeDao's Blog!
评论