wechat-miniprogram-dialog

特性

• 仿官方弹窗样式
• 支持调整模态透明度
• 支持获取Formid
• 支持打开微信开放能力功能

下载

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

DEMO

1. 打开微信web开发者工具，'本地小程序项目 - 添加项目'，项目目录选择为 miniprogram_dev 目录

使用

1. 安装

npm install --save wechat-miniprogram-dialog

2. 每次引入或更新需先执行开发者工具的 npm 构建，微信官方 npm 文档
3. 在你的页面json中添加

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

4. 在wxml中即可使用组件

<dialog></dialog>

调试开发

1. 打开微信web开发者工具，'本地小程序项目 - 添加项目'，项目目录选择为 miniprogram_dev 目录
2. 安装依赖 npm install
3. 构建命令 npm run dev
4. 更多帮助信息查看帮助文档

注意

• 小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始

Props

| name | description | type | default value | | :---------------- | :----------------------- | :------ | :------------ | | title | 标题 | String | 提示 | | width | 宽度 | String | 650rpx | | opacity | 模态层的透明度 | Number | 0.4 | | closeOnClickModal | 是否可以通过点击模态层关闭弹窗 | Boolean | false | | animation | 开启动画 | Boolean | true | | confirmText | 确定按钮的文字 | String | 确定 | | cancelText | 取消按钮的文字 | String | 取消 | | confirmColor | 确定按钮的文字颜色 | String | #333333(支持RGBA) | | cancelColor | 取消按钮的文字颜色 | String | #999999(支持RGBA) | | showConfirm | 是否显示确定按钮 | Boolean | true | | showCancel | 是否显示取消按钮 | Boolean | true | | confirmBackgroundColor | 确定按钮背景颜色 | String | #ffffff(支持RGBA) | | cancelBackgroundColor | 取消按钮背景颜色 | String | #ffffff(支持RGBA) | | confirmOpenType | 确定按钮微信开放能力，请参考https://developers.weixin.qq.com/miniprogram/dev/component/button.html | String | | | cancelOpenType | 取消按钮微信开放能力，请参考https://developers.weixin.qq.com/miniprogram/dev/component/button.html | String | | | loading | 确认按钮是否带 loading 图标 | Boolean | true | | gatherFormId | 是否收集formId | Boolean | true | | appParameter | 打开 APP 时，向 APP 传递的参数，-open-type="launchApp"时有效 | String | | | sessionFrom | 会话来源，-open-type="contact"时有效 | String | | | position | 位置，有center、top、bottom | String | center |

events

| name | description | parameters | | :---------------- | :----------------------- | :------ | | open | 当窗口打开 | | | close | 当窗口关闭 | | | cancel | 点击取消 | | | confirm | 点击确认 | | | getFormId | 获取到formid | event.detail.formId | | getuserinfo | 点击按钮时，会返回获取到的用户信息，-open-type="getUserInfo"时有效 | event.detail | | contact | 客服消息回调，-open-type="contact"时有效 | | | getphonenumber | 获取用户手机号回调，-open-type="getPhoneNumber"时有效 | event.detail | | opensetting | 在打开授权设置页后回调，-open-type="openSetting"时有效 | | | launchapp | 打开 APP 成功的回调，*-open-type="launchApp"时有效 | |

贡献

如果你有好的意见或建议，欢迎给我提issue!