微信小程序> 微信小程序登录

微信小程序登录

浏览量:2595 时间: 来源:嵩小卢

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


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

如上图显示。

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

[plain] view plain copy
  1. //app.js  
  2. // 这里是调用公共函数库  
  3. var util = require('./utils/util.js')  
  4. App({  
  5.   
  6.     /**  
  7.     * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)  
  8.     */  
  9.     onLaunch: function (options) {  
  10.   
  11.         // 调用API从本地缓存中获取数据  
  12.         var that = this  
  13.         var logs = wx.getStorageSync('logs') || []  
  14.         logs.unshift(Date.now())  
  15.         wx.setStorageSync('logs', logs)  
  16.   
  17.     },  
  18.   
  19.     /**  
  20.     * 当小程序启动,或从后台进入前台显示,会触发 onShow  
  21.     */  
  22.     onShow: function (options) {  
  23.           
  24.         var that = this,  
  25.         // scenes是场景值它的类型是整形  
  26.         scenes = options.scene,  
  27.         // sid是参数,建议兼容ios和android的时候强转换为整形  
  28.         sid = Number(options.query.sid)  
  29.   
  30.         // 获取用户信息  
  31.         that.getUserInfo(function (userInfo) {  
  32.             // 判断场景是否是从公众号进入(这里的意思是如果用户从公众号的自定义菜单进入的话且参数sid为1的话触发什么方法)  
  33.             // 获取场景值在onLaunch方法中也可以获取到,但是呢由于业务要求我们的这个方法需要用户进入就会触发  
  34.             // 各位可以根据需求去决定在哪里获取合适一些,onLaunch是小程序未关闭的情况下只执行一次,所以各位一定要考虑清楚  
  35.             if (scenes === 1035 && sid === 1) {  
  36.                 // 这里是从什么场景下要执行的方法  
  37.             }  
  38.         })  
  39.     },  
  40.   
  41.     /**  
  42.     * 获取用户信息  
  43.     */  
  44.     getUserInfo: function (cb) {  
  45.         var that = this  
  46.       
  47.         if (this.globalData.userInfo) {  
  48.               
  49.             typeof cb == "function" && cb(this.globalData.userInfo)  
  50.           
  51.         } else {  
  52.               
  53.             // 调用登录接口  
  54.             wx.login({  
  55.                 success: function (res) {  
  56.                       
  57.                     // 登录成功  
  58.                     // 在这里登录的时候会返回一个登录凭证,以前是发送一次请求换一个,现在好像是登录凭证有5分钟的有效时间  
  59.                     // 从这种情况来看微信小程序的发展还是不错的,以前估计没多少人访问,现在访问量上去后后台的布局都重新架构了  
  60.                     var code = res.code// 登录凭证  
  61.                       
  62.                     // 获取用户信息  
  63.                     wx.getUserInfo({  
  64.                         // 当你获取用户信息的时候会弹出一个弹框是否允许授权  
  65.                           
  66.                         // 这里点击允许触发的方法  
  67.                         success: function (res2) {  
  68.                           
  69.                             that.globalData.userInfo = res2.userInfo  
  70.   
  71.                             // 准备数据(下面的这些参数都是必须参数,请不要问为什么,看文档去吧)  
  72.                             var data = { encryptedData: res2.encryptedData, iv: res2.iv, code: code }  
  73.                               
  74.                             // 请求自己的服务器(在这里我结合promise封装了一下request请求,下面会把方法给大家分享一下)  
  75.                             util.commonAjax('方法名', 1, data)  
  76.                             .then(function (resolve) {  
  77.                                 // 这里自然不用解释了,这是接口返回的参数  
  78.                                 if (resolve.data.status === '200') {  
  79.                                     // 成功  
  80.                                     wx.setStorageSync('userInfo',  resolve.data.data)  
  81.                                     // 新手们注意一下,记得把下面这个写到这里,有好处。  
  82.                                     typeof cb == "function" && cb(that.globalData.userInfo)  
  83.                                 } else {  

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎