<wx-open-launch-weapp>微信公众号跳转小程序注意事项

官网:

微信开放标签说明

如遇到跳转失败的情况,参考以下链接:

https://www.jianshu.com/p/939abec62307

补充注意事项:

1、sdk引入注意http还是https。(应该是跟当前网页协议相关)


2、vue路由为history模式时,ios手机上兼容问题(这个是和微信缓存机制相关)

原因:ios下微信会缓存第一次进入的页面地址,如果从微信一级页面跳转到二级页面,
由于vue是单页应用,不会刷新页面,vue路由地址变了,和微信缓存的地址不一致,
所以在进行wxConfig时传入的url和微信缓存的url不一致会导致jsdk调起失败,进而导致<wx-open-launch-weapp>无法生效


路由为history模式时,如果在不同的页面(多个页面)使用<wx-open-launch-weapp>,而没有调用wx.config()的界面在Android会跳转失败,ios不会。也是由于ios有缓存机制,但Android没有缓存机制,跳转页面后微信访问的当前页面url和调wx.config()签名用到的url对不上,就会失败。简单一点的解决办法就是在用<wx-open-launch-weapp>的页面再调一次wx.config()。


3、如果微信标签内部包裹的是img标签,src地址需要绝对地址,否则无法访问。
 

### 如何在HTML5页面中使用微信开放标签 `wx-open-launch-weapp` 启动小程序 #### 准备工作 为了使 HTML 页面能够通过 `<wx-open-launch-weapp>` 标签启动指定的小程序,开发者需先完成微信公众平台上的配置并获取到必要的参数。这包括但不限于 AppID 和其他安全验证所需的字段。 #### 配置说明 确保服务器端已正确设置 JS-SDK 的权限校验签名接口返回的数据包含有合法的 `timestamp`, `nonceStr`, `signature` 参数,并且 `jsApiList` 中含有 `"launchMiniProgram"` API 权限[^1]。 #### 使用方法 下面是一个简单的例子来展示如何利用该组件实现从 H5 跳转至特定版本的小程序: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Launch Mini Program</title> <!-- 微信JS-SDK引入 --> <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> </head> <body> <!-- 开放标签定义 --> <WX-OPEN-LAUNCH-WXAPP id="launchMiniProgram" appid="wxd930ea5d5a258f4f" path="/pages/index?query=1"> 打开小程序 </WX-OPEN-LAUNCH-WXAPP> <script type="text/javascript"> // 假设这里已经完成了 wx.config() 初始化操作... document.getElementById('launchMiniProgram').onclick = function () { // 当点击按钮时触发跳转行为 }; </script> </body> </html> ``` 请注意,在实际应用环境中应当替换上述代码中的 `appid` 及路径参数为真实有效的值;同时也要保证当前网页域名已被加入到对应公众号的安全白名单内以便顺利调用微信提供的能力。 #### 注意事项 - 组件名称结尾处应为 `-weapp` 而不是 `-app`。 - 如果希望传递额外数据给目标小程序,则可以通过 URL 查询字符串的形式附加于 `path` 属性之后。 - 对于某些特殊场景下的处理逻辑(比如用户未安装最新版客户端),建议参阅官方文档了解更多细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值