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

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

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

如上图显示。

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

//app.js
// 这里是调用公共函数库
var util = require('./utils/util.js')
App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function (options) {// 调用API从本地缓存中获取数据var that = thisvar 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 = thisif (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) {// 封装reuqestwx.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() + 1var 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,
}

上面的一些封装，大家可以根据自己的喜好去修改，毕竟一个人一个风格吗，代码写的有一些乱，大家见谅一下，因为项目有点乱，我现在也有点头大，不知道该把哪些东西归为一类讲个大家，所以显得有点乱，但是呢，上面的代码包括封装都是线上经过实战检测没问题的代码，至于后台的代码会在下个帖子中发表。

付一段代码，望各位参考一下

微信小程序的详细登录(上)相关推荐

小程序上传音频失败_微信小程序实现录音后上传文件方法详细
本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...
微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
微信小程序之授权登录
微信小程序之授权登录之前微信授权登录时是直接可以通过getUserInfo接口弹出授权弹窗.由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通 ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
微信小程序开发详细步骤解决方案
什么行业适合使用微信小程序? 01. 什么是微信小程序? 微信内嵌的小程序,不需要下载安装就能使用,具有开发成本低.使用方便等特点,它实现了应用"触手可及",用户通过扫描或搜索就能 ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序获取手机号登录流程(个人开发者账号不支持)
微信小程序获取手机号登录流程所需条件 1. 非个人开发者账号 2. AppID+AppSecret 流程思路 **注意:** 代码实现常见问题所需条件 1. 非个人开发者账号获取手机号文档这 ...
微信登录后台 java_Java 后端（Spring boot）+微信小程序的授权登录
微信小程序的授权登录第一.Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
外卖点餐列表滑动微信小程序_外卖点餐微信小程序的详细解决方案
随着移动互联网的发展,以及人们生活节奏的加快,工作生活之余,大家都习惯通过手机点餐.而这对于许多餐饮企业来说,就完全具备了通过长沙小程序开发,打造外卖点餐小程序的条件.那么接下来,创研科技就给大家谈谈 ...

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

微信小程序的详细登录(上)相关推荐

最新文章

热门文章