wx-open-launch-weapp 在 vue 中的使用踩坑
关于 wx-open-launch-weapp 的使用,可以先阅读官方使用文档,
下面是我总结的步骤
详细代码啥的的看掘金,因为直接发原文,好像有敏感词汇,偷懒了我…
0、判断浏览器
摘要:打开微信小程序的开发标签,只适用于微信版本7.0.12及以上的微信手机浏览器。
Q: 只有微信手机浏览器才支持打开mp吗?
A: 是的,wx-open-launch-weapp
这个标签应该只有微信浏览器内部定义了。且唤起微信小程序也需要微信的原生支持。
Q:打开小程序有使用条件(微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上),是否需要做判断?
A:做一下把,毕竟现在(2020/07/28)微信的最新版本才7.0.14,至于系统的版本感觉不用判断了。
1、引入JS
2、注入配置信息
这里需要注意:
- jsApiList,这项的值不能是 [],会导致按钮不显示,(2020/07/28 有这个问题)。
3、页面中添加按钮
这里需要注意(良心精华)
- path 需要添加 .html 后缀,且 path 可以是动态的。
- 插槽必须写,且内容必须有大小(比如上面的 div.ctn )。vue 中插槽需要用 script 替换。
- 插槽内不能使用组件,所以可以将需要显示的内容绝对定位(如上面的 div.btn-wechat-mp–show )。
4、调试
因为微信注入配置信息本地无法测试,所以要测试该标签需要在发布到测试环境才可以看到按钮。