微信小程序之会议OA个人中心后台交互

最新推荐文章于 2024-05-23 23:23:44 发布
最新推荐文章于 2024-05-23 23:23:44 发布
阅读量2.6k 收藏 46
点赞数 51
分类专栏： 微信小程序 文章标签： 微信小程序 小程序 会议OA 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74457789/article/details/136196932
版权

目录

获取用户昵称头像和昵称

小程序登录

登录-小程序

wx.checkSession

wx.login

wx.request

后台

准备数据表

反向生成工具生成

准备封装前端传过来的数据

小程序服器配置

导入微信小程序SDK

application.yml

WxProperties

WxConfig

WxAuthController

登录-小程序

login.js

user.js

util.js

emoji

获取用户昵称头像和昵称

wx.getUserProfile

bindgetuserinfo

小程序登录

小程序登录参考地址：小程序登录 | 微信开放文档

 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

  • 说明

    • 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。

    • 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。

    • 之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

  • 注意事项

    1. 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。

    2. 临时登录凭证 code 只能使用一次

  • appId 作用说明

    • appid 是微信账号的唯一标识，这个是固定不变的； 如果了解微信公众号开发的就需要注意一下，小程序的appid 和 公众号的appid 是不一致的

  • session_key 功能说明 微信客户端通过wx.getUserInfo()获取用户的信息 后台有时候也需要获取微信客户端的用户信息，因此，就需要利用session_key这个秘钥来从微信平台中获取 官方文档原文 签名校验以及数据加解密涉及用户的会话密钥 session_key。 开发者应该事先通过 wx.login 登录流程获取会话密钥 session_key 并保存在服务器。为了数据不被篡改，开发者不应该把 session_key 传到小程序客户端等服务器外的环境。

登录-小程序

  1. 执行wx.login 登录获取小程序端的code

  2. 服务端根据code去微信端获取session_key并且缓存；同时生成access_token 保存在小程序端，维持登录状态；

  3. 小程序端请求服务端用户数据时，先wx.checkSession，有效就通过access_token 确定用户，找到session_key；无效就执行wx.login重新登录重新生成access_token,服务端重新获取session_key；

  4. 小程序端长时间不使用，服务端的session_key会失效，无法再用session_key去微信端获取数据，需要小程序端重新执行登录操作； 服务端要获取session_key 只能通过小程序端的登录来操作；

wx.checkSession

检查登录态是否过期

wx.login

调用接口获取登录凭证（code）

wx.request

请求自己小程序服器，并且携带了code,userInfo信息

后台

准备数据表

DROP TABLE IF EXISTS `wx_user`;
CREATE TABLE `wx_user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '用户名称',
  `password` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户密码',
  `gender` tinyint(3) NOT NULL DEFAULT 0 COMMENT '性别：0 未知， 1男， 1 女',
  `birthday` date NULL DEFAULT NULL COMMENT '生日',
  `last_login_time` datetime(0) NULL DEFAULT NULL COMMENT '最近一次登录时间',
  `last_login_ip` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '最近一次登录IP地址',
  `user_level` tinyint(3) NULL DEFAULT 0 COMMENT '用户层级 0 普通用户，1 VIP用户，2 区域代理用户',
  `nickname` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户昵称或网络名称',
  `mobile` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户手机号码',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户头像图片',
  `weixin_openid` varchar(63) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '微信登录openid',
  `status` tinyint(3) NOT NULL DEFAULT 0 COMMENT '0 可用, 1 禁用, 2 注销',
  `add_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
  `deleted` tinyint(1) NULL DEFAULT 0 COMMENT '逻辑删除',
  `share_user_id` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `user_name`(`username`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '用户表' ROW_FORMAT = Compact;

反向生成工具生成

  • WxUser.java

  • WxUserMapper.java

  • WxUserMapper.xml

准备封装前端传过来的数据

  • UserInfo - 用户接收前端传递参数对象

  • WxLoginInfo - 控制层的登录方法中前端传递参数对象

小程序服器配置

导入微信小程序SDK

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-miniapp</artifactId>
    <version>3.3.0</version>
</dependency>

application.yml

oa:
  wx:
    app-id: wxf23b28b5e4ea4d6a
    app-secret: 212621faa31cdf0691367ea45b2b6041
    msgDataFormat: JSON

WxProperties

封装oa.wx的数据

@Data
@Configuration
@ConfigurationProperties(prefix = "oa.wx")
public class WxProperties {
	/**
	 * 设置微信小程序的appId
	 */
	private String appId;
	/**
	 * 设置微信小程序的Secret
	 */
	private String appSecret;
	/**
	 * 消息数据格式
	 */
	private String msgDataFormat;

}

WxConfig

注册WxMaService

@Configuration
public class WxConfig {
	@Autowired
	private WxProperties properties;

	@Bean
	public WxMaConfig wxMaConfig() {
		WxMaInMemoryConfig config = new WxMaInMemoryConfig();
		config.setAppid(properties.getAppId());
		config.setSecret(properties.getAppSecret());
		config.setMsgDataFormat(properties.getMsgDataFormat());
		return config;
	}

	@Bean
	public WxMaService wxMaService(WxMaConfig maConfig) {
		WxMaService service = new WxMaServiceImpl();
		service.setWxMaConfig(maConfig);
		return service;
	}

}

WxAuthController

@RequestMapping("/wx/auth")
public class WxAuthController {
    @Autowired
    private WxMaService wxService;
     @PostMapping("login_by_weixin")
    public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {

        //客户端需携带code与userInfo信息
        String code = wxLoginInfo.getCode();
        UserInfo userInfo = wxLoginInfo.getUserInfo();
        if (code == null || userInfo == null) {
            return ResponseUtil.badArgument();
        }
        //调用微信sdk获取openId及sessionKey
        String sessionKey = null;
        String openId = null;
        try {
            WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);
            sessionKey = result.getSessionKey();//session id
            openId = result.getOpenid();//用户唯一标识 OpenID
        } catch (Exception e) {
            e.printStackTrace();
        }

        if (sessionKey == null || openId == null) {
            log.error("微信登录,调用官方接口失败：{}", code);
            return ResponseUtil.fail();
        }else{
            log.info("openId={},sessionKey={}",openId,sessionKey);
        }
        //根据openId查询wx_user表
        //如果不存在，初始化wx_user,并保存到数据库中
        //如果存在，更新最后登录时间
        //....
        // token
        UserToken userToken = null;
        try {
            userToken = UserTokenManager.generateToken(user.getId());
        } catch (Exception e) {
            log.error("微信登录失败,生成token失败：{}", user.getId());
            e.printStackTrace();
            return ResponseUtil.fail();
        }
        userToken.setSessionKey(sessionKey);
        log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));
        Map<Object, Object> result = new HashMap<Object, Object>();
        result.put("token", userToken.getToken());
        result.put("tokenExpire", userToken.getExpireTime().toString());
        result.put("userInfo", userInfo);
        //....


        log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));

        return ResponseUtil.ok(result);
    }

响应给客户端数据有：

token userInfo

登录-小程序

将oa-mini项目导入到微信开发者工具中，这里注意一定要修改appid。

点击"修改"，将弹出一个对话框，请在对话框中输入你的小程序测试号appid

login.js

user.loginByWeixin(res.userInfo).then(res => {
    app.globalData.hasLogin = true;
    wx.navigateBack({
    delta: 1
    })
})

user.js

function loginByWeixin(userInfo) {
  return new Promise(function(resolve, reject) {
    return login().then((res) => {
      //登录远程服务器
      util.request(api.AuthLoginByWeixin, {
        code: res.code,
        userInfo: userInfo
      }, 'POST').then(res => {
        if (res.errno === 0) {
          //存储用户信息
          wx.setStorageSync('userInfo', res.data.userInfo);
          wx.setStorageSync('token', res.data.token);
          resolve(res);
        } else {
          reject(res);
        }
      })

util.js

如果使用util.request函数，每次请求都会携带'X-OA-Token': wx.getStorageSync('token');而服器已经保存了所有的token,所以服器通过token区分每个客户端

function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      timeout:6000,
      header: {
        'Content-Type': 'application/json',
        'X-OA-Token': wx.getStorageSync('token')
      },

emoji

mysql的utf8编码的一个字符最多3个字节，但是一个emoji表情为4个字节，所以utf8不支持存储emoji表情。但是utf8的超集utf8mb4一个字符最多能有4字节，所以能支持emoji表情的存储。

Linux系统中MySQL的配置文件为my.cnf。

Winows中的配置文件为my.ini。

空空bye
关注
  • 51
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 45
    评论
专栏目录
微信小程序 企业应用 企业OA系统小程序 （源代码+截图）
06-21
微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企
微信小程序 企业OA系统小程序（截图+源码）
05-13
微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（截图+源码）微信小程序 企业OA系统小程序（
微信小程序开发之会议OA首页后台数据交互（内带新知识点分享）
10-20
项目压缩包
微信小程序开发之后台数据交互及wxs应用
SAME_LOVE的博客
10-20 2421
在后台数据交互的过程中，可以使用wxs（WeixinScript）进行数据处理和逻辑控制。wxs是一种类似于JavaScript的脚本语言，它可以在.wxml文件中嵌入，并通过数据绑定和事件绑定实现动态效果。 在wxs中，可以使用一些内置的方法和对象来实现数据处理，如Math、Date等。同时，也可以使用一些自定义的函数和变量来实现特定的业务逻辑。 通过后台数据交互和wxs应用，可以实现小程序的数据展示、数据操作和业务逻辑的实现。同时，也可以提高小程序的性能和用户体验。
微信小程序进阶——后台交互个人中心授权登录
kissship的博客
10-22 1870
开发者服务器使用获取到的 session_key 和 openid 创建一个用户登录态，同时生成一个自定义的登录态标识，例如 token，并将这个标识返回给小程序前端。下面就是更为安全的method2方法获取用户信息了，即推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认。小程序前端在后续的网络请求中，可以在请求的 header 中携带这个登录态标识，以表明当前请求是一个已登录用户发起的。注意 : 需要对应后台的请求地址之后进行数据的访问。
微信小程序之会议OA首页后台交互
空空bye.
02-19 1891
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。一旦promise的状态发生变化, 状态就会被凝固。
微信小程序开发之会议OA项目首页搭建
weixin_74352229的博客
10-18 176
Flex布局，也叫弹性布局，是一种用于网页布局的新的CSS3特性。它通过让容器和其中的子项能够灵活地伸缩和排列，以适应不同屏幕尺寸和设备方向的变化。Flex布局通过设置容器的属性来控制子项的布局方式，包括水平和垂直方向的排列、大小调整等。Flex布局有两个层级的组件：容器和子项。容器是指应用Flex布局的父元素，通过设置或来启用Flex布局。而子项则是容器的直接子元素，在容器中按照一定的规则排列和布局。Flex布局具有灵活性、响应式和适应性强的特点，使得页面布局更加简洁和易于管理。
基于微信小程序实现企业OA系统小程序小程序源码分享
06-15
1. 微信web开发者工具：微信小程序官网 这是个比较好用的编辑器，对于小程序编辑很方便。 2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标...
微信小程序开发1.简易教程
vincenteL的博客
06-04 4249
微信小程序 简易教程 一、基础： 第一章 起步 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。 跟随这个教程，开始你的小程序之旅吧！ 申请账号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。 ...
微信小程序wx.previewImage实现图片预览
Mxy18851251178的博客
05-22 359
当用户在预览界面中切换图片时，可以通过手势进行左右滑动切换。另外，用户也可以进行缩放操作来放大或缩小图片。函数用于预览图片，可以将一组图片以轮播的方式展示给用户，并支持用户手势操作进行切换。中的链接/路径可以是本地文件路径（相对路径）或者远程图片链接。属性是一个数组，包含了需要预览的图片链接/路径列表。在实际使用过程中，你可以根据自己的业务需求来动态生成。以上示例中，当用户点击"预览图片"按钮时，会触发。属性的值，以满足不同场景下的预览需求。属性指定了当前显示的图片链接/路径，在合适的事件或函数中调用。
【全开源】JAVA情侣扭蛋机情侣游戏系统源码支持微信小程序+微信公众号+H5
2401_84413757的博客
05-17 675
情侣扭蛋机情侣游戏系统小程序源码”为情侣们提供了一个充满趣味和创意的互动平台。通过扭蛋机系统和多样化的情侣游戏，情侣们可以增进感情、享受甜蜜时光。我们期待与全球情侣们一起分享这份浪漫与喜悦！
微信小程序介绍
2202_75871191的博客
05-16 520
本文介绍了微信小程序开发的基础知识，包括小程序概述、开发环境搭建、编程基础、组件与API、云开发等。微信小程序云开发是一种基于云平台的服务，可以为小程序提供数据库、存储、计算等服务。在云环境中，可以创建数据库、存储文件、调用云函数等。小程序提供了丰富的API，如网络请求、位置、摄像头、支付等，可用于实现各种业务功能。小程序提供了丰富的组件，如按钮、文本、图片、视频等，可用于快速搭建页面结构。在微信开发者工具中，点击“新建项目”按钮，输入项目名称、选择项目存放路径，即可创建一个新的小程序项目。
【全开源】Java无人共享棋牌室茶室台球室系统JAVA版本支持微信小程序+微信公众号
2401_84413795的博客
05-23 444
随着科技的不断发展和人们生活节奏的加快，自助服务已逐渐成为人们生活中的一部分。为了满足市场对无人共享棋牌室、茶室、台球室的需求，我们推出了全新的无人共享系统源码。这套源码集成了先进的自助预约、支付、管理等功能，旨在为用户提供便捷、高效的服务体验，同时也为商家提供智能化的运营解决方案。无人共享棋牌室、茶室、台球室系统源码的推出，标志着共享服务领域又迈出了新的一步。我们期待与更多合作伙伴携手共进，共同推动智能共享服务的发展，为用户带来更加便捷、高效的生活体验。在这个智能共享的新时代，让我们一起创造更美好的未来。
微信小程序中页面显示时触发子组件的重新渲染
最新发布
温暖前端的博客
05-23 699
生命周期函数中，调用子组件的方法或者改变子组件的数据，从而触发子组件的重新渲染。触发子组件中的这个事件，子组件监听到事件后进行相应的处理，从而实现重新渲染。监听数据变化，当页面显示时，通过改变子组件的数据来触发。如果子组件的数据依赖于父组件的数据，可以在父组件的。改变父组件的数据，从而间接触发子组件的重新渲染。在子组件中定义一个事件，当页面显示时，父组件通过。生命周期函数中，通过。，从而实现重新渲染。
【全开源】优校管理系统支持微信小程序+微信公众号+H5
u011092458的博客
05-17 546
优校管理系统(简称优校管)是基于FastAdmin和ThinkPHP进行开发的中小学信息化管理系统，拥有PC版、UniAPP版(高级授权)。支持微信小程序、H5等多平台，主要用于信息管理、教学管理、素养评价，支持多个学校(标准授权限5个，高级授权无限制)。
基于微信小程序的在电影线订票小程序+web管理 uniapp，vue，ssm
weixin_44308935的博客
05-22 171
基于微信小程序的在电影线订票小程序+web管理 uniapp，vue，ssm
微信小程序开发之——个人中心
06-08
好的，我很愿意回答你关于微信小程序开发中个人中心的问题。在微信小程序中，个人中心通常包括用户信息展示、个人信息设置、订单管理、消息通知等功能。下面我简单介绍一下如何开发一个基本的个人中心页面。 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 45
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空空bye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值