小程序如何设置模态框

作者:朋克周 | 创建时间: 2023-04-17
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 在与用户进行交互时,免不了使用一些交流模式,接下来先介绍小程序的开发流程,最后介绍模态框的使用。...
小程序如何设置模态框

操作方法

开发前准备-绑定开发者 登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者。 个人主体小程序最多可绑定5个开发者,10个体验者。 未认证的组织类型小程序最多可绑定10个开发者,20个体验者 已认证的小程序最多可绑定20个开发者,40个体验者。

阅读开发文档并下载开发者工具 点击页面右上角文档-开发,详细阅读开发者文档并进入下载页面,下载开发者工具。

下载并安装开发者工具 登录 开发者工具使用管理员或者绑定的开发者微信号扫码登录。

创建项目 小程序的管理员或已绑定的开发者可以创建项目。需要填写AppID、项目名称及本地开发目录。

开发 管理员和开发者可在开发者工具内完成小程序的开发、调试、预览、上传代码等操作。

这里对微信小程序中 modal组件是对模态框的支持。 这里记录下modal的知识要点。开发微信小程序的小伙伴可以用到。 modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性。 复制下方的代码到小程序代码中: .wxml ----------------------code start <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"> 这是对话框的内容。 </modal> ----------------------code end .js ----------------------code start Page({ data:{ hidden:false, nocancel:false }, cancel: function(){ this.setData({ hidden: true }); }, confirm: function(){ this.setData({ nocancel: !this.data.nocancel }); console.log("clicked confirm"); } }) ----------------------code end

点击展开全文

更多推荐