wechat miniprogram dialog

wechat-miniprogram-dialog

characteristic

• Imitate official pop-up window style
• Support adjusting modal transparency
• Support obtaining Formid
• Support opening WeChat open capability function

download

git clone https://github.com/simsir-lin/wechat-miniprogram-dialog.git

DEMO

1. Open the WeChat web developer tool, 'Local Mini Program Project - Add Project', and select the project directory as the miniprogram_dev directory.

use

1. Install

npm install --save wechat-miniprogram-dialog

2. Each introduction or update must first execute the npm build of the developer tools, WeChat official npm documentation
3. Add in your page json

 {
  "usingComponents" : {
    "dialog" : "wechat-miniprogram-dialog"
  }
}

4. Components can be used in wxml

 < dialog > </ dialog >

Debugging and development

1. Open the WeChat web developer tool, 'Local Mini Program Project - Add Project', and select the project directory as the miniprogram_dev directory.
2. Install dependencies npm install
3. Build command npm run dev
4. For more help information, view the help documentation

Notice

• Mini program basic library version 2.2.1 or above, and developer tools 1.02.1808300 or above.

Props

name	description	type	default value
title	title	String	hint
width	width	String	650rpx
opacity	Modal layer transparency	Number	0.4
closeOnClickModal	Is it possible to close the pop-up window by clicking on the modal layer?	Boolean	false
animation	Turn on animation	Boolean	true
confirmText	OK button text	String	Sure
cancelText	Cancel button text	String	Cancel
confirmColor	Determine the text color of the button	String	#333333(support RGBA)
cancelColor	Cancel button text color	String	#999999(support RGBA)
showConfirm	Whether to display the OK button	Boolean	true
showCancel	Whether to display a cancel button	Boolean	true
confirmBackgroundColor	Determine button background color	String	#ffffff(supports RGBA)
cancelBackgroundColor	Cancel button background color	String	#ffffff(supports RGBA)
confirmOpenType	To determine the WeChat opening capabilities of the button, please refer to https://developers.weixin.qq.com/miniprogram/dev/component/button.html	String
cancelOpenType	To cancel the WeChat open button button, please refer to https://developers.weixin.qq.com/miniprogram/dev/component/button.html	String
loading	Check whether the confirmation button has a loading icon	Boolean	true
gatherFormId	Whether to collect formId	Boolean	true
appParameter	When opening the APP, the parameters passed to the APP are valid when *-open-type="launchApp"	String
sessionFrom	Session source, valid when *-open-type="contact"	String
position	Position, including center, top, bottom	String	center

events

name	description	parameters
open	when the window opens
close	when the window is closed
cancel	Click Cancel
confirm	Click to confirm
getFormId	Get formid	event.detail.formId
getuserinfo	When the button is clicked, the obtained user information will be returned, valid when *-open-type="getUserInfo"	event.detail
contact	Customer service message callback, valid when *-open-type="contact"
getphonenumber	Callback to get the user's mobile phone number, valid when *-open-type="getPhoneNumber"	event.detail
opensetting	Called after opening the authorization setting page, valid when *-open-type="openSetting"
launchapp	Callback for successful opening of APP, valid when *-open-type="launchApp"

contribute

If you have any good comments or suggestions, please feel free to raise an issue with me!