之前经手的一个uniapp开发的app剩下一个微信登录的功能，之前没有独立搞过这一块，在网上查了很多资料已解决。记录一下实现的步骤，方便下一次copy。
一、首先在Hbuilder中配置微信授权登录
App模块配置中勾选OAuth -->微信登录 ：填写appid和appsecret
二、获取appid和appsecret
1、appid和appsecret是在微信开放平台中获取的。首先需要去微信开放平台注册账号，创建移动应用(下图)
2、 创建移动应用需要填写包名和签名(后续会介绍如何获取)，按照提示填写完成 创建应用。
3、查看应用的appid和appsecret
三、获取第二步中的应用包名和应用签名
1、应用包名是HBuilder打包时的Android包名：随便填写,遵循 xxx.xxx.xxx各式，不允许大写字母
2、应用签名：点击上图的使用自有证书选项 点击前往生成证书页面
这一步也比较简单，按照文档上步骤来就行。特别需要注意的是上图中的md5码就是第二步中需要使用到的签名,忘记了可以利用上面查看证书信息的指令查看。密码也不要忘记了，打包app的时候需要输入密码。
四、登录按钮代码
上面的步骤都是为了获取微信授权的，下面开始写页面代码，比较简单
<template>
<view class="page">
<view class="login">
<!-- <view class="header"><image src="/static/img/weixin.png"></image></view> -->
<view class="content">
<view class="title">legao 申请使用</view>
<view class="info">你的微信头像、昵称、地区和性别信息</view>
</view>
<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @click="handleThirdLoginApp">授权登录</button>
<button type="default" class="refuse" @click="goback">拒绝</button>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
goback() {
uni.navigateTo({
url: '/pages/login/login'
});
},
//app第三方登录
handleThirdLoginApp() {
var that = this;
uni.getProvider({
service: 'oauth',
success: function(res) {
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: function(loginRes) {
// loginRes 包含access_token，expires_in，openid，unionid等信息
//这里只需要把这些数据传递给后台，让后台去请求微信的接口拿到用户信息就可以了，
//然后返回登录状态
that.getApploginData(loginRes); //请求登录接口方法
},
fail: function(res) {
that.$refs.uToast.show({
title: '微信登录失败',
type: 'warning'
});
}
});
}
}
});
},
//请求登录接口方法
getApploginData(data) {
var that = this;
//这边是前端自己去调微信用户信息的接口，根据接口需要请求，如果不需要前端去获取的话就交给后端，可省去次操作
uni.request({
url: 'https://api.weixin.qq.com/sns/userinfo?access_token=' + data.authResult.access_token + '&openid=' + data.authResult.openid,
method: 'GET',
dataType: 'json',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
console.log('【登录回调啾啾啾】', res);
//前端调用微信接口，获取到微信用户的基本信息，传递给后台
that.$api.wxloginThred({ unionid:data.authResult.unionid,image:res.data.headimgurl, nickname:res.data.nickname,}).then(res=>{
console.log(res)
if (res.statusCode == 200) {
uni.setStorageSync('userInfo', JSON.stringify(res.data));
uni.setStorageSync('logined', 1);
that.$store.commit('SET_STATE', ['logined', true]);
that.$store.commit('SET_STATE', ['userInfo', res.data]);
uni.showToast({
title: '登陆成功',
duration: 2000
});
//登录成功 跳转到首页
that.checkFirst()
}
});
},
fail() {
that.$refs.uToast.show({
title: '微信登录失败',
type: 'warning'
});
}
});
},
checkFirst(){
this.$api.checkFirst({}).then(res=>{
if(res.data == '1'){
setTimeout(() => {
uni.navigateTo({
url: '/pages/login/begin'
});
}, 2000);
}else{
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index'
});
}, 2000);
}
})
},
}
};
</script>
来源：https://blog.csdn.net/weixin_40305713/article/details/115126662
