微信小程序登录

前段时间发布了一个微信小程序的简单登录，那段时间我一直在忙着项目，有一天，我清闲下来准备进入小程序群里面看一下来着，刚好有人问问题了，我一看这哥们的问题好像是我写的东西啊，我感觉是时候秀一波了，是时候展现我真正的技术了。我当时正在酝酿如何无形装逼时。这时候出现了一个打脸的。他说这种登录方式不可以使用了，当时我就有点不信了，结果自己测试了真的不可以使用了，没办法，只能更新一版新的了，说实话，那脸打的比较响亮啊快哭了，于是乎就有了今天就帮大家更新了一版。好了，闲话扯到这里结束了。

原来的简单登录是直接在前台获取openid，但是呢微信官方发现这个洞以后就给填了，不让你们玩了，你们在这么玩下去生态圈就没办法维持了，官方直接在安全域名处禁止添加https://api.weixin.qq.com，但是呢以前添加的用户还是可以用的。

如上图显示。

好了废话不多少，直接撸代码，同时在这里整理了一些项目中开发中遇到的一些经验分享给大家。

 [plain]  view plain copy 
//app.js  
// 这里是调用公共函数库  
var util = require('./utils/util.js')  
App({  
  
    /**  
    * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）  
    */  
    onLaunch: function (options) {  
  
        // 调用API从本地缓存中获取数据  
        var that = this  
        var logs = wx.getStorageSync('logs') || []  
        logs.unshift(Date.now())  
        wx.setStorageSync('logs', logs)  
  
    },  
  
    /**  
    * 当小程序启动，或从后台进入前台显示，会触发 onShow  
    */  
    onShow: function (options) {  
          
        var that = this,  
        // scenes是场景值它的类型是整形  
        scenes = options.scene,  
        // sid是参数,建议兼容ios和android的时候强转换为整形  
        sid = Number(options.query.sid)  
  
        // 获取用户信息  
        that.getUserInfo(function (userInfo) {  
            // 判断场景是否是从公众号进入（这里的意思是如果用户从公众号的自定义菜单进入的话且参数sid为1的话触发什么方法）  
            // 获取场景值在onLaunch方法中也可以获取到，但是呢由于业务要求我们的这个方法需要用户进入就会触发  
            // 各位可以根据需求去决定在哪里获取合适一些,onLaunch是小程序未关闭的情况下只执行一次,所以各位一定要考虑清楚  
            if (scenes === 1035 && sid === 1) {  
                // 这里是从什么场景下要执行的方法  
            }  
        })  
    },  
  
    /**  
    * 获取用户信息  
    */  
    getUserInfo: function (cb) {  
        var that = this  
      
        if (this.globalData.userInfo) {  
              
            typeof cb == "function" && cb(this.globalData.userInfo)  
          
        } else {  
              
            // 调用登录接口  
            wx.login({  
                success: function (res) {  
                      
                    // 登录成功  
                    // 在这里登录的时候会返回一个登录凭证，以前是发送一次请求换一个，现在好像是登录凭证有5分钟的有效时间  
                    // 从这种情况来看微信小程序的发展还是不错的，以前估计没多少人访问，现在访问量上去后后台的布局都重新架构了  
                    var code = res.code// 登录凭证  
                      
                    // 获取用户信息  
                    wx.getUserInfo({  
                        // 当你获取用户信息的时候会弹出一个弹框是否允许授权  
                          
                        // 这里点击允许触发的方法  
                        success: function (res2) {  
                          
                            that.globalData.userInfo = res2.userInfo  
  
                            // 准备数据（下面的这些参数都是必须参数，请不要问为什么，看文档去吧）  
                            var data = { encryptedData: res2.encryptedData, iv: res2.iv, code: code }  
                              
                            // 请求自己的服务器(在这里我结合promise封装了一下request请求，下面会把方法给大家分享一下)  
                            util.commonAjax('方法名', 1, data)  
                            .then(function (resolve) {  
                                // 这里自然不用解释了，这是接口返回的参数  
                                if (resolve.data.status === '200') {  
                                    // 成功  
                                    wx.setStorageSync('userInfo',  resolve.data.data)  
                                    // 新手们注意一下，记得把下面这个写到这里，有好处。  
                                    typeof cb == "function" && cb(that.globalData.userInfo)  
                                } else {  
                                    // 失败  
                                }  
                            })  
                        },  
                          
                        // 这里是点击拒绝触发的方法  
                        fail: function (res2) {  
                            // 在这里做一下兼容，有些同行业的用户会点击拒绝玩一玩看你们的小程序是否存在bug，  
                            // 所以在这里还是加上下面这两行代码吧，打开微信小程序的设置，允许小程序重新授权的页面  
                            wx.openSetting({  
                                success: (res) => {  
                                    // 下面的代码格式按照我的写，不要看工具打印的什么，在这里提醒大家一句，有时候不能相信开发者工具，因为  
                                    // android和ios还有工具底层的js库是不同的，有些时候坑的你是一点脾气也没有，所以大家注意一下，  
                                    // 不相信的慢慢的去自己跳坑吧  
                                    if (res.authSetting["scope.userInfo"]) {  
                                        // 进入这里说明用户重新授权了，重新执行获取用户信息的方法  
                                        that.getUserInfo()  
                                    }  
                                }  
                            })  
                        }  
                    })  
                }  
            })  
        }  
    },  
  
    /**  
    * 全局变量配置（在这里放一些常量和配置文件，如果公共参数多的话大家也可以去重新布局一个文件，在里面进行设置）  
    */  
    globalData: {  
        userInfo: null,  
        url: '这是接口的url'  
    }  
})  
  
// 下面是util.js的东西  
  
/**  
 * request请求封装  
 * url   传递方法名  
 * types 传递方式(1,GET,2,POST)  
 * data  传递数据对象  
 */  
function commonAjax(url, types, data) {  
      
    // 获取公共配置  
    var app = getApp()  
    
    // 公共参数（一般写接口的时候都会有些公共参数，你可以事先把这些参数都封装起来，就不用每次调用方法的时候再去写，）  
    var d = {  
        token: '123456789',// 例如：这是我们自己的验证规则  
    }  
    
    // 合并对象(公共参数加传入参数合并对象) mergeObj对象在下面  
    var datas = mergeObj(d, data)  
  
    // 这是es6的promise版本库大概在1.1.0开始支持的，大家可以去历史细节点去看一下，一些es6的机制已经可以使用了  
    var promise = new Promise(function (resolve, reject, defaults) {  
    // 封装reuqest  
    wx.request({  
      url: app.globalData.url + url,  
      data: datas,  
      method: (types === 1) ? 'GET' : 'POST',  
      header: (types === 1) ? { 'content-type': 'application/json' } : { 'content-type':'application/x-www-form-urlencoded'},  
      success: resolve,  
      fail: reject,  
      complete: defaults,  
    })  
  });  
  return promise;  
}  
  
/**  
 * object 对象合并  
 * o1     对象一  
 * o2     对象二  
 */  
function mergeObj(o1, o2) {  
  for (var key in o2) {  
    o1[key] = o2[key]  
  }  
  return o1;  
}  
  
function formatTime(date) {  
  var year = date.getFullYear()  
  var month = date.getMonth() + 1  
  var day = date.getDate()  
  
  var hour = date.getHours()  
  var minute = date.getMinutes()  
  var second = date.getSeconds()  
  
  
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')  
}  
  
function formatNumber(n) {  
  n = n.toString()  
  return n[1] ? n : '0' + n  
}  
  
module.exports = {  
  formatTime: formatTime,  
  commonAjax: commonAjax,  
}  