H5如何拉起微信小程序，并携带参数过去

1、判断是否在微信环境中

    isWeixinOpen() {
      const ua = navigator.userAgent.toLowerCase();
      return ua.indexOf("micromessenger") !== -1;
    },

2、判断用户机型

     
    getMobileOperatingSystem() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      if (/android/i.test(userAgent)) {
        return "Android";
      }
      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
      }
      return "unknown";
    },

3、校验用户终端环境后，根据条件放行跳转到小程序

    async toMiniAppLiJianJin() {
      // 不是在微信中打开，也就是普通浏览器才能唤起微信小程序
      if (!this.isWeixinOpen()) {
        const os = this.getMobileOperatingSystem();
        if (os === "iOS" || os === "Android") {
          // 跳转到小程序
          this.getUrlSkemeToken();
        } else {
          Toast.fail("请在移动设备上打开此页面");
          return;
        }
      }
    },

4、获取微信生成Url Scheme的token

    async getUrlSkemeToken() {
      let params = {
        grant_type: "client_credential",
        appid: "", 
        secret: "",
      };
      const data = await getwxUrkSchemeToken(params);
      // console.log(data, "getUrlSkemeToken");
      if (data.code == 200) {
        this.getUrlSkemeShortLink(data.data);
        // console.log(data, "getUrlSkemeToken");
      } else {
        Toast.fail(data.msg);
      }
    },

5、获取微信生成的短链，用于跳转到小程序

    async getUrlSkemeShortLink(access_token) {
      // id:子商品id     productCode:商品编号  token：免登token
      const { id, productId, productCode } = this.order_wxData;
 
      let params = {
        jump_wxa: {
          path: "/pages/cmbc_onekeyget/cmbc_onekeyget", // 小程序页面路径
          query: `id=${id}&productCode=${productCode}&token=${ms_token}`, // url携带参数信息
        },
        access_token,
      };
       
      const data = await getwxUrkSchemeLink(params);
      if (data.code == 200) {
        // 跳转到小程序
        window.location.href = data.data;
        // console.log(data, "data.data");
      } else {
        Toast.fail(data.msg);
      }
    },

小程序

1、获取H5参数

通过小程序自带的onLoad生命周期钩子获取到H5传来的参数，小程序初始变量后取出并复制，用于你的业务逻辑使用。下面参数是举例，具体看你的项目需要传哪些。

 data: {
    queryParams: {
      id: "", // 子商品id
      productCode: "", // 商品编号
      token: "", // 免登token
      }
 }
 
 onLoad(options){
    const { id, productCode, token } = options;
    this.setData({
      "queryParams.id": id, 
      "queryParams.productCode": productCode, 
       "queryParams.token": token
    });
}

2、获取用户登录信息

假设你做的是H5跳转到小程序去领取微信立减金，那么这样获取。

  // 登录获取授权码
  getWXAuthorization: function () {
    wx.login({
      success: (res) => {
        if (res.code) {
          console.log(res,'登录信息', res.code,'微信授权码');
        } else {
          wx.showToast({
            title: "登录失败！",
            icon: "none",
          });
        }
      },
    });
  },