首先,第一步,创建一个按钮的组件,方便复用,当点击按钮时候,会跳出是否授权的对话框:
组件的wxml代码:
button bind:getuserinfo="onGetUserInfo" open-type="{{openType}}" plain="{{true}}" class="container" slot name="img"/slot /button
绑定事件onGetUserInfo 定义opentype属性 slot标签是一个组件插槽
组件的JS代码:
component({ /** * 组件的属性列表 */ //开启插槽 options:{ multipleSlots:true }, properties: { openType:{ type:String } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { onGetUserInfo(event){ this.triggerEvent('getuserinfo',event.detail,{}) } }})
在JS中,定义options开启组件的插槽:true
定义openType属性的数据类型为字符串,
在刚刚wxml代码的绑定的事件,编写触发器事件,获取用户信息,getuserinfo
组件编写完之后,在page页面中进行应用,
首先打开page页面的json文件:(进行配置 组件的调用)
page页面的json代码:
{ "usingComponents":{ "v-button":"/components/image-button/index" }}
上面的v-button就是我给刚刚的组件取得名字,可以拿到page页面的wxml中进行调用
page页面的wxml代码:调用按钮组件 open-type为share 分享 slot为组件开启的插槽
!-- 分享按钮 --v-button class="share-btn" open-type="share"image class="share" slot="img" src="/images/icon/share.png"//v-button接下来看在PC端测试的效果:
