微信小程序--web-view--h5返回微信小程序

微信小程序 web-view h5 返回微信小程序

一顿吃三个小盆友

1118人浏览 · 2023-08-04 11:22:55

一顿吃三个小盆友 · 2023-08-04 11:22:55 发布

1.配置微信小程序-web-view，记得配置业务域名微信公众平台配置业务域名上线需要

1.1 建议微信小程序里单独用一个页面打开 <web-view></web-view> 标签

2. h5 页面--示例

2.1 引入微信JSSDK 微信官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html#%E7%9B%B8%E5%85%B3%E6%8E%A5%E5%8F%A3%201

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>返回微信小程序</title>
  </head>
  <body>
    <div
      align="center"
      οnclick="btnAction"
      class="tiaozhuan"
      id="btn"
      style="font-size: 50px"
    >
      正在跳转到小程序...
    </div>
    <script
      type="text/javascript"
      src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
    ></script>
    <script>
      function getUrlParams(url) {
        // \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
        let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/gi;
        let result = {};
        url.replace(pattern, ($, $1, $2) => {
          result[$1] = $2;
        });
        return result;
      }
      function btnAction() {
        var url = location.href; //获取文档的完整url
        var Jump = getUrlParams(url);
        if (Jump.type == "1") {
          wx.miniProgram.switchTab({ url: "/pages/home1/home1" });
        } else {
          wx.miniProgram.switchTab({ url: "/pages/home5/home5" });
        }
      }
      setTimeout(() => {
        btnAction();
      }, 2000);
    </script>

    <style>
      .tiaozhuan {
        font-size: 30px;
      }
    </style>
  </body>
</html>