外链打开小程序

629 阅读1分钟

外链打开小程序

需要开通云资源,并开发openMini云函数。外链打开分两种:

  • 微信端浏览器H5跳转
    打开小程序实际上是利用了JSSDK开放标签wx-open-launch-weapp来实现的; 如果部署在云资源的静态网站上那么无需签名校验,但是部署在自己的服务器上就要做微信网页签名校验
  • 非微信端H5
    利用腾讯云的能力,模拟微信浏览器,跳转到微信app->小程序

代码实现:

<script src="https://acc.cloudbase.vip/res/web2weapp.js" charset="utf-8"></script>
<!-- <script src="./web2weapp.js" charset="utf-8"></script> -->
<!-- <script src="./jquery/jquery-3.6.0.min.js"></script> -->
<!-- <script src="./vconsole.min.js"></script> -->
<!-- <script>
  // init vConsole
  new VConsole();
</script> -->
<script>
  function getUrlParams() {
    if (!window.location.href.includes('code')) return {};
    var url = location.search; //获取url中"?"符后的字符串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
    }
    return theRequest;
  }

  // 从连接中获取code,获取不到进行授权
  let code = getUrlParams().code;
  console.log('code=> ', code)
  function callFn() {
     if (!code) {
       window.location.href =
         "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxcf48a6d0f8405135" +
         "&redirect_uri=" +
         encodeURIComponent(window.location.href) +
         "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
     } else {
    // 传递code并且跳转微信小程序
    beginJump(code)
     }
  }

  // 开始跳转微信
  function beginJump(code) {
    window.web2weapp.init({
      appId: '******', //替换为自己小程序的AppID
      gh_ID: '*****',//替换为自己小程序的原始ID
      env_ID: 'hetest-***',//替换小程序底下云开发环境ID
      SpaceID: 'tcb-*****-730f5a',// 上面的是原生的,这个是 uin平台的
      function: {
        name: 'openMini',//提供UrlScheme服务的云函数名称
        data: {} //向这个云函数中传入的自定义参数
      },
      path: `pages/index/index?code=${code}` //打开小程序时的路径
    })
  }
  window.onload = function () {
    callFn()
    document.addEventListener('WeixinOpenTagsError', function (e) {
      console.error(e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开发标签,JS-SDK其他功能不受影响
    });
  }
</script>

短信跳转视频教程