**微信小程序登錄**
流程：
1.判斷有沒有登錄，如果已登錄，且phone手機號存在，這個是正常登錄了。
2.沒登錄時，執行以下1 2 3步驟完成，用戶注冊。
因為國內要求使用系統必須要有手機號，所以在1.授權取得openid，2.綁定手機號，3綁定頭像、昵稱（此處目錄要求用戶授權綁定）。這樣才是完整的注冊好帳號了。
3.注冊后，下次再登錄時，就不會再出現授權手機號了。但是可以重新更新頭像、昵稱。
1.獲取登錄授權，此時通過接口
~~~
/plugins/login/api/v1_xcx.php
~~~
獲取openid ,但無昵稱、頭像信息
2.綁定手機號
~~~
/plugins/login/api/v1_xcx_bind_phone.php
~~~
請求參數如：
~~~
{
api_user_id:"10"
cloudID:"54_SKc-W9BNevJQlay7XCCTdh9Jas6u2jE2w5v8Pt2BQdD_fmitNlzM0pVYdOM"
code:"783a4fff7b880f39d80ebdfda2f9500b2546448991f27533070b9c70725bde15"
encryptedData:"qIUxKJEOtA+7pQw7QgS0kYVkMnzAbOZBv4Feorzie6Kr9L2Z3tzQ/4d1QJPBL0wO7GmehTD+U2cH9Tatv/CFLiA4wL5X/7jMvoFvkDJmmJ6qz3VfHBnxuaZNdFzxJH/gEfiEjg+AumLGjNvQnlhiRC1txK7iwLp0mYdsrBlT76tlHC9UidNyR08JVPIDb5y2YAy/KiTtw+MbXxDpaLJ4mA=="
errMsg:"getPhoneNumber:ok"
from:"wx_xcx"
iv:"eeje5FQYyNoZjwT0yVvBEg=="
openid:"ow3KF4pP45NaYotCZXUKT3L2YphI"
}
~~~
3.綁定頭像、昵稱
~~~
/plugins/login/api/v1_update_info.php
~~~
最重要的是`onLoad`里面要先獲取用戶信息,
如果有用戶信息說明不需要登錄了。
特別注意是以手機號來判斷。沒有手機號，就一定要用戶綁定手機號。否則不能正常使用信息。
~~~
/api/v1_user_info.php
~~~
以下是演示代碼 ：
~~~
<template>
<view class="page">
<button plain v-if="step == 1" @click="login_wx">1.獲取登錄授權</button>
<button v-if="step == 2 || !user.phone" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">2.綁定手機號,完成注冊</button>
<view @click="getAvatar">
<cl-avatar shape="square" :src="avatar_url" :size="90"></cl-avatar>
{{ nick_name }}
</view>
<button @click="logout">退出</button>
</view>
</template>
<script>
var _this;
export default {
data() {
return {
avatar_url: '',
has_avatar_url: false,
nick_name: '',
is_login: false,
flag: '',
step:"",
user:{}
};
},
onLoad() {
_this = this;
this.load();
},
methods: {
//退出
logout() {
uni.clearStorageSync('logined');
uni.clearStorageSync('user_id');
_this.is_login = false;
this.load();
},
//判斷有沒有登錄
load() {
_this.ajax(_this.config.user.info, {}).then(res => {
if (res.code == 0) {
_this.is_login = true;
_this.nick_name = res.data.nick_name || res.data.nickname;
_this.user = res.data
if (res.data.avatar_url) {
_this.avatar_url = res.data.avatar_url;
_this.has_avatar_url = true;
}
} else {
_this.step = 1
_this.avatar_url = '';
_this.nick_name = '點擊登錄';
_this.has_avatar_url = false;
}
});
},
//第二步：綁定手機號
getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
_this.ajax(_this.config.xcx_login.bind_phone, e.detail).then(res => {
if (res.code == 0) {
//綁定手機號成功。可以添加一些代碼
_this.step = ""
_this.load();
}
});
}
},
getAvatar(){
uni.getUserProfile({
desc: '用于完善用戶信息',
success: res1 => {
console.log('用于完善用戶信息');
let d = JSON.parse(res1.rawData);
_this.ajax(_this.config.xcx_login.update_info, d).then(res => {
if (res.code == 0) {
_this.load();
}
});
},
fail: err => {
console.log(err);
}
});
},
//第一步：獲取用戶頭像、昵稱、openid
async login_wx() {
uni.showLoading({
title: '登錄中'
});
let login = await new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: function(res) {
_this
.ajax(_this.config.xcx_login.login, {
code: res.code
})
.then(res => {
uni.hideLoading();
if (res.code == 0) {
uni.setStorageSync('user_id', res.data.id);
uni.setStorageSync('openid', res.data.openid);
//沒有帳號時彈出綁定手機號
if (!res.data.phone) {
_this.step = 2
console.log("需要綁定手機號")
_this.$forceUpdate()
//這里要彈出綁定手機號
resolve(0);
} else {
console.log("不需要綁定手機號")
_this.step = ""
_this.load();
resolve(1);
}
}
});
}
});
});
}
}
};
</script>
<style></style>
~~~
