**微信小程序登录**
流程：
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>
~~~
