微信小程序自定义组件Component的简单使用
首先为什么要使用component 这里列举2个例子,
1 如果项目中多个地方使用同一个弹框, 2 两个同事合作写一个界面,
这2中情况使用组件是比较好的选择
开始吧
第一步首先创建一个包用于存放组件
要把设置成组件需要在json中声明
"component": true,
如下直接复制也行
{
"component": true,
"usingComponents": {}
}
组件里的wxml中就是自己要填写的内容了,要注意的就是js里面不在是Page而是
Component({}) 开头, 里面可以填写data 用于初始化数据, 方法写在methods中,
这个记住就行了,给出demo里面的
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function () {
}
}
})
写好之后就是组合了 在json中填写
"component": "../component/component"
开头是是自己的包名,后面跟着的是自己填写的包名以及wxml名字
然后就是在wxml中引入即可
如果想在布局上就把引用放到上面,如果想放到下面就吧引用放到下面
效果图
demo地址需要的可以参考下