java自定义图形组件开发,构建自定义组件

#前言 接上篇，因项目需由H5转到小程序，故需打造自定义对话框。而这块需使用到微信小程序的自定义组件功能。

小程序自定义组件

点击此处，可以查看小程序自定义组件的api。 从自定义组件的样例中，我们了解到，其实自定义组件的页面构成和小程序的正常页面构成是一样的；都有自己的wxml、wxss、js、json。唯一需要注意的是js内容不一样以及json需要声明为组件。

小程序组件文件样例

###dialog.wxml

{{title}}

{{text}}

{{item.title}}

###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中不能传入函数以及在本页面代码冗余的问题。