一、引言
二、准备工作
注册与认证：
首先，需要在微信开放平台注册开发者账号，并完成开发者认证。 创建小程序应用，并获取AppID和AppSecret。
登录小程序后台，在“设置”中完善小程序服务内容声明，特别是用户信息选项。 提交审核并等待通过。
安装并配置HBuilderX，确保版本在3.1.0及以上，以支持uni_modules规范插件。 下载并导入图鸟UI相关插件，如 tuniaoui-wx-user-info。
三、实现步骤
在项目中引入图鸟UI的微信用户信息组件，例如
tuniaoui-wx-user-info。<template><view class="login-page"><!-- 授权登录按钮 --><view class="submit-btn" @tap.stop="openAuthorizationModal">授权登录</view><wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal></view></template><script>import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'export default {components: { WxUserInfoModal },data() {return {showAuthorizationModal: false}},methods: {// 打开获取用户信息弹框openAuthorizationModal() {this.showAuthorizationModal = true},// 获取到的用户信息updatedUserInfoEvent(info) {console.log('获取到的用户信息', info)}}}</script><style>.login-page {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;}.submit-btn {width: 100%;background-color: #05C160;color: #FFFFFF;margin-top: 60rpx;border-radius: 10rpx;padding: 25rpx;font-size: 32rpx;display: flex;align-items: center;justify-content: center;margin: 30rpx;}</style>
实现微信授权登录：
用户点击授权登录按钮时，调用 uni.getUserProfile获取用户信息。需要注意的是， uni.getUserProfile接口在调用时，必须提供desc字段描述获取用户信息的用途。methods: {async openAuthorizationModal() {this.showAuthorizationModal = truetry {const userInfo = await uni.getUserProfile({desc: '用于完善用户资料'})console.log('用户信息', userInfo)// 处理用户信息，如保存到服务器} catch (error) {console.error('获取用户信息失败', error)}}}
用户选择头像时，可以通过 chooseAvatar接口获取临时头像路径。开发者需要将临时头像文件上传到自己的服务器进行保存。 methods: {onChooseAvatar(e) {const avatarUrl = e.detail.avatarUrl// 上传头像到服务器wx.uploadFile({url: '你的文件上传接口地址',filePath: avatarUrl,name: 'file',formData: {'token': '你的token'},success: (uploadFileRes) => {const data = uploadFileRes.data// 保存头像URL到用户信息中this.userInfo.avatarUrl = data.avatarUrl}})}}
前端获取到用户的code后，通过后端接口请求微信服务器，获取用户的openid和session_key。 使用openid和session_key可以进一步获取用户的详细信息，并进行后续的业务处理。 async login() {try {const loginRes = await uni.login({provider: 'weixin'})const { code } = loginRes// 请求后端接口，获取openid和session_keyconst res = await uni.request({url: 'https://api.weixin.qq.com/sns/jscode2session',method: 'GET',data: {appid: '你的AppID',secret: '你的AppSecret',js_code: code,grant_type: 'authorization_code'}})const { openid, session_key } = res.data// 保存openid和session_key到本地或服务器uni.setStorageSync('openid', openid)uni.setStorageSync('session_key', session_key)// 获取用户信息并保存到服务器const userInfo = await uni.getUserProfile({desc: '用于完善用户资料'})const { nickName, avatarUrl } = userInfo// 上传用户信息到服务器await uni.request({url: '你的用户信息保存接口地址',method: 'POST',data: {openid,nickName,avatarUrl}})uni.showToast({title: '授权登录成功',icon: 'success'})} catch (error) {console.error('登录失败', error)}}
四、结论
前端技术交流：
软件接单交流群：
