1、设置一个按钮：
<view class="footer" style="color: #Df924D;" @click="login_wx">
<image style="width:60rpx;height:60rpx;" src="../../static/wx.png" mode="widthFix"></image>
<text style="font-size:40rpx;font-weight:800;">微信登录</text>
</view>
2、建一个单独页面：
<template>
<view>
<!– #ifdef MP-WEIXIN –>
<view v-if="isCanUse">
<view>
<view class='header'>
<image src='../../static/splogo.png'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像、地区等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
授权登录
</button>
</view>
</view>
<!– #endif –>
</view>
</template>
<script>
export default {
data() {
return {
SessionKey: '',
OpenId: '',
nickName: null,
avatarUrl: null,
isCanUse: uni.getStorageSync('isCanUse')||true//默认为true
};
},
methods: {
//第一授权获取用户信息===》按钮触发
wxGetUserInfo() {
let _this = this;
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
let nickName = infoRes.userInfo.nickName; //昵称
let avatarUrl = infoRes.userInfo.avatarUrl; //头像
try {
uni.setStorageSync('isCanUse', false);//记录是否第一次授权 false:表示不是第一次授权
_this.updateUserInfo();
} catch (e) {}
},
fail(res) {}
});
},
//登录
login() {
let _this = this;
uni.showLoading({
title: '登录中…'
});
// 1.wx获取登录用户code
uni.login({
provider: 'weixin',
success: function(loginRes) {
let code = loginRes.code;
console.log("code=",code)
if (!_this.isCanUse) {
//非第一次授权获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log("infoRes=",infoRes)
//获取用户信息后向调用信息更新方法
let nickName = infoRes.userInfo.nickName; //昵称
let avatarUrl = infoRes.userInfo.avatarUrl; //头像
_this.updateUserInfo();//调用更新信息方法
}
});
}
2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
uni.request({
url:'https://www.wm888.top/htdocs/api/login/zb_getwx.php',
data: {
code:code,
},
method: 'get',
header: {
'content-type': 'application/json'
},
success: (res) => {
console.log("返回的结果=>",res)
//openId、或SessionKdy存储//隐藏loading
uni.hideLoading();
},
fail: (res) => {
console.log(res.data)
//openId、或SessionKdy存储//隐藏loading
uni.hideLoading();
},
});
},
});
},
//向后台更新信息
updateUserInfo() {
let _this = this;
uni.request({
url:'url' ,//服务器端地址
data: {
appKey: this.$store.state.appKey,
customerId: _this.customerId,
nickName: _this.nickName,
headUrl: _this.avatarUrl
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) => {
if (res.data.state == "success") {
uni.reLaunch({//信息更新成功后跳转到小程序首页
url: '/pages/index/index'
});
}
}
});
}
},
onLoad() {//默认加载
this.login();
}
}
</script>
<style>
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
</style>
3、将小程序绑定到微信开发平台，否则没有UNIONID,在调用时也查不到的
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。