1、uniapp点击manifest.json文件进行基础配置,如下图所示
2、从HbuildX启动微信开发者工具
3、前端使用uniapp提供的接口uni.login获取code,获取到code之后把code通过接口传给后端,后端根据code和appsecret和appid调用企业微信接口获取openid和seesion_key进行验签然后返回用户信息给前端。
<template>
<view>
<view class="msg">申请获得你的公开信息(昵称、头像等)</view>
<button color="#eb2444" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo" class>微信授权</button>
</view>
</template>
<script>
var http = require("../../utils/http.js");
export default {
data() {
return {};
},
methods: {
getUserInfo() {
var that = this;
uni.showLoading({ // 展示加载框
title: '加载中',
});
uni.login({ //获取到用户信息
provider: 'weixin',
success: (res => {
console.log('res-login', res);
//获取到code
that.code = res.code;
//请求登录接口
if (res.errMsg == 'login:ok') {
// 发送code给后台 后台根据code获取openid和seesionId调用微信平台接口检验用户身份,然后返回token和用户信息给前端
}
}),
fail: (err) => {
uni.showToast({
title: '授权已取消',
icon: 'error',
mask: true,
});
},
complete: () => {
// 隐藏loading
uni.hideLoading();
},
});
},
}
};
</script>
4、保存后端返回的token和用户信息,微信授权完成
具体登录流程如下图