在使用 UniApp 开发苹果 APP 时，实现微信授权登录需要前端和后端的配合。前端使用 JavaScript 与微信 SDK 进行交互，而后端使用 Java 处理微信授权登录的具体逻辑。以下是实现微信授权登录的详细代码和注释。
前端代码（UniApp）
首先，我们需要集成微信 SDK，并配置微信应用的相关信息。
在微信开发者平台配置应用
- 获取
AppID和AppSecret。 - 配置授权回调域名。
在 UniApp 中引入微信 SDK
1. // 引入微信SDK 2. import Weixin from 'weixin-js-sdk';
在前端进行微信授权登录
// 调用微信授权登录接口 function wechatLogin() { Weixin.login({ success(res) { if (res.code) { // 通过code获取用户信息 getWechatUserInfo(res.code); } else { console.log('登录失败！' + res.errMsg); } } }); } // 通过code获取用户信息 function getWechatUserInfo(code) { uni.request({ url: 'https://your-backend-api.com/wechatLogin', method: 'POST', data: { code: code }, success(res) { if (res.data.success) { // 保存用户信息 saveUserInfo(res.data.userInfo); } else { console.log('获取用户信息失败！'); } }, fail(err) { console.log('请求失败', err); } }); } // 保存用户信息 function saveUserInfo(userInfo) { uni.setStorageSync('userInfo', userInfo); uni.showToast({ title: '登录成功', icon: 'success' }); } // 调用微信登录 wechatLogin();
后端代码（Java）
后端需要接收前端传递的 code，并使用 AppID 和 AppSecret 请求微信服务器获取 access_token 和用户信息。
引入所需的依赖
在 pom.xml 文件中添加微信 SDK 的依赖：
<dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>4.1.0</version> </dependency>
配置微信开发者信息
@Configuration public class WxMpConfig { @Value("${wechat.appid}") private String appId; @Value("${wechat.secret}") private String appSecret; @Bean public WxMpService wxMpService() { WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl(); config.setAppId(appId); config.setSecret(appSecret); WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(config); return wxMpService; } }
实现微信授权登录接口
@RestController @RequestMapping("/wechat") public class WechatController { @Autowired private WxMpService wxMpService; @PostMapping("/login") public ResponseEntity<Map<String, Object>> wechatLogin(@RequestBody Map<String, String> params) { String code = params.get("code"); Map<String, Object> result = new HashMap<>(); try { WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code); WxMpUser user = wxMpService.oauth2getUserInfo(accessToken, null); // 将用户信息存储到数据库 User userInfo = saveUser(user); result.put("success", true); result.put("userInfo", userInfo); return ResponseEntity.ok(result); } catch (WxErrorException e) { e.printStackTrace(); result.put("success", false); result.put("message", "登录失败"); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result); } } private User saveUser(WxMpUser wxUser) { // 实现将微信用户信息存储到数据库的逻辑 User user = new User(); user.setOpenId(wxUser.getOpenId()); user.setNickname(wxUser.getNickname()); user.setAvatar(wxUser.getHeadImgUrl()); // TODO: 保存用户到数据库 return user; } }
代码详解
前端代码详解
微信 SDK 的引入与登录
import Weixin from 'weixin-js-sdk'; function wechatLogin() { Weixin.login({ success(res) { if (res.code) { getWechatUserInfo(res.code); } else { console.log('登录失败！' + res.errMsg); } } }); }
引入微信 SDK，并调用 Weixin.login 方法进行微信登录。成功登录后，会返回一个 code，我们将其传递给后端以获取用户信息
获取微信用户信息
function getWechatUserInfo(code) { uni.request({ url: 'https://your-backend-api.com/wechatLogin', method: 'POST', data: { code: code }, success(res) { if (res.data.success) { saveUserInfo(res.data.userInfo); } else { console.log('获取用户信息失败！'); } }, fail(err) { console.log('请求失败', err); } }); }
将 code 传递给后端，并通过 uni.request 请求后端接口获取用户信息。
保存用户信息
function saveUserInfo(userInfo) { uni.setStorageSync('userInfo', userInfo); uni.showToast({ title: '登录成功', icon: 'success' }); } wechatLogin();
将获取到的用户信息保存到本地存储中，并显示登录成功的提示。
后端代码详解
配置微信开发者信息
@Configuration public class WxMpConfig { @Value("${wechat.appid}") private String appId; @Value("${wechat.secret}") private String appSecret; @Bean public WxMpService wxMpService() { WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl(); config.setAppId(appId); config.setSecret(appSecret); WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(config); return wxMpService; } }
使用 @Configuration 注解配置微信开发者的 AppID 和 AppSecret。
实现微信授权登录接口
@RestController @RequestMapping("/wechat") public class WechatController { @Autowired private WxMpService wxMpService; @PostMapping("/login") public ResponseEntity<Map<String, Object>> wechatLogin(@RequestBody Map<String, String> params) { String code = params.get("code"); Map<String, Object> result = new HashMap<>(); try { WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code); WxMpUser user = wxMpService.oauth2getUserInfo(accessToken, null); User userInfo = saveUser(user); result.put("success", true); result.put("userInfo", userInfo); return ResponseEntity.ok(result); } catch (WxErrorException e) { e.printStackTrace(); result.put("success", false); result.put("message", "登录失败"); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result); } } private User saveUser(WxMpUser wxUser) { User user = new User(); user.setOpenId(wxUser.getOpenId()); user.setNickname(wxUser.getNickname()); user.setAvatar(wxUser.getHeadImgUrl()); // TODO: 保存用户到数据库 return user; } }
创建微信登录接口，接收前端传递的 code。使用 wxMpService.oauth2getAccessToken(code) 获取 access_token。使用 wxMpService.oauth2getUserInfo(accessToken, null) 获取微信用户信息。将用户信息保存到数据库，并返回给前端。
通过上述步骤，你可以在 UniApp 开发的苹果应用中实现微信授权登录功能。
