|
整体概括：引导用户点击授权获取用户信息.、微信一些规则请前往微信中查看，不做过多说明.
授权目的：1获取用户信息，2部分接口需要用户同意授权才可以调用。
方式：使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。(还有一种open-type为getPhoneNumber可以获取用户手机号码,但是此方法需要用户授权两次，因为此方法只能获取用户电话号码，你如果需要获取用户头像和名称需要调用getUserInfo，这就导致用户会有2次授权的操作个人觉得体验不是很好，因此解决办法就是只获取用户头像和名称,手机号在用户登录后需要去修改资料页面自己填写，当然不填写也不影响对小程序的浏览，只是部分功能需要手机号而已.) 以上方式在每次做开发都会给客户说明并让其选择，所以这个问题不是大问题就不细说，如果有大佬能指教一二，不胜感激！
此处演示仅为button按钮的open-type为getUserInfo
特别说明：：获取登录临时code
 为啥要特别说明呢 因为我第一次开发的时候后端开发就说我的数据不对，一直不知道啥情况，直到看见微信上的这句话，  我的解决办法就是直接在onload获取就完事了。
一 引导用户进行授权
 引导用户进行授权，声明按钮并将open-type指定为getUserInfo
二 同意授权进入回调
 当用户点击按钮后会进入getUserInfo的回调，回调携带参数 到这里就进入到关键了，不管用户点击同意授权还是拒绝授权都会进入到这个回调中。因此你需要获取用户设置来验证是否同意授权。
三 获取用户设置
 如果用户已经授权返回true 反之没授权返回false。接下来就是同意授权的操作了，同意授权将你服务器需要的参数进行组装访问接口即可，将返回的数据保存本地，或者全局变量中，来确保登录状态。接下来附上全部代码.
一键登录
取消登录
import {
// mapState,
mapMutations
} from 'vuex';
export default{
// computed: {
// ...mapState(['userInfo'])
// },
data(){
return{
code:'',//微信临时登录凭证
}
},
onLoad:function(){
uni.login({
success: (res) => {
if (res.errMsg == "login:ok") {
this.code = res.code;
} else {
uni.showToast({
title: '系统异常，请联系管理员!'
})
}
}
})
},
methods:{
...mapMutations(['login']),
//微信授权登录
getUserInfo(e){
let that = this;
var p = this.getSetting();
p.then(function(isAuth) {
console.log('是否已经授权', isAuth);
if (isAuth) {
console.log('用户信息，加密数据', e);
//eData 包括//微信头像//微信名称 还有加密的数据.
let eData = JSON.parse(e.detail.rawData);
//接下来就是访问接口.
uni.request({
header: {
'content-type': 'application/x-www-form-urlencoded'
},
url: '', //你的接口地址
method: 'POST',//接口类型
data: '', //接口需要的数据
success: function(res) {
console.log(res);
if (res.data.Success) {
that.login(res.data); //将接口返回的数据保存在全局变量中.
//登录成功跳转首页或者你想跳转的地方...
//注意：如果时导航页 请用uni.switchTab
// 其他页面建议使用uni.reLaunch
} else {
uni.showToast({
title: '授权登录失败！',
mask: true,
icon: 'none'
})
}
}
})
} else {
uni.showToast({
title: '授权失败，请确认授权已开启',
mask: true,
icon: 'none'
})
}
});
},
//获取用户的当前设置
getSetting() {
return new Promise(function(resolve, reject) {
uni.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
console.log('存在');
resolve(true);
} else {
console.log('不存在');
resolve(false);
}
}
})
}).catch((e) => {
console.log(e)
});;
},
},
}
.login{
width: 750rpx;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.goback{
width: 90%;
background:#eee;
color: #333;
margin-bottom: 24rpx;
}
.loginWx{
width: 90%;
background: #04BE02;
margin-bottom: 24rpx;
}
这里面用到了登录成功后利用vuex全局保存登录状态，下篇文章就会说到全局保存的方式方法以及详解。
如代码有问题或错误，请在留言中指出问题，在此我先谢过了！
|