wx-open-launch-weapp 在 vue 中的使用踩坑
发布于 4 年前 作者 jiezou 5189 次浏览 来自 分享

关于 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、调试

因为微信注入配置信息本地无法测试,所以要测试该标签需要在发布到测试环境才可以看到按钮。

回到顶部