H5网页跳转微信小程序踩坑

公众号H5页面跳转小程序（微信开放标签wx-open-launch-weapp）

问题：苹果手机可以显示图片跳转按钮，但是安卓手机无法显示出来。、问题：苹果手机可以显示图片跳转按钮，但是安卓手机无法显示出来。、

原因：
看看图片链接是 // 还是 http 开头，如果是 //test.com/upload/60/2b605429ddcc756370be777761c98d.png 这种形式的图片链接，会导致安卓手机在 <script type="text/wxtag-template"> 标签里的图片无法显示出来。

解决：
图片链接加上前缀 http: 或者 https:，变成 https://test.com/upload/60/2b605429ddcc756370be777761c98d.png。

问题：无法显示跳转小程序按钮

  1. wx.config 参数是否正确，比如 appId 和 signature。容易遇到问题是 signature 签名的算法的计算。

根据官方文档：

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。

生成签名用到的 url 参数 必须是 当前网页的 URL，不包含 # 及其后面部分。如果当前打开的 H5 页面包含有 # 字符，请按要求进行舍弃然后计算签名。PHP 代码示例：

// $_REQUEST['url'] 就是页面 JS 获取到的 location.href
$url_raw = $_REQUEST['url'];
$url_arr = explode('#', $url_raw);
$url = reset($url_arr);
  1. 务必仔细检查 <wx-open-launch-weapp> 里填写的 username 或者 path 属性是否按照官方文档填写正确。

结合 uniapp 使用

参考文章：https://www.i4k.xyz/article/RosaChampagne/119571606

  1. <script type="text/wxtag-template"> 标签里使用变量 不能 使用 vue 的写法，如：
<image :src="isVip ? ad_mini : ad" class="btnMore22" width="90%"></image>

而是要用小程序原生的写法，使用 {{ }} 将变量包围起来：

<image src="{{ isVip ? ad_mini : ad }}" class="btnMore22" width="90%"></image>
  1. Vue 增加忽略自定义元素：
Vue.config.ignoredElements = ['wx-open-launch-weapp'];

其它要注意的问题

引用官方文档：

  • 开放对象：已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
  • 对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

来自第三方参考链接：https://developers.weixin.qq.com/community/develop/article/doc/000c00b4490678f528baf2cf756413
https://www.shuzhiduo.com/A/A7zgQvkP54/
https://juejin.cn/post/6844904193635909645

  • 如果你跳转之后显示页面不存在，请检查下 path 的路径结尾是否写上了 .html；
  • wx.config 在初始化授权写上开放标签 openTagList: ['wx-open-launch-weapp']；
  • wx.config中 jsApiList 里的属性不能为空，否则会提示 config:param is empty，
wx.config({
  // ...
  jsApiList: ['onMenuShareAppMessage'], // 因为不能为空，所以我随便写了一个微信的方法
  openTagList: ['wx-open-launch-weapp'],
});
  • 如果要测试 wx.config 参数是否配置成功，将 debug: true 属性加上，如果用微信开发者工具或者微信客户端访问网页弹出对话框提示 {errMsg: "config:ok”}，说明已经接入成功；
  • 如果你觉得里面写样式不好写，可以在里面样式style写opacity:0;，这样的话开放标签只是用来填充，大小自己控制就行；
  • 经过测试发现标签内定义的样式真的很尴尬，且不受控制，所以我们直接将标签用 CSS 绝对定位并设透明度为 opacity: 0, 盖在了我们原本的设计图上；
  • 透明度为 opacity: 0 的标签 <script type="text/wxtag-template"> 不能为空，否则宽高会被解析为 0，也就是按钮根本点击不到；
  • 在 VUE 的 mounted 生命周期回调函数内侦听开放标签的回调事件：
mounted(){
    var btn = document.getElementById(this.id)
    btn.addEventListener('launch', e => {
        // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
        console.log('success');
    });
    btn.addEventListener('error', e => {
        // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
        console.log('fail', e.detail);
        // 唤醒失败的情况下，可用于降级处理比如在此处跳转到应用宝
    });
}
  • 如果微信版本低于7.0.12 开放标签是无法使用的，所以最好在开放标签外套一层 DIV 用于点击事件，在事件中断段微信版本号如果低于，则降级到应用宝之类的方案（参考例子：https://www.shuzhiduo.com/A/A7zgQvkP54/)

posted on 2023-11-13 16:15  大西瓜3721  阅读(251)  评论(0)  编辑  收藏  举报

导航