小程序URL Scheme规则调整支持方案

小程序URL Scheme规则修支持方案

小程序 URL Scheme URL Link 规则调整如下：

1.每个 URL Scheme 或 URL Link 有效期最长 30 天，均不再支持永久有效的链接、不再区分短期有效链接与长期有效链接；
2.链接生成后，若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的链接被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同链接打开该小程序；
3.单个小程序每天生成链接数（URL Scheme 和 URL Link 总数）上限为 50 万条。
(详见 小程序链接生成与使用规则调整公告)

简单来说即：
1.URL Scheme 和 URL Link 方式都是30天有效
2.一人一URL Scheme(URL Link),专属其他人访问无效。
3.每天生成的数量有上限50w

业务背景

1.我们使用的是URL Scheme 的方式
2.我们投放短信的链接是静态页面，且用户无需登录。也就意味着无法将用户的登录信息和URL Scheme 关联

思考

A: 那就用户每次访问都创建新的URL Scheme 即可
A：那如果活动访问量大的时候，可能会达到50w的上限
A:那有什么方式可以标示一下当前设备的id呢
A：既然没有登录态，那我们就在页面生成uuid，持久化到本地，每次使用取出存到cookie，请求后台接口的时候携带。

流程描述

前端

1.生成uuid
2.存到localStorage中
3.存到cookie中
4.请求的时候自动带上uuid字段
5.同一设备再次打开页面。从localStorage中获取uuid 存到cookie中。如无则从新走步骤1

后台

1.从请求头中获取uuid，
2.如果无该uuid的记录则，调微信生成URL Scheme ,将 uuid scehema 和过期时间存起来。
3.如有uuid 且URL Scheme 未过期则 直接返回uuid对应的URL Scheme

流程图如下

前端代码

设置cookie 请求后台接口获取URL Scheme

const getUrlScheme = ()=>{
  const sessionCookie = getCookie('uuid');
  let uuid = '';
  if (!sessionCookie) {
    uuid = localStorage.getItem('uuid');
    if (!uuid) {
      uuid = uuidV4(); // uuid
      localStorage.setItem('uuid', 'uuid');
    }
    const effectiveTimeLen = 20 * 24 * 60 * 60 * 1000; // cookie过期时间20天
    const expiresTime = new Date(Date.now() + effectiveTimeLen);
    const cookieDomain = window.location.hostname.split('.').slice(-2).join('.');
    document.cookie = `uuid=${uuid};expires=${expiresTime};path=/;domain=.${cookieDomain}`;
  }
  // 请求后台接口获取URL Scheme
}

附1 uuidV4函数

function uuidV4() {
  var t = Date.now();
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
  }) + '-' + t;
}

附2 获取cookie的函数

const getCookie = (name) => {
  const strCookie = document.cookie;
  const arrCookie = strCookie.split('; ');
  for (let i = 0; i < arrCookie.length; i++) {
    const arr = arrCookie[i].split('=');
    if (arr[0] === name) {
      return arr[1];
    }
  }
  return '';
};