微信小程序登录态和检验注册过没的app.js写法


Posted in Javascript onMay 22, 2019

0、可参考的官方页面

获取登录凭证:https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html
检查登录态是否过期: https://developers.weixin.qq.com/miniprogram/dev/api/wx.checkSession.html

备注:你要明白什么是登录态:这里的登录态是微信小程序自己的登录态,我们可以再自己写个登录页面作为自己的登录态,不过为了用户体验良好我直接以微信登录态做为自己的登录态。所以我的整个小程序是直接自动登录的

 注意:微信小程序缓存很容易被清除,所以你必须时刻提防小程序缓存被清除的状态下怎么处理。

备注:我从后台返回来给小程序的对象格式为:

public ResultCode resultCode; // 业务响应码
 public String resultMsg = ""; // 返回信息描述
 public String errCode; // 错误代码
 public String errCodeDes = ""; // 错误描述
 public Object data; // 返回业务数据
  public enum ResultCode {
  SUCCESS, // 业务处理成功
  FAIL; // 业务处理失败
 }

1、流程

(1)调用wx.checkSession检查用户登录态是否过期,如果没有过期就检查用户注册没注册①,如果过期了就去重新执行登录流程②

(2)②的流程为:调用wx.login来获取登录凭证(code),然后把code发给后台,后台调用 auth.code2Session,使用 code 换取 openid 等信息来获取openId , 把openId返回给小程序, 然后把openId放到小程序缓存里面,然后检查用户注册没注册①

(3)①的流程为:先从缓存查该用户注册没注册过(通过检查缓存变量registered存不存在),有就是老用户,没有就去后台通过openId查有没有这个用户,把结果返回给小程序,如果后台有这个用户,说明已经注册过,就把在缓存里加个registered并赋值true。

 (4)然后我们就可以在其他页面通过registered来判断用户注册没注册过,从而跳转进入注册页面或者是主页

2、app.js代码

App({
   globalData: {
    serverHost: 'http://localhost:8080', //服务器域名
   },
   onLaunch: function() {
    var that = this;
    //检查登录态是否过期
    wx.checkSession({
     success() {
      // session_key 未过期,并且在本生命周期一直有效
      console.log("【用户小程序登录态未过期】");
      that.isRegister();
     },
     fail() {
      // session_key 已经失效,需要重新执行登录流程
      that.wxLogin();
     }
    })
   },
   //查看当前用户是否已经注册过
   isRegister: function() {
    var that = this;
    var host = this.globalData.serverHost;
    // (先从缓存查该用户,有就是老用户,没有就后台查有没有这个用户,后台查到有这个用户就放缓存,没有就是新用户)
    wx.getStorage({
     key: 'registered',
     success(res) {
      console.log("【通过缓存查询到该用户是已经注册过的】");
      console.log("【当前用户的openid为:】" + wx.getStorageSync('openid'));
     },
     fail(res) {
      var openid;
      openid = wx.getStorageSync('openid');
      wx.request({
       url: host + '写自己的后台请求检查用户存不存在的URL',
       method: 'POST',
       data: {
        openId: openid,
       },
       header: {
        "Content-Type": "application/x-www-form-urlencoded"
       },
       success: (res) => {
        if (后台返回注册过") {
         if (res.data.data) {
          console.log("【通过后台查询到该用户已经注册过】");
          wx.setStorage({
           key: "registered",
           data: true
          });
         } else {
          console.log("【通过后台查询到该用户还没注册过】");
         }
        }
       }
      })
     },
    })
   },
   //该函数用来登录的
   wxLogin: function() {
    var that = this;
    //设置后台host
    var host = this.globalData.serverHost;
    console.log("【用户重新执行小程序登录流程】");
    wx.login({
     success(res) {
      // 发起网络请求,发送 res.code 到后台换取 openId
      if (res.code) {
       var code = res.code;
       wx.request({
        url: host + '写自己后台用code换取OpenId的请求URL',
        method: 'POST',
        data: {
         code: code,
        },
        header: {
         "Content-Type": "application/x-www-form-urlencoded"
        },
        success: (res) => {
         console.log("【获取用户openid成功】");
         console.log("【从后台获取到用户openid为】" + res.data.data.openid)
         let openId = res.data.data.openid;
         wx.setStorage({
          key: "openid",
          data: res.data.data.openid
         });
         console.log("【用户openid放入缓存成功】");
         that.isRegister();
        }
       })
      }
     }
    })
   },
 },
})

3、java后台怎么通过code获取openId

import net.sf.json.JSONObject;
/**
 * @author niqinhua
 * @date 2019/3/8 9:19
 */
public class WXUtil {
  public static JSONObject getOpenidAndSessionKey(String code) {
    String url = "https://api.weixin.qq.com/sns/jscode2session";
    String param = "appid=写自己的appId&secret=写自己的密钥&js_code=" +
         code + "&grant_type=authorization_code";
    String wxReturnResult = sendGet(url, param);
    JSONObject wxReturnResultObject = JSONObject.fromObject(wxReturnResult);
    return wxReturnResultObject;
  }
 /**
   * 从规范上,建议把这个方法抽出来放到HttpUtil类里面
   * 向指定URL发送GET方法的请求
   * @param url 发送请求的URL
   * @param param 请求参数,请求参数应该是 name1=value1&name2=value2 的形式。
   * @return URL 所代表远程资源的响应结果
   */
  public static String sendGet(String url, String param) {
    String result = "";
    BufferedReader in = null;
    try {
      String urlNameString = url + "?" + param;
      URL realUrl = new URL(urlNameString);
      // 打开和URL之间的连接
      URLConnection connection = realUrl.openConnection();
      // 设置通用的请求属性
      connection.setRequestProperty("accept", "*/*");
      connection.setRequestProperty("connection", "Keep-Alive");
      connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
      // 建立实际的连接
      connection.connect();
      // 定义 BufferedReader输入流来读取URL的响应
      in = new BufferedReader(new InputStreamReader(
          connection.getInputStream()));
      String line;
      while ((line = in.readLine()) != null) {
        result += line;
      }
    } catch (Exception e) {
      System.out.println("【HTTP发送GET请求出现异常】:访问URL:"+url+",错误:"+e.getMessage());
    }
    // 使用finally块来关闭输入流
    finally {
      try {
        if (in != null) {
          in.close();
        }
      } catch (Exception e2) {
        System.out.println("【HTTP请求关闭输入流异常】:访问URL:"+url+",错误:"+e2.getMessage());
      }
    }
    return result;
  }
}

上面只是工具类直接拿就行,真正业务逻辑要自己写,我只给出重点部分

JSONObject wxReturnJson = WXUtil.getOpenidAndSessionKey(code);
if (wxReturnJson.get("errCode")!=null) {
  //log.error("【获取用户的openid】【失败】【传递参数code无效】");
} else {
  //log.info("【获取用户的openid】【成功】【传递参数code无效】");
}

总结

以上所述是小编给大家介绍的微信小程序登录态和检验注册过没的app.js写法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 #Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
You might like
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
python自定义函数def的应用详解
2020/06/03 Python
Pycharm调试程序技巧小结
2020/08/08 Python
给儿子的表扬信
2014/01/15 职场文书
岗位职责说明书
2014/05/07 职场文书
档案接收函格式
2015/01/30 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
基石观后感
2015/06/12 职场文书
法定代表人身份证明书
2015/06/18 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android