h5跳转到小程序

最新推荐文章于 2024-10-14 20:46:56 发布

我爱画页面

最新推荐文章于 2024-10-14 20:46:56 发布

阅读量827

点赞数

本文链接：https://blog.csdn.net/qdm13209211861/article/details/115213904

版权

准备工作：
1、需要小程序和公众号相互绑定；
2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，也就是最后h5访问链接的域名需要配置在公众号里面。

一、微信内部跳转：点击微信开放按钮wx-open-launch-weapp进行跳转

参考微信文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3

具体代码如下：

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>h5跳转到小程序</title>
</head>

<body>
  <!-- username是小程序的原始id（查看路径：设置-》基本设置-》账号信息-》原始ID）, path是要跳转到小程序的页面-->
  <wx-open-launch-weapp id="launch-btn" username="gh_8e8b1720ea9f" path="pages/login/login">
    <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 src="./axios.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  function shareFirend() {
    let url = window.location.href.replace(/#.+/, '');
    url = encodeURIComponent(url)
    axios.get('/pos-coupon/weChat/jssdk/getSignature', {
      params: {
        url: url
      }
    }).then(res => {
      if (res.data.success) {
        let result = res.data.result || {};
        let appId = result.appId;
        let timestamp = result.timestamp;
        let nonceStr = result.nonceStr;
        let signature = result.signature;
        let apiList = [
          'onMenuShareAppMessage',
          'onMenuShareTimeline'
        ]
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名
          jsApiList: apiList, // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] //必填 h5跳转到小程序
        });
      } else {
        console.error(res.data.message)
      }
    })
  }
  shareFirend()
  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>

二、微信外部跳转：通过URL Scheme打开小程序

参考微信文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

通过服务端接口或在小程序管理后台「工具」-「生成URL Scheme」入口可以获取打开小程序任意页面的URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。
（生成的URL Scheme示例：weixin://dl/business/?t=XCGtcSXWM6e）
在这里插入图片描述
注意：获取到小程序URL scheme码后，需要判断是iOS系统还是Android系统，iOS可直接跳转URL Scheme；Android要先跳转到h5，再由h5跳转URL Scheme。

此方法是通过h5进行再次跳转，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页跳转小程序</title>
  <script>
    window.location.href = "weixin://dl/business/?t=XCGtcSXWM6e"
  </script>
</head>
<body>
  这个只适用于微信外部跳转到小程序
</body>
</html>