微信小程序奇技淫巧之自定义modal

微信小程序奇技淫巧之自定义 modal

今天写小程序的时候,写到自定义弹出框,突然想起两年前微信小程序内测的时候,用标签的方式写 modal 很方便。

看了一下两年前的代码,然后用现在的版本试了一下发现这个东西居然还能用,而且手机扫码预览也是有效的,

感觉算是个彩蛋了,想尝试一下的 coder 们可以亲自试一下,最新的小程序版本也是可以正常用的

但是小程序官方文档里已经没有这个东西了,具体写法如下

1
2
3
4
5
<modal title="" confirm-text="" no-cancel="true" hidden="{{modalHidden}}" bindconfirm="modalChange">
<button>标记未读</button>
<button>取消关注</button>
<button>删除该聊天</button>
</modal>

图片加载失败

说一下参数:

  • title 当然是标题,弹窗最上方
  • confirm-text 是最下面有个确认按钮,填写的是按钮文字,不填就没有这个按钮
  • no-cancel 是否不显示 cancel 取消按钮,true 为不显示
  • hidden 控制弹窗是否消失的值,true 为隐藏
  • bindconfirm 点击确认后发生的事情
  • 内容部分自己定义,可以像我写的 button 也可以是表单或者图片

说说自己的理解吧:

我觉得 modal 是小程序 16 年内测时候很灵活的标签,弹窗内容完全可以自定义,甚至按钮,header 都可以隐藏

相比之下新的wx.showModal可自定义的东西就没这么灵活了

发现原因:

首先是微信保留了原来的 modal 标签,只是把文档下了。

我用现在新 apiwx.showModal的形式看了一下,发现这个 modal 是在 page 之上的,也就是选不到它

感觉是小程序的一次集权,也可能是 modal 标签的形式会创建太多弹窗标签,而 showModal 这样一个公共弹窗可以做很多工作,只是替换内容就好了

想参考我两年前的小程序代码可以参考已经停止维护了https://github.com/liujians/WeApp

不要介意我当年写的很差,两年前我才刚刚参加工作半年之久,现在我也觉得当时很多东西都没封装,没做好。只能当做经验来让现在这个项目做的更好了

感谢阅读

如果内容对您有帮助,不妨请作者喝杯咖啡