Mini Program Expert by chrysaliscat/designgraduation
npx skills add https://github.com/chrysaliscat/designgraduation --skill 'Mini Program Expert'此技能指导您扩展 RuoYi-Vue 后端以支持微信小程序认证并开发前端。它同时支持原生开发(直接使用微信开发者工具)和 UniApp(跨平台)。
将 weixin-java-miniapp 依赖添加到您的 ruoyi-common/pom.xml(或 ruoyi-framework)中:
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-miniapp</artifactId>
<version>4.5.0</version>
</dependency>
在 ruoyi-admin/src/main/resources/application.yml 中添加微信配置:
wx:
miniapp:
appid: your_app_id
secret: your_app_secret
token: your_token
aesKey: your_aes_key
msgDataFormat: JSON
在 ruoyi-framework 中创建配置类 WxMaConfiguration.java:
@Configuration
public class WxMaConfiguration {
@Value("${wx.miniapp.appid}")
private String appid;
// ... 其他字段
@Bean
public WxMaService wxMaService() {
WxMaDefaultConfigImpl config = new WxMaDefaultConfigImpl();
config.setAppid(appid);
// ... 设置其他字段
WxMaService service = new WxMaServiceImpl();
service.setWxMaConfig(config);
return service;
}
}
扩展 SysLoginService 或创建 WxLoginService 来处理 code 到 token 的交换。
工作流程:
wx.login() 获取 code。code 发送到后端 /login/wx。WxMaService.getUserService().getSessionInfo(code) 获取 openid。openid 查找 SysUser(您需要在 sys_user 表中添加一个 openid 列)。tokenService.createToken(loginUser) 生成 JWT token。选择您偏好的开发路径。
最佳适用场景:追求极致性能,需要直接访问最新微信功能,仅使用微信开发者工具。
utils/request.js)创建一个工具函数来自动处理 JWT token。
// utils/request.js
const baseUrl = 'http://localhost:8080';
const request = (options) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token') // 附加 Token
},
success: (res) => {
if (res.statusCode === 401) {
// Token 过期
wx.reLaunch({ url: '/pages/login/login' });
} else if (res.data.code === 200) {
resolve(res.data);
} else {
wx.showToast({ title: res.data.msg, icon: 'none' });
reject(res.data);
}
},
fail: reject
});
});
};
module.exports = request;
pages/login/login.js)const request = require('../../utils/request.js');
Page({
handleLogin() {
wx.login({
success: (res) => {
if (res.code) {
request({
url: '/login/wx',
method: 'POST',
data: { code: res.code }
}).then(data => {
wx.setStorageSync('token', data.token);
wx.switchTab({ url: '/pages/index/index' });
});
}
}
});
}
})
最佳适用场景:跨平台(微信、支付宝、H5、App),使用 Vue.js 语法。
使用 HBuilderX 创建一个 uni-app 项目。
使用 uni.request 和 uni.getStorageSync,它们是跨平台的封装。
/* request.js 逻辑与原生类似,但使用 `uni.` 命名空间 */
AppSecret。Vant Weapp 这样的库。uView UI 或 ThorUI。每周安装量
0
代码仓库
首次出现
1970年1月1日
安全审计
This skill guides you through extending the RuoYi-Vue backend to support WeChat Mini Program (小程序) authentication and developing the frontend. It supports both Native Development (using WeChat Developer Tools directly) and UniApp (Cross-platform).
Add the weixin-java-miniapp dependency to your ruoyi-common/pom.xml (or ruoyi-framework):
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-miniapp</artifactId>
<version>4.5.0</version>
</dependency>
Add WeChat configuration to ruoyi-admin/src/main/resources/application.yml:
wx:
miniapp:
appid: your_app_id
secret: your_app_secret
token: your_token
aesKey: your_aes_key
msgDataFormat: JSON
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Create a Config class WxMaConfiguration.java in ruoyi-framework:
@Configuration
public class WxMaConfiguration {
@Value("${wx.miniapp.appid}")
private String appid;
// ... other fields
@Bean
public WxMaService wxMaService() {
WxMaDefaultConfigImpl config = new WxMaDefaultConfigImpl();
config.setAppid(appid);
// ... set other fields
WxMaService service = new WxMaServiceImpl();
service.setWxMaConfig(config);
return service;
}
}
Extend SysLoginService or create WxLoginService to handle code-to-token exchange.
Workflow:
wx.login() to get code.code to backend /login/wx.WxMaService.getUserService().getSessionInfo(code) to get openid.SysUser by openid (you need to add an openid column to sys_user table).tokenService.createToken(loginUser).Choose your preferred development path.
Best for: Maximum performance, direct access to latest WeChat features, using WeChat Developer Tools only.
utils/request.js)Create a utility to handle JWT tokens automatically.
// utils/request.js
const baseUrl = 'http://localhost:8080';
const request = (options) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Authorization': 'Bearer ' + wx.getStorageSync('token') // Attach Token
},
success: (res) => {
if (res.statusCode === 401) {
// Token expired
wx.reLaunch({ url: '/pages/login/login' });
} else if (res.data.code === 200) {
resolve(res.data);
} else {
wx.showToast({ title: res.data.msg, icon: 'none' });
reject(res.data);
}
},
fail: reject
});
});
};
module.exports = request;
pages/login/login.js)const request = require('../../utils/request.js');
Page({
handleLogin() {
wx.login({
success: (res) => {
if (res.code) {
request({
url: '/login/wx',
method: 'POST',
data: { code: res.code }
}).then(data => {
wx.setStorageSync('token', data.token);
wx.switchTab({ url: '/pages/index/index' });
});
}
}
});
}
})
Best for: Cross-platform (WeChat, Alipay, H5, App), Vue.js syntax.
Use HBuilderX to create a uni-app project.
Use uni.request and uni.getStorageSync which are cross-platform wrappers.
/* request.js logic is similar to Native but uses `uni.` namespace */
AppSecret in the frontend code.Vant Weapp.uView UI or ThorUI.Weekly Installs
0
Repository
First Seen
Jan 1, 1970
Security Audits
Java测试技能:JUnit 5、Mockito、Testcontainers集成测试与TDD实践
456 周安装