wepy-modal-extend v1.0.1

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

License

MIT