h5跳转到小程序

准备工作:
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>
### H5 页面跳转至微信小程序的实现方法 #### 使用 `wx-open-launch-weapp` 接口 对于在微信浏览器环境中实现H5页面向微信小程序跳转,推荐采用微信官方提供的接口——`<wx-open-launch-weapp>`标签[^1]。此组件允许开发者指定目标小程序的相关参数,并触发从小程序返回H5页面的功能。 ```html <!-- HTML 示例 --> <wx-open-launch-weapp id="launch-btn" appid="your-app-id" path="/page/index"> <button>前往小程序</button> </wx-open-launch-weapp> <script type="text/javascript"> document.getElementById('launch-btn').addEventListener('canceltap', function () { console.log('用户取消进入小程序'); }); document.getElementById('launch-btn').addEventListener('launchfail', function (e) { console.error(`跳转失败:${JSON.stringify(e.detail.errMsg)}`); }); </script> ``` #### 利用 URL Scheme 方式 另一种常见的做法是利用URL Scheme来进行跳转。这种方式适用于更广泛的场景,尤其是在非微信内置浏览器环境下。具体而言,在构建链接时需指明必要的字段如APPID、PATH等,这些构成了调起特定微信小程序所需的全部信息[^2][^3]。 ```javascript // JavaScript 动态生成 URL Scheme 的例子 function createWeAppUrl(appId, pagePath, query = '') { const baseUrl = 'weixin://dl/business/'; let urlParams = `?appid=${appId}&path=${encodeURIComponent(pagePath)}`; if(query){ urlParams += `&query=${encodeURIComponent(query)}`; } return `${baseUrl}${urlParams}`; } const weAppLink = createWeAppUrl('wxd930ea5d5a242fa0', '/pages/index/index', 'key=value'); window.location.href = weAppLink; ``` #### 处理静态HTML页面的情况 当涉及到静态HTML页面时,除了上述两种主流方案之外,还可以考虑借助腾讯云提供的云开发功能来简化流程。通过设置合适的权限并上传对应的资源文件,可以使整个过程变得更加简便高效[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值