h5跳转微信小程序(实现多端兼容)

屿东

已于 2023-08-23 18:15:15 修改

阅读量344

点赞数

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

于 2023-08-23 16:41:23 首次发布

本文链接：https://blog.csdn.net/L2395183536/article/details/132455258

版权

h5跳转微信小程序(实现多端兼容)

h5在安卓和IOS跳转微信小程序，是通过后端接口返回的URL scheme进行跳转，但是遇到在微信打开网页想要跳转小程序的场景实现不了，微信浏览器不能通过URL scheme这种方式，所以需要判断环境切换跳转方式，在微信端使用微信提供的开放标签进行跳转wx-open-launch-weapp
微信开发文档-开放标签

什么是URL scheme？
URL scheme是App提供给外部的可以直接操作App的规则。
比如微信提供了打开扫一扫的URL scheme。weixin://dl/scan
比如支付宝提供了转账的URL scheme。alipayqr://platformapi/startapp?saId=20000116
比如知乎提供了打开回答页面的URL scheme。zhihu://answers/{id}
有很多应用都提供了URL scheme，方便在网页端打开自己的App，或者方便用户使用自己的App。其中URL scheme的前半部分：tomatodiary://可以用来打开App，detail/taskid 后半部分则定义了App会进行什么操作的规则。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>打开小程序报名</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"
    />
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        position: relative;
      }
      .box {
        position: absolute;
        top: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #403a7e;
        margin-top: 16px;
        margin-bottom: 72px;
        letter-spacing: 8px;
        font-style: italic;
      }
      .button {
        width: 326px;
        height: 48px;
        background: #58c7fc;
        border-radius: 45px 45px 45px 45px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <img src="./logo.png" alt="" />
        <div class="title">专注海外营销知识输出</div>
        <div id="mobile-web-container" class="button" onclick="openWeapp()">
          立即前往报名
        </div>
        <div id="wechat-web-container" class="hidden button">
          <!-- 所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有appid会优先使用appid，没有appid才会使用username） -->
          <wx-open-launch-weapp
            id="launch-btn"
            appid="公众号appid"
            username=""
            path="pages/offlineDetail/offlineDetail"
          >
            <script type="text/wxtag-template">
   			 <style>.text { line-height: 48px;color:#ffffff;font-size:16px; }</style>
    		 <div class="text">立即前往报名</div>
		    </script>
          </wx-open-launch-weapp>
        </div>
      </div>
    </div>
  </body>
  <script>
    window.onload = function () {
      // 获取ua判断是否在微信浏览器中打开
      var ua = navigator.userAgent.toLowerCase();
      console.log(ua);
      var isWeixin = ua.match(/micromessenger/i) == "micromessenger";
      console.log(isWeixin);
      if (isWeixin) {
        var wxContainerEl = document.getElementById("wechat-web-container");
        wxContainerEl.classList.remove("hidden");
        var mobileContainerEl = document.getElementById("mobile-web-container");
        mobileContainerEl.classList.add("hidden");

        var launchBtn = document.getElementById("launch-btn");
        launchBtn.addEventListener("ready", function (e) {
          console.log("开放标签 ready");
        });
        launchBtn.addEventListener("launch", function (e) {
          console.log("开放标签 success");
        });
        launchBtn.addEventListener("error", function (e) {
          console.log("开放标签 fail", e.detail);
        });
		
		let jsapi_ticket = sessionStorage.getItem("jsapi_ticket");
		let noncestr = "abcdefg";
		let timestamp = new Date().getTime
		let url = location.href.split("#")[0];
		let signature = genSign(jsapi_ticket, noncestr, timestamp, url); // 后端签名接口
		console.log(signature);
        wx.config({
          debug: true, // 调试时可开启
          appId: "小程序appId", // <!-- replace -->
          timestamp： timestamp , // 必填，填任意数字即可
          nonceStr: noncestr , // 必填，填任意非空字符串即可
          signature: signature, // 必填，填任意非空字符串即可
          jsApiList: ["chooseImage"], // 必填，随意一个接口即可
          openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名
        });
      }
    };

    function openWeapp() {
      let xhr = new XMLHttpRequest();
      xhr.open(
        "get",
        "https://xxx.com/xcx_scheme"
      );
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          let url = JSON.parse(xhr.responseText).url;
          console.log(url);
          window.location.href = url;
        }
      };
    }
  </script>
</html>

屿东

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5跳转微信小程序(实现多端兼容)

h5在安卓和IOS跳转微信小程序，是通过后端接口返回的URL scheme进行跳转，但是遇到在微信打开网页想要跳转小程序的场景实现不了，微信浏览器不能通过URL scheme这种方式，所以需要判断环境切换跳转方式，在微信端使用微信提供的开放标签进行跳转wx-open-launch-weapp微信开发文档-开放标签什么是URL scheme？URL scheme是App提供给外部的可以直接操作App的规则。比如微信提供了打开扫一扫的URL scheme。weixin://dl/scan比如支付宝提供了
复制链接

扫一扫