小程序 - Modal
模态对话框,对微信开发能力做了集成(基于mpvue框架)。
安装
npm install wepy-modal-extend -save
概述
鉴于微信小程序对授权接口以及开放能力进行的调整,目前都需要通过<button open-type="xxxx">
引导用户主动进行授权操作。同时日常开发中许多产品需求需要通过modal框来完成微信开放能力授权的步骤,如以下场景:
- 引导用户到小程序客服发送指定内容来获取详细信息。
- 部分小程序必须在用户授权后才能正常使用,在用户取消授权后弹出modal二次确认,提供授权入口
- 定位授权在用户第一次拒绝后需要在小程序设置里手动打开
······
示例
<template>
<view>
<view>
<view>申请获取你微信绑定的手机号</view>
<view>
<view class="auth-btn">确认授权</view>
<button open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber"></button>
</view>
</view>
<model
:visible="visible"
openType="getPhoneNumber"
title="授权提示"
content="小程序需要您的授权才能正常使用"
cancelText="关闭弹窗"
confirmText="重新授权"
cancelColor="#808080"
confirmColor="#f83244"
confirmFnName="handleGetPhoneNumber"
cancelFnName="handleModalVisible"></model>
</view>
</template>
<script>
import Model from 'wepy-modal-extend'
export default class Index extends wepy.page {
components = {
Model
},
data = {
visible: false
},
events = {
handleGetPhoneNumber (e) {
const detail = e.detail
if (detail) {
// 授权成功操作
} else {
this.visible = true
}
},
handleModalVisible () {
this.visible = !this.visible
}
}
}
</script>
API :
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
visible | Boolean | 无 | 是 | 对话框是否可见 |
openType | String | 无 | 否 | 微信开放能力,支持getPhoneNumber、contact、getUserInfo、openSetting |
title | String | 无 | 否 | 提示的标题 |
content | String | 无 | 是 | 提示的内容 |
showCancel | Boolean | true | 否 | 是否显示取消按钮 |
cancelText | String | 取消 | 否 | 取消按钮的文字,最多 4 个字符 |
cancelColor | String | #353535 | 否 | 取消按钮的文字颜色 |
confirmText | String | 确定 | 否 | 确定按钮的文字,最多 4 个字符 |
confirmColor | String | #3CC51F | 否 | 确定按钮的文字颜色 |
cancelFnName | String | 无 | 是 | 点击遮罩层或取消按钮的回调名称,方法写在events里,用来关闭弹框 |
confirmFnName | String | 无 | 是 | 点击确定后回调名称,方法写在events里。当openType传值时,用来处理授权后的回调,包括bindgetuserinfo、bindcontact、bindgetphonenumber、bindopensetting |
License
MIT