微信h5跳转小程序

微信h5跳转小程序

要求:

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。

微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

具体实施:

       参考链接 微信官方文档 公众号

一 绑定域名

      先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(h5网页的域名)

二 引入JS文件

     在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

     如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

     备注：支持使用 AMD/CMD 标准模块加载方法加载

三 通过config接口注入权限验证配置

  这是微信给出的

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

这里是我的项目实际实现

setWxConfig() {//方法名
      let that = this;
      let url = window.location.href; // 注意这里，我的项目中路由模式用的是history模式
      let postData = {
        url: url,
      };
      that.$post(that.$getSignPackage, postData).then((res) => {
        //这里请求获取wx.config配置
        if (res.status_code === 0) {
          let data = res.data.signPackage;
          wx.config({
            debug: false, // 开启调试模式,
            appId: "公众号id", // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
              "checkJsApi",
              "openLocation",
              "getLocation",
              "closeWindow",
              "scanQRCode",
              "chooseWXPay",
              "chooseImage",
              "uploadImage",
              "previewImage",
              "getLocalImgData",
            ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            openTagList: ["wx-open-launch-weapp"], // 这里要配置一下
          });
          wx.error(function (res) {
            // ios环境下第一次获取授权失败,重新加载页面
            window.location.reload();
          });
        } else {
          this.$toast({
            message: res.message,
            position: "top",
            duration: 1500,
          });
        }
      });
    },

 注意:在ios设备上首次获取微信授权失败,微信开发者工具上模拟不出来,只有真机的时候才会暴露出来问题,安卓设备不会有这样的问题

四 页面配置

<wx-open-launch-weapp
      id="launch-btn"
      username="小程序原始id"
      path="pages/index/index.html"
    >
      <script type="text/wxtag-template">
        <div>
          <style>
              .btn { width: 335px;height: 50px;border: 1px solid #bfbfbf;border-radius: 3px; font-size: 17px;font-family: PingFang, PingFang-SC;color: #1c1c1c;background-color: #ffffff;}
          </style>
          <button class="btn">去小程序中查看</button>
        </div>
      </script>
    </wx-open-launch-weapp>