mpvue-modal-extend v1.2.0

小程序 - Modal

模态对话框，对微信开发能力做了集成(基于mpvue框架)。

安装

npm install mpvue-modal-extend -save

概述

鉴于微信小程序对授权接口以及开放能力进行的调整，目前都需要通过<button open-type="xxxx">引导用户主动进行授权操作。同时日常开发中许多产品需求需要通过modal框来完成微信开放能力授权的步骤，如以下场景：

• 引导用户到小程序客服发送指定内容来获取详细信息。

• 部分小程序必须在用户授权后才能正常使用，在用户取消授权后弹出modal二次确认，提供授权入口

• 定位授权在用户第一次拒绝后需要在小程序设置里手动打开

······

示例

<template>
  <div>
    <div>
      <span>申请获取你微信绑定的手机号</span>
      <div>
        <a class="auth-btn">确认授权</a>
        <button open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber"></button>
      </div>
    </div>
    <model
      :visible="visible"
      openType="getPhoneNumber"
      title="授权提示"
      content="小程序需要您的授权才能正常使用"
      cancelText="关闭弹窗"
      confirmText="重新授权"
      cancelColor="#808080"
      confirmColor="#f83244"
      @confirm="handleGetPhoneNumber"
      @close="handleModalVisible"></model>
  </div>
</template>

<script>
  import Model from 'mpvue-modal-extend'
  export default {
    name: '授权',
    components: {
      Model
    },
    data () {
      return {
        visible: false
      }
    },
    methods: {
      handleGetPhoneNumber (e) {
        const detail = e.mp.detail
        if (detail) {
        	// 授权成功操作
        } else {
          this.visible = true
        }
      },
      handleModalVisible () {
        this.visible = !this.visible
      }
    }
  }
</script>

API ：

License

MIT