微信小程序的详细登录(上)
2017-06-19 16:48
267 查看
前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候展现我真正的技术了。我当时正在酝酿如何无形装逼时。这时候出现了一个打脸的。他说这种登录方式不可以使用了,当时我就有点不信了,结果自己测试了真的不可以使用了,没办法,只能更新一版新的了,说实话,那脸打的比较响亮啊
,于是乎就有了今天就帮大家更新了一版。好了,闲话扯到这里结束了。
原来的简单登录是直接在前台获取openid,但是呢微信官方发现这个洞以后就给填了,不让你们玩了,你们在这么玩下去生态圈就没办法维持了,官方直接在安全域名处禁止添加https://api.weixin.qq.com,但是呢以前添加的用户还是可以用的。
如上图显示。
好了废话不多少,直接撸代码,同时在这里整理了一些项目中开发中遇到的一些经验分享给大家。
上面的一些封装,大家可以根据自己的喜好去修改,毕竟一个人一个风格吗,代码写的有一些乱,大家见谅一下,因为项目有点乱,我现在也有点头大,不知道该把哪些东西归为一类讲个大家,所以显得有点乱,但是呢,上面的代码包括封装都是线上经过实战检测没问题的代码,至于后台的代码会在下个帖子中发表。
,于是乎就有了今天就帮大家更新了一版。好了,闲话扯到这里结束了。
原来的简单登录是直接在前台获取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() 8dc3 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, }
上面的一些封装,大家可以根据自己的喜好去修改,毕竟一个人一个风格吗,代码写的有一些乱,大家见谅一下,因为项目有点乱,我现在也有点头大,不知道该把哪些东西归为一类讲个大家,所以显得有点乱,但是呢,上面的代码包括封装都是线上经过实战检测没问题的代码,至于后台的代码会在下个帖子中发表。
相关文章推荐
- 微信 小程序开发环境搭建详细介绍
- 微信小程序(应用号)组件详细介绍
- 微信小程序 (十八)picker组件详细介绍
- 微信小程序开发记账应用实战服务端之用户注册与登录-基于Yii2描述
- 微信小程序 toast组件详细介绍
- C# B/S程序中出现“异常详细信息: System.Data.SqlClient.SqlException: 用户 'XXX/ASPNET' 登录失败。”的处理方法
- 微信小程序(十六)form组件详细介绍
- 微信小程序(十五)checkbox组件详细介绍
- 微信小程序 rpx 尺寸单位详细介绍
- 微信小程序(微信应用号)开发工具0.9版安装详细教程
- 微信小程序 (八)View组件详细介绍
- 微信小程序 (七)数据绑定详细介绍
- 微信小程序 (十七)input 组件详细介绍
- 微信小程序(十二)text组件详细介绍
- 微信小程序搭建及解决登录失败问题
- 微信小程序(五)页面生命周期详细介绍
- 微信小程序(十)swiper组件详细介绍
- 微信小程序(二十)slider组件详细介绍
- 微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍