欢迎光临,了解微信小程序开发,就上易用通!

晓想demo代码分析系列《一》util.js 文件

发布:2018-02-07 11:13浏览: 来源:网络 作者:cola

转换时间格式

因为此函数经常要被用到,所以在util.js这个文件中定义

该函数接受一个参数,该参数代表的是单位为秒的数字,函数将其转换为字符串格式的时间

例如:num = 20,那么函数返回的字符串为:'00:20'

var NumberToTime = function(num) {
  if(typeof num !== 'number') return 'NaN'
  var n = num%60;

  if(num < 10) {
    return '00:0' + num
  }
  else if(num < 60) {
    return '00:' + num
  }
  else if(num < 600){
    if(n < 10)
      return '0' + Math.floor(num/60) + ':' + '0' + n;
    else
      return '0' + Math.floor(num/60) + ':' + n
  }
  else {
    if(n < 10)
      return Math.floor(num/60) + ':' + '0' + n;
    else
      return Math.floor(num/60) + ':' + n
  }
}

获取token和个人信息

这里还是先讲一下和我们服务器的约定吧。

为了获取token和userInfo,我们需要给服务器提供以下四个参数,code,newteo,iv,encrypteData 。那么这四个信息哪里来呢?调用wx.login()来获取code,调用wx.getUserInfo获取iv和encrypteData,至于newteo是我们自己约定的,也就是已知的。

我们先定义一个getInfo函数。getInfo 函数会先试着从 localStorage 中获取info,该info 包含 token和userInfo 信息。

  • 如果获取成功,说明 localStorage 中已经有 info,直接从 localStorage 获取。

  • 如果获取失败,则调用 fetchInfo 从服务器中获取。

var getInfo = function(callback) {
  wx.getStorage({
    key: 'info',
    success: function(res) {
      typeof callback === "function" && callback(res.data)
    },
    fail: function() {
      fetchInfo(callback)
    }
  })
}

在看fetInfo之前,我们先看一下 fetchCode 这个函数。该函数很简单,调用wx.login获取 code

这里提一句,就是我们经常要获取什么信息的时候,都会选择使用return,那这里为什么不用return,而要用这种callback的方式呢?嗯,因为这是一个异步的过程,通俗一点讲,就是我们必须在获取到这个code之后(重点是之后),才拿这个code做一些事情。这时候,回调函数就很有用了。比如fetchCode这个函数,只有在成功获取code之后,才会调用这个callback函数,而且给这个callback函数一个参数,也就是我们需要的code。

var fetchCode = function(callback) {
  wx.login({
    success: function(res){
      typeof callback === "function" && callback(res.code)
    },
    fail: function() {
      wx.showModal({
        title: '错误',
        content: '服务器获取code时发生错误',
      })
    }
  }) 
}

这里来到了fetchInfo这个函数,可以看到整个函数的运行流程,一开始就调用fetchCode,而且大部分的代码都在这个回调函数之中,这样就保证了我们这部分代码一定是在获取Code成功之后才运行的。

当服务器返回之后,我们立即传给fetchInfo的callback函数作为参数返回,并且设置localStorage。

var fetchInfo = function(callback) {
  fetchCode(function(code) {
    wx.getUserInfo({
      success: function(res){
        wx.request({
          url: 'https://tinyapp.sparklog.com/session',
          data: {
            code: code,
            newteo: '3a15f915b70de44dddf1819dc5ce311e10d68569',             
            iv: res.iv,
            encryptedData: res.encryptedData
          },
          method: 'GET',
          success: function(res){
            typeof callback == "function" && callback(res.data)
            wx.setStorageSync('info', JSON.stringify(res.data))
          },
          fail: function() {
            console.error('wx.request 在 fethchInfo 中发生错误')
          }
        })
      },
      fail: function() {
        console.error('wx.getUserInfo 在 fethchInfo 中发生错误')
      }
    })
  })
}

最后,我们再来看看index.js是如何调用这个getInfo函数的。

var util = require('../../utils/util.js')

Page({
  data: {
    token: ''
  },
  onLoad: function() {
    var _this = this
    util.getInfo(function(info) {
      //下面这句代码是为了兼容 真机和 模拟环境
      typeof info === 'object' ? '' : info = JSON.parse(info)
      _this.setData({token: info.token});  
      _this.getData();
    })
  }
})

OK. util.js就是这些!





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。