评论

H5动态传参给小程序及URL Schema query参数获取踩坑

H5动态传参给小程序及URL Schema query参数获取踩坑

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-link/urllink.generate.html

URL Schema query参数需要是字符串,不能进行encodeURIComponent编码,否则编码字段会被当成key处理,导致小程序无法解析出query。

H5访问路径:

https://x.y.z/pages/book-store?shareUid=6133175057a&shareId=9fe2d1ccd3409e43c09&shareChannel=officialAccount

1、H5页面条转代码

async function openWeapp(onBeforeJump) {
  const query = window.location.search.replace(/^\?/, "");  //获取query参数
  var c = window.c
  const res = await c.callFunction({
    name: 'public',
    data: {
      action: 'getUrlScheme',
      query:query,  //不能进行encodeURIComponent编码,不能传对象
    },
  })
  console.log("openWeapp", query);
  console.log("openWeapp", res);
  if (onBeforeJump) {
    onBeforeJump()
  }
  location.href = res.result.openlink
}


2、服务器获取URL Schema代码

async function getUrlScheme(query) {
  console.log("getUrlScheme", query)
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: '/pages/book-store/book-store', // <!-- replace -->
      query: query
    },
    // 如果想不过期则置为 false,并可以存到数据库
    isExpire: true,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60*60),
  })
}


3、小程序获取query参数代码

onShow(options: WechatMiniprogram.App.LaunchShowOption): void {
  console.log("onShow", options);
  Async(async ()=> {
    if (options.query.q && options.query.scancode_time) {
      let args = getURLParams(decodeURIComponent(options.query.q));
      args.forEach(((value, key) => {
        options.query[key] = value
      }));

      console.log("onShow parse q&scancode_time", options)
    }

    if (options.query.shareId) {
      await SetMeShareId(decodeURIComponent(options.query.shareId));
    }

    if ((options.query.shareUid && options.query.shareChannel)) {
      let request = new UploadShareInfoRequest();

      request.path = options.path;
      request.shareId = options.query.shareId;
      request.fromUid = options.query.shareUid;
      request.shareChannel = options.query.shareChannel;
      request.orderId = options.query.orderId??null;

      let [ret, err] =await awx.getGroupEnterInfo();
      if (err===null&&ret) {
        console.error("getGroupEnterInfo", err);
        request.encryptedData = ret.encryptedData;
        request.iv = ret.iv;
      }

      const err2 = await UploadShareInfo(request);
      if (err2) {
        console.error("UploadShareInfo err", err2);
      } else {
        console.log("UploadShareInfo ok");
      }
    }
  });
},


4、遗留问题

此处H5是跳转到固定小程序/page/book-store/book-store路径,如果H5条还要转到小程序其他页面,则考虑将page设置成动态传参数即可。

如:

将H5访问路径从

https://x.y.z/pages/book-store?shareUid=6133175057a&shareId=9fe2d1ccd3409e43c09&shareChannel=officialAccount

调整为:

https://x.y.z/pages/redirect?rediretcUrl=%2Fhome%2Fbook-store%2Fbook-store%3FshareUid%3D6133175057ab8440e798ac4b%26shareId%3D9fe2d1ccd3409e43c0965bf13791afdb%26shareChannel%3DofficialAccount

服务器生成URL Schema时,获取query中的重定向字段rediretcUrl,解析出要条转的小程序页面及参数,即可实现动态条转小程序页面及动动态。

最后一次编辑于  2021-09-07  
点赞 0
收藏
评论

1 个评论

  • 心之所向
    心之所向
    2023-03-09

    小程序嵌套 h5页面, 音频黑屏后想要继续播放如何实现? 目前是在h5打开就可以播放,嵌套小程序息屏就暂停了

    2023-03-09
    赞同
    回复
登录 后发表内容