微信小程序--分享并设置分享链接的有效时间

有时候我们需要将某个页面分享给微信好友，并且设置这个分享链接的有效时间，可能大部分人会这样写：

在点击分享时获取系统时间, 在url后面传入当前系统时间的时间戳startTime和有效时间totalTime，比如这里传入60000ms也就是1分钟

//在点击分享时获取系统时间, 在url后面传入当前系统时间的时间戳startTime和有效时间totalTime，比如这里传入60000ms也就是1分钟
onShareAppMessage: function () {
    return {
      title: 'xxxxxx',
      imageUrl: "xxxxx.png",
      path: 'xxxx/xxx/xxx?startTime=' + new Date().getTime() + '&totalTime=60000'   
    }
  }

然后在xxxx/xxx/xxx.wxml文件中的onLoad方法中这样写：加载页面时获取当前系统时间的时间戳，然后和传过来的参数进行对比，如果差值大于设置的有效时间，那么说明链接已失效，否则链接没有失效。

onLoad:function(options){
    var time = new Date().getTime();
    if(time - options.startTime >= options.totalTime){
        console.log("链接已失效！");
    }else{
        console.log("链接没有失效!");
    }
}

这样看起来也没什么毛病，但是，有一个问题，注意我上文中一直说到的一个词语：系统时间，没错就是系统时间，用new Date()获取的时间是系统时间，也就是说用这个方式获取到的时间是你的手机时间，那么问题就来了，如果你的手机时间是8：00，你在这个时候给别人分享页面，设置有效时间是1个小时，也就是说到了9点这个链接就失效了，如果别人把手机时间一直设置在9点之前，那么对这个人来说，这条链接就是永远不会失效的。

 

那么，怎么解决这个问题呢？

既然系统时间可以改变，那么我们就不用系统时间，用服务器时间，服务器时间可不会改变，而且对所有人来说都是一样的。

怎么获取服务器时间呢？在小程序中没有获取服务器时间的API,我们可以通过调用接口获取服务器时间，wx.request中的回调函数会返回一个服务器时间：

这样我们只要在分享的时候调用某一个接口，然后获取服务器时间，把服务器时间作为参数传递过去，然后在要分享的页面里面的onload方法中也调用一个接口，这个接口接收一个参数，这个参数是分享时传递过来的服务器时间，调用这个接口后，这个接口返回调用接口时的服务器时间，然后把两个服务器时间进行比较就可以知道链接有没有失效。

方案一：在分享的时候获取服务器时间。

 

/**
   * 用户点击右上角分享（假设有效时长为1分钟）
   */
  onShareAppMessage: function () {
    var startTime = null;
    wx.request({
        url:url,//这里是自己写的后端接口
        success:res=>{
            
            startTime = res.data;  //res.data是调用这个接口后返回的服务器时间
            console.log(startTime);//这里会输出获取到的服务器时间 这里会后输出
        }
    })
    console.log(startTime);//这里会输出null,这是为什么呢？这里会先输出
    //下面是分享信息
    return {
      title: 'XXXX',
      path: 'pages/share/share?startTime=' + startTime + '&totalTime=60000' 
    }
  }

上面代码是错误示范，相信很多小伙伴第一次都会犯这个错误。

为什么后面的代码会比前面的代码先输出呢？原因是wx.request是异步操作的，通俗易懂的来说就是程序不会等你的接口调用完之后才执行之后的代码，所以当你执行后面的代码的时候，startTime还没有获取到值，这个时候你分享给别人的链接传过去的参数startTime就是null。

但是怎么解决这个问题呢？小编想到了一个可行的办法：那就是在点击分享之前就获取服务器时间，然后开启一个定时器计时，在分享的时候把刚开始获取到的时间加上定时器中走过的时间大概就是服务器时间，虽说会有一点小误差，但是是可行的。

方案二：

下面来看代码：

index.js

/**
* 页面加载
*/
onLoad:function(){
    var that = this;
    wx.request({
        url:url,
        success:res=>{
            that.startTime = res.data;  //获取服务器时间
            that.timer = setInterval(function(){
                //假设that.startTime获取到的时服务器时间的时间戳
                that.i++;   //计时
            },1000)//每隔1s计时一次  如果你想更精确点，可以把时间间隔调为更小比如500
        }
    })
}

/**
   * 用户点击右上角分享（假设有效时长为1分钟）
   */
  onShareAppMessage: function () {
    clearInterval(that.timer);//清除定时器
    that.startTime += that.i*1000;//获取点击分享时的时间，这个时间和真正的服务器时间可能会有一丢丢误差，但是误差不会很大。
    console.log("服务器时间为：",that.startTime);
    return {
      title: 'XXXX',
      path: 'pages/share/share?startTime=' + that.startTime + '&totalTime=60000' 
    }
  }

share.js:

/**
* 页面加载
*/
onLoad:function(options){
    wx.request({
        url:url,
        success:res=>{
            //假设返回的数据时服务器时间的时间戳
            if(res.data - options.startTime >= options.totalTime){
                console.log("链接已失效");
            }else{
                console.log("链接没有失效");
            }
        }
    })
}

好了，设置分享链接的有效时间就是这样了，希望能够帮助到大家，如果小伙伴们有更好的方法，希望不吝分享哦。