wepy小程序modal组件，对微信开放能力做了集成

小程序 - 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