html 使用 wx-open-launch-weapp 跳转小程序

最新推荐文章于 2024-06-30 00:09:04 发布

陈龙龙的陈龙龙

最新推荐文章于 2024-06-30 00:09:04 发布

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签： html 小程序前端

本文链接：https://blog.csdn.net/weixin_72228920/article/details/132636346

版权

微信小程序专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1、引入 js 文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、通过config接口注入权限验证配置并申请所需开放标签

$.ajax({
  method:"GET",
  url: "请求后端地址",
  data: {
    // 请求参数
  },
  success: function (res) {
    //  根据返回的参数进行赋值
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appId, // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: [], // 必填，需要使用的JS接口列表
      openTagList: data.data.openTagList,
    });
  },
});

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

// 通过error接口处理失败验证
wx.error(function (res) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

3、在 html 页面中渲染 wx-open-launch-weapp 标签

代码如下（示例）：

<wx-open-launch-weapp
  id="launch-btn"
  appid="小程序appID"
  username="小程序原始ID"
  path="跳转的小程序路径"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

注意：内容和样式都要写在 wx-open-launch-weapp 标签里面，否则不生效，样式还可以写成行内样式

4、完整案例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title></title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        .big-container {
            width:100vw;
            height:100vh;
            background-size: 100% 100%;
            backdrop-filter: blur(50px);
        }
        /* 这些样式写在标签内了 */
        /*.img-container {
            width:72vw;
            position: absolute;
            top: 50%;left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9;
        }
        .big-img {
            position: absolute;
            top: 0;
            left: 0;
            width:100vw;
            height: 100vh;
            filter: blur(5px);
        }
        #bg {
            width: 100%;height:auto;
            border-radius: 20px;
        }
        .btn-container {
            padding:20px 10px;
        }
        .btn {
            width:100%; 
            height:50px;
            font-size:20px;
            color:#fff;
            border-radius:50px;
            background-color: #58be6d;
            border:none;animation: btn 1.5s forwards infinite;
            box-shadow: 0 25px 45px rgba(0,0,0,0.1);
        }*/
        @keyframes btn {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
</head>
<body style="margin: 0 0;background-color: #F0F0F0;">
    <div class="big-container" id="internal"> </div>
<script>
    var mini_appid = null;
    var original_id = null;
    var path = null;
    ...
    // 获取html地址栏参数的函数
    function GetQueryString(name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]);
       return null;
     }

     mini_appid = GetQueryString("mini_appid");
     original_id = GetQueryString("original_id");
     path = GetQueryString("path");
    
    //跳转小程序或公众号
    var btn = '<div class="btn-container" style="padding:20px 10px;"><button class="btn" style="width:100%; height:50px;font-size:20px;color:#fff;border-radius:50px;background-color: #58be6d;border:none;animation: btn 1.5s forwards infinite;box-shadow: 0 25px 45px rgba(0,0,0,0.1);">跳转小程序</button></div>';
    // 也就是把 步骤3 中的代码进行样式和内容的更改，动态渲染
    // 这里有个小坑，如果说内容不显示，就给 wx-open-launch-weapp 标签设置width和height，设置不生效要加 position: absolute;
    document.getElementById("internal").innerHTML ='<wx-open-launch-weapp style="z-index: 999;position: absolute;width:100vw; height:100vh;" id="launch-btn" appid="' + mini_appid +'" username="' + original_id +'" path="' + path +'"><template>'+ btn +'</template></wx-open-launch-weapp>';

    $.ajax({
      method:"GET",
      url: "请求后端地址",
      data: {
        // 请求参数
      },
      success: function (res) {
        //  根据返回的参数进行赋值
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: [], // 必填，需要使用的JS接口列表
          openTagList: data.data.openTagList,
        });
      },
    });

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

    // 通过error接口处理失败验证
    wx.error(function (res) {
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    });
</script>
</body>
</html>