E企盈营销工具技术服务商 热线:4006-838-530

微信小程序的详细登录(上)

E企盈直播平台营销卖货系统

前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候展现我真正的技术了。我当时正在酝酿如何无形装逼时。这时候出现了一个打脸的。他说这种登录方式不可以使用了,当时我就有点不信了,结果自己测试了真的不可以使用了,没办法,只能更新一版新的了,说实话,那脸打的比较响亮啊,于是乎就有了今天就帮大家更新了一版。好了,闲话扯到这里结束了。原来的简单登录是直接在前台获取openid,但是呢微信官方发现这个洞以后就给填了,不让你们玩了,你们在这么玩下去生态圈就没办法维持了,官方直接在安全域名处禁止添加https://api.weixin.qq.com,但是呢以前添加的用户还是可以用的。如上图显示。好了废话不多少,直接撸代码,同时在这里整理了一些项目中开发中遇到的一些经验分享给大家。//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,}上面的一些封装,大家可以根据自己的喜好去修改,毕竟一个人一个风格吗,代码写的有一些乱,大家见谅一下,因为项目有点乱,我现在也有点头大,不知道该把哪些东西归为一类讲个大家,所以显得有点乱,但是呢,上面的代码包括封装都是线上经过实战检测没问题的代码,至于后台的代码会在下个帖子中发表。 付一段代码,望各位参考一下

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序的详细登录(上)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏