微信小程序组件封装
类似于页面,一个自定义组件由
json
wxml
wxss
js
4个文件组成
定义组件
1.在json文件中做自定义组件声明
{
"component": true
}
2.在wxml文件
中编写组件模板,在wxss文件
中加入组件样式
<view class="inner">
{{innerText}}
</view>
2.1 tip
- 001
组件wxss
中的样式只作用于这个自定义组件 - 002 在
组件wxss
中__不应该__使用id选择器
、属性选择器
和标签选择器
3.在自定义组件的js文件
中,需要使用Component()
来注册组件,并提供组件的属性定义
、内部数据
和自定义方法
Component({
// 组件的对外属性,是属性名到属性设置的映射表
properties: {
innerText: {
type: String,
value: '',
observer(newVal, oldVal, changePath) {}
},
myProperty2: String
},
data: {},
methods: {}
})
使用自定义组件
1.在json文件
中进行引用声明
{
"usingComponents": {
"component-tag-name": "path/component"
}
}
2.在页面的wxml
中就可以像使用基础组件一样使用
<view>
<component-tag-name inner-text="some text"></component-tag-name>
</view>
注意
-
因为wxml节点标签名只能是小写字母、中划线和下划线组合,所以自定义组件的标签名也只能包含这些字符。
-
自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用usingComponents字段)。
-
自定义组件和页面所在项目根目录名不能以"wx-"为前缀,否则会报错。