前言
接上篇,因项目需由H5转到小程序,故需打造自定义对话框。而这块需使用到微信小程序的自定义组件功能。
小程序自定义组件
点击此处,可以查看小程序自定义组件的api。
从自定义组件的样例中,我们了解到,其实自定义组件的页面构成和小程序的正常页面构成是一样的;都有自己的wxml、wxss、js、json。唯一需要注意的是js内容不一样
以及json
需要声明为组件。
小程序组件文件样例
dialog.wxml
dialog.wxss
样式省略...
dialog.json
{
"component": true
}
dialog.js
Component({
properties: {
btnOpts: {
type: Object,
observer: '_dialog'
}
},
data: {
visible: false,//是否显示
mask: true, //是否显示mask
title: '', //提示标题
text: '', //提示文字
buttons: [],//按钮信息
},
methods: {
btnAction(e) {
let index = e.currentTarget.dataset.index;
let button = this.data.buttons[index];
if (button.eventName !== undefined) {
let detail = { index: index }
this.triggerEvent(button.eventName, detail, {})
}
},
_dialog(btnOpts, oldVal) {
this.setData({
visible: btnOpts.visible,
title: btnOpts.title === undefined ? '' : btnOpts.title,
text: btnOpts.text === undefined ? '' : btnOpts.text,
buttons: btnOpts.buttons === undefined ? [] : btnOpts.buttons,
});
}
}
})
在此处遇到的问题是,小程序data中,不能传入函数;即使传入了,小程序data也会过滤掉。故此处使用了triggerEvent
也就是让组件触发页面事件(组件事件说明API)
而我的对话框,可能有一个按钮或者多个按钮,故将按钮定义为数组对象。
最后看看在普通页面中如何调用组件。
普通页面中如何调用组件
在调用页面的json中引入组件
{
"usingComponents": {
"dialog": "/pages/components/dialog/dialog"
}
}
在view页面中使用组件标签
提交
在js中声明使用的属性数据
... ...
data: {
btnOpts: '',
}
... ...
submit(e) {
let btnOpts = {
visible: true,
title: '温馨提示',
text: '恭喜,您抽中了300个宠物蛋~',
buttons: [{
title: '确定',
eventName: 'btnevent',//触发组建自定义事件
handler: () => {
//关闭对话框
let btnOpts = {
visible: false,
};
this.setData({
btnOpts: btnOpts
});
}
}],
}
let triggerEventIndex = e.detail.index;
if (triggerEventIndex === undefined) {
this.setData({
btnOpts: btnOpts
});
} else {
let button = btnOpts.buttons[triggerEventIndex];
if (button && typeof button.handler === "function") {
button.handler();
}
}
},
上面的代码在本页面按钮点击的时候会调用;在组件弹出对话框的按钮点击确认的时候也会调用。
因组件能通过e.detail属性传值,在点击的时候,就能知道点击的是哪个按钮;
故只需要组件回传给我按钮的数组index即可知道需要执行的函数;
解决了在data中不能传入函数以及在本页面代码冗余的问题。