h5在微信中使用开放标签打开第三方的app_html实现h5 页面 wx-open-launch-app-CSDN博客

本文链接：https://blog.csdn.net/quhongqiang/article/details/108978416

大概代码，先去微信公众号注册了js安全域名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试跳转</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <h1>微信公众号和app必须在微信开放平台绑定</h1>
  <h2>去微信公众号配置js安全域名</h2>
  <div>
    我是一个按钮
    <wx-open-launch-app
      id="launch-btn"
      appid="微信开放平台的appid"
      extinfo=""
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">App内查看</button>
      </template>
    </wx-open-launch-app>
  </div>
</body>
<script src="./jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({url:`获取appid和签名的接口`,success:function(result){
      let data = result.body;
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: '获取的时间戳', // 必填，生成签名的时间戳
        nonceStr: '获取的随机串', // 必填，生成签名的随机串
        signature: '获取的签名',// 必填，签名
        jsApiList: [], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
      });
      wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
      });
      wx.error(function (res) {
      alert(JSON.stringify(res), "err333")
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
      });

    }});
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
      alert('success222');
    });
    btn.addEventListener('error', function (e) {
      alert('fail222', JSON.stringify(e.detail));
    });
  });
</script>
</html>