Small program – Modal

Modal dialog box, the integration of wechat development ability (based on MPVue framework).

The installation

npm install wepy-modal-extend -save

An overview of the

In view of the adjustment of wechat mini program to authorization interface and open ability, it is now necessary to guide users to take the initiative to authorize operations through

  • Direct the user to the applet customer service to send the specified content to get the details.

  • Some small programs must be authorized by the user before they can be used normally. After the user cancels authorization, a second modal confirmation pops up to provide an authorization entry

  • Location authorization needs to be manually enabled in the applet Settings after the user rejects it for the first time

· · · · · ·

The sample

<template> <view> <view> <view> <view> <view> <view class="auth-btn" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber"></button> </view> </view> <model :visible="visible" OpenType ="getPhoneNumber" title=" Authorization prompt "Content =" Small programs need your authorization to work properly" cancelText=" close popover "confirmText=" reauthorization" 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.daetail if (detail) {else {this.visible = true}}, handleModalVisible () { this.visible = ! this.visible } } } </script>Copy the code

API:

The property name type The default value mandatory instructions
visible Boolean There is no is Whether the dialog box is visible
openType String There is no no Wechat open ability, support getPhoneNumber, Contact, getUserInfo, openSetting
title String There is no no Title of prompt
content String There is no is The content of the prompt
showCancel Boolean true no Whether to display the cancel button
cancelText String cancel no Cancel button text, up to 4 characters
cancelColor String # 353535 no Cancel the text color of the button
confirmText String determine no Determines the text of the button, up to 4 characters long
confirmColor String #3CC51F no Determine the text color of the button
cancelFnName String There is no is Click the callback name of the mask layer or cancel button, as described in Events, to close the popup
confirmFnName String There is no is Click OK and the callback name is listed in events. When openType is passed, it is used to handle the callback after authorization, including BindGetUserInfo, BindContact, BindGetPhonenumber, and BindOpenSetting

License

MIT