微信开放标签 wx-open-launch-weapp 踩坑日记

最新推荐文章于 2025-04-06 08:05:53 发布

ctbinzi

最新推荐文章于 2025-04-06 08:05:53 发布

阅读量1.4k

点赞数

文章标签：小程序微信开放标签

本文链接：https://blog.csdn.net/ctbinzi/article/details/115373059

版权

微信开发专栏收录该内容

2 篇文章

订阅专栏

先贴上H5源码

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
  <title>h5跳转到小程序</title>
</head>

<body>
  <wx-open-launch-weapp id="launch-btn" username="gh_08d750c38c45" path="pages/test/test?code=B001489"> <!--注意点1：username 需要填微信小程序的原始ID，肯定是gh_开头的-->
      <template>
      <style>
          .btn {
          width: 200px;
          height: 200px;
          font-size: 32px;
          background-color: yellowgreen;
          }
      </style>
      <button class="btn">打开小程序</button>
      </template>
  </wx-open-launch-weapp>
</body>

</html>
<script>
  var serverUrl = 'http://192.168.1.35:800/'; // 注意点2：wx.config用的参数应该放在服务端进行构建，这里是服务端接口地址-->
  var vConsole = new VConsole();
  shareFirend();
  function shareFirend() {
    let url = window.location.href.split('#')[0];
    axios.post(serverUrl + 'wei_xin_pub/buid_h5_config', {url})
    .then(response =>{
        var resData = response.data.data;
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: resData.appId, // 必填，公众号的唯一标识
            timestamp: resData.timestamp, // 必填，生成签名的时间戳
            nonceStr: resData.nonceStr, // 必填，生成签名的随机串
            signature: resData.signature,// 必填，签名
            jsApiList: ['checkJsApi'], // 必填，需要使用的JS接口列表，随意填一个，至少要填一个
            openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
    })
    .catch(error => {
        console.log('获取配置失败，请稍后尝试。', {error});
    });

  }
  
 

// 通过ready接口处理成功验证
wx.ready(function () {
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    // alert("接口配置成功");

  var btn = document.getElementById('launch-btn');
  btn.style.display = "block";
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
});

wx.error(function (res) {
    alert(JSON.stringify(res));
});
</script>

其中要注意的是，wx.config方法使用到的参数应该放在服务器端进行构建，特别是signature参数需要使用到accesstoken去获取ticket才能算出来

在小程序端启动获取启动参数时要注意，获取参数的方式与扫码不一样，启动项id是1167，在wx-open-launch-weapp标签的path属性里面填的url参数会直接存在options.query里面