版权申明：本文原创，转载请注明出处 https://segmentfault.com/a/11...
系列文章：微信小程序自定义组件——底部菜单栏 ActionSheet
之所以写这个自定义modal组件，和自定义ActionSheet一样，次要是用于一些凋谢能力。有些凋谢能力必须绑定在button上，比方用户受权，这个需要很常见，然而小程序当初曾经不反对被动弹出受权框了，所以咱们会想先弹出modal用户点击确定再来弹出受权框，小程序原生的Modal确定按钮无奈实现，故此组件应运而生。该Modal组件还反对转发，关上设置页的凋谢能力，同时也扩大了提交表单性能。
装置
1.应用npm装置
间接应用小程序开发工具自带的构建npm，请按上面几个步骤引入：
- 确保我的项目目录下有package.json文件，已有的跳过这一步
$ npm init- 装置
$ npm i wx-miniprogram-modal- 在小程序开发者工具中顺次找到并点击
工具->构建npm，构建实现后你的我的项目目录会多出一个miniprogram_npm目录，请确保我的项目设置已勾选应用npm模块 - 在应用组件的页面配置json中应用
{ "usingComponents": { "mymodal": "wx-miniprogram-modal" }}2.不应用任何构建工具的一般小程序安装
间接拷贝wx-miniprogram-modal仓库中的miniprogram_dist目录下的代码到我的项目中的放组件的目录中去，之后应用办法和小程序自定义组件一样了。同样须要在页面配置json中申明：
{ "usingComponents": { "mymodal": "../components/modal/index" // 依据你的目录写 }}应用
wxml文件中
<mymodal type="{{type}}" title='{{title}}' content='{{content}}' form-items="{{items}}"confirmText='{{confirmText}}' showStatus='{{showModal}}' showCancel="{{showCancel}}" bind:complete="onComplete"></mymodal>js文件中
// 只列出外围代码Page({ data: { showModal: false, type: 'getUserInfo', showCancel: false, title: '提醒', content: '', confirmText: '好的', items: [{ label: '请输出姓名', name: 'name' }] }, // 实现操作的回调 onComplete: function (e) { // 敞开模态框 这里其实不写也行，组件里曾经蕴含了敞开modal的代码， // 然而不写这个的话，该页面的data里的showModal值是不会变仍是true， // 如果确定不会造成其余影响，写不写看集体 this.setData({ showModal: false, }) if (e.detail.confirm) { // 用户点击确定 // 各个type携带的数据 这里为了不便写到一起了 // 用户受权 if (this.data.type === 'getUserInfo') { if (e.detail.hasUserInfo) { // 曾经受权 this.setData({ hasUserInfo: true, userInfo: e.detail.userInfo }) app.globalData.userInfo = e.detail.userInfo } else { wx.showToast({ title: '您回绝了受权', icon: 'none' }) } } // 提交表单 if (this.data.type === 'prompt') { var formData = e.detail.formData var formId = e.detail.formId // eg. // formData: {name: "Jaime"} // formId: "the formId is a mock one" } // 关上设置页 if (this.data.type === 'openSetting') { var authSetting = e.detail.authSetting // eg. { "scope.userInfo": true} } } else { // 用户点击勾销 } }, onShareAppMessage: function (res) { if (res.from === 'button') { // 因为自定义组件内不能应用转发回调 所以在这敞开模态框 // 不写这个 模态框点击转发按钮将不会主动敞开 if (res.target.dataset.type === 'modalShare') { this.setData({ showModal: false }) } } return { title: '自定义转发题目', path: '/page/index?id=123' } }})参数
| 属性 | 数据类型 | 阐明 | 选项 | 默认值 |
|---|---|---|---|---|
| showStatus | Boolean | modal的显隐状态 | 必填 | — |
| type | String | modal的类型，可选值：prompt、getUserInfo、share、openSetting | 必填 | — |
| showCancel | Boolean | 是否显示勾销按钮 | 选填 | false |
| confirmText | String | 确定按钮的文字 | 选填 | 好的 |
| cancelText | String | 勾销按钮的文字 | 选填 | 勾销 |
| title | String | 题目，不写或为空时则不显示title | 选填 | 无 |
| content | String | modal的内容 | 选填 | — |
| formItems | Array | type='prompt'时必填的表单项属性，格局: [{label: '输入框label', name: '键名', val: '初始值(可为空)'}, ...] | 选填 | [] |
| reportSubmit | Boolean | type="prompt"时 是否返回 formId | 选填 | false |
触发事件
| eventName | 阐明 |
|---|---|
| complete | modal实现时触发的事件，e.detail.confirm来判断是勾销还是确定，type='prompt'时携带的数据包含e.detail.formData和e.detail.formId; type='getUserInfo'时携带的数据为e.detail.hasUserInfo,e.detail.userInfo; type='openSetting'时携带的数据为e.detail.authSetting; 具体请看示例 |
注意事项
type = 'prompt'时，必须设置表单项属性formItems="{{items}}"；表单项属性
formItems格局如下：[{label: '请输出姓名', name: 'name', val: '初始值(可为空)'}, {label: '请输出邮箱', name: 'email'}, val: '']提交后表单数据将重置为初始值
type='share'页面生命周期需申明onShareAppMessage,并且在外部加上以下代码，因为自定义组件内不能应用转发回调 所以在这敞开模态框，不写这个 模态框点击转发按钮后将不会主动敞开；
if (res.from === 'button') { if (res.target.dataset.type === 'modalShare') { this.setData({ showModal: false }) } }type='getUserInfo'时，按需要来设定受权modal初始显隐状态。
倡议：我的项目中先wx.getSetting查看用户是否曾经受权，未受权showStatus初始设为true将被动弹出该弹框，若已受权showStatus初始设为false防止屡次弹出；
- 每个type携带的数据见上文代码示例或下载以下残缺示例。
示例Demo
微信小程序自定义组件应用示例整合