微信小程序登录态和检验注册过没的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 相关文章推荐
JS+CSS实现一个气泡提示框
Aug 18 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
百度地图自定义控件分享
Mar 04 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
轮播的简单实现方法
Jul 28 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
jQuery设计思想
Mar 07 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
js实现网页随机验证码
Oct 19 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
js实现聊天对话框
2020/02/08 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
flask-restful使用总结
2018/12/04 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
法学求职信
2014/06/22 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
初中信息技术教学计划
2015/01/22 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年大学生实习评语
2015/03/25 职场文书
国博复兴之路观后感
2015/06/02 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书