To authorize APP WeChat login, you need to apply on the WeChat Open Platform . Configure the appId for WeChat login in the APP SDK in HBuilderX. In addition, if you need to communicate with mini programs and public account authorized accounts, you also need to apply on the WeChat Open Platform.
1. Apply for an application on the WeChat public platform and obtain the corresponding appid and appsecret
2. Configure the appId and appsecret for WeChat login in HBuilderX in the APP SDK
1. Problem-solving ideas:
WeChat authorized login (obtain user information) | Mini program login | WeChat open document
1. Obtain user information first - after user authorization is granted, the code can be obtained by calling uni.login.
2. Use the obtained code to call the login interface to obtain the token.
3. Store the token in the cache. You can check whether you are logged in on the page.
2. Code
<view @click="getUserInfo()">点击登录</view>
<script>
export default {
data() {
return {
localtoken: ''
}
},
onLoad() {},
onHide() {},
onShow() {
this.localtoken = uni.getStorageSync('localtoken');
},
methods: {
getUserInfo() {
var that = this;
uni.showLoading({ // 展示加载框
title: '加载中',
});
uni.getUserProfile({ //获取到用户信息
desc: '登录后可同步数据',
success: async (obj) => {
console.log('obj', obj);
that.nickName = obj.userInfo.nickName //用户名
that.avatarUrl = obj.userInfo.avatarUrl //用户头像
// 调用 action ，请求登录接口
uni.login({
provider: 'weixin',
success: (res) => {
console.log('res-login', res);
//获取到code
that.code = res.code;
// console.log('code', res.code);
//请求登录接口
if (res.errMsg == 'login:ok') {
var params = {
code: that.code,
nickname: that.nickName,
avatar: that.avatarUrl
}
that.$api.appPlateForm('POST', 'auth/login', params, function(
res) {
if (res.code == 200) {
uni.showToast({
title: '登录成功',
icon: 'success',
mask: true,
});
//获取到token 存入缓存。通过有无token来判断是否登录
// console.log('登录接口',res)
uni.setStorageSync('localtoken', res.data.data.access_token)
that.myProfile() //用户信息接口
that.getHistoryList() //足迹接口
}
}, function(err) {
uni.showToast({
icon: 'none',
title: err.msg
})
});
}
},
});
},
fail: () => {
uni.showToast({
title: '授权已取消',
icon: 'error',
mask: true,
});
},
complete: () => {
// 隐藏loading
uni.hideLoading();
},
});
},
//退出登录
logOut() {
var that = this
uni.showModal({
title: '确定要退出登录吗？',
success: function(res) {
if (res.confirm) {
uni.removeStorageSync('token')
that.nickname = ''
that.headimgurl = ''
} else if (res.cancel) {
// console.log('用户点击取消');
}
}
});
},
}
}
</script>
3. Summary
The above is the WeChat login process. There may be problems, but the overall process is correct. It’s still the same sentence: there are thousands of codes, the most important thing is what suits you.