H5移动端或者PC端

注：H5就算是电脑端，只要电脑有安装微信，也是可以拉起微信小程序的。
以我做微信立减金为例：

开发这种有个前提必要条件：得有非个人主体、已认证、已上线的小程序，也就是有商用的在线小程序才能实现。因为中间用微信开放的接口生成短链时要传小程序这两个参数appid：‘’, secret：‘’，否则无法生成url scheme token和scheme url。

本次使用的是原生小程序的Url Scheme方式，借助微信自带两个接口(生成scheme token和scheme url)，获得拉起微信小程序的短链，成功跳转到小程序去。暂时先写这么多，有空再完善此文章描述。具体核心功能如下：
以Vue2实现的，如需用Vue3其实都一样的，只是语法不同，大同小异。

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

微信提供的开放接口是这样的：https://api.weixin.qq.com/cgi-bin/token，GET请求方式，但是需要后端写一个接口，前端将三个参数传给他，然后他返回给你SchemeToken。否则前端直接调用会出现跨域问题，第5点的接口请求也是一样的道理。

    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、获取微信生成的短链，用于跳转到小程序

微信开放接口：https://api.weixin.qq.com/wxa/generatescheme ，POST请求方式，传微信生成的token和小程序的路径信息。
微信返回的链接格式基本是这样的： weixin://dl/business/?t=5QqcxfZbfB，它是随机生成的。
微信返回的短链直接访问就会跳转到小程序去，H5拉起小程序到此结束。

代码中的getwxUrkSchemeLink是我自己封装后引入的函数，你根据你的项目或者直接axios请求也可以。

    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",
          });
        }
      },
    });
  },

3、如何调试小程序参数

掘金这位博主写得不错，可以点进去看一下 开启微信小程序线上实时日志功能。