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

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

在点击分享时获取系统时间, 在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("连接没有失效");
            }
        }
    })
}

好了，设置分享连接的有效时间就是这样了，但愿可以帮助到你们，若是小伙伴们有更好的方法，但愿不吝分享哦。