微信小程序登录

微信小程序获取手机号 个人信息

在这里插入代码片<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <view>
            <view>
                <view class='header'>
                    <image src="../../static/index/wx.png" mode=""></image>
                </view>
                <view class='content'>
                    <view>申请获取以下权限</view>
                    <text>获得你的公开信息(昵称，头像、地区、手机号码等)</text>
                </view>
				<button class='bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</button>
            </view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
// 后端接口
	import { HTTP_REQUEST_URL } from "../../config/index.js"
    export default {
        data() {
            return {
                SessionKey: '',
                OpenId: '',
				code:"",
                isCanUse: uni.getStorageSync('isCanUse')||true//默认为true
            };
        },
        methods: {
			// 手机号
			getPhoneNumber(e){
			   if (e.detail.errMsg == "getPhoneNumber:ok") {
				   this.SessionKey = e.detail
				   this.wxLogin()
				}
			},　　　　
			//登录
             wxLogin() {
				 let that = this
				wx.login({
					success(res) {
						if (res.code) {
							// const code = res.code;
							that.code = res.code
							uni.request({//获取openID
								url: HTTP_REQUEST_URL, //仅为示例，并非真实接口地址。
								data: {code: that.code},
								success: (res) => {//返回状态来判断是否授权过了
									uni.showModal({
										title: '提示',
										content: '检查到您是首次使用小程序，我们希望获得您的个人信息，以便为您提供更好的服务！',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												wx.getUserProfile({
												desc: '用于完善用户资料', 
												success: (res) => {
														if(res.errMsg === 'getUserProfile:ok'){
															uni.setStorageSync('isCanUse', false);
															that.updateUserInfo(res.userInfo);
														}
													}
												});
											}
										}
									});
								}
							});
						}
					}
				});
            },
         //向后台更新信息
            updateUserInfo(data) {
                let _this = this;
				// 注册登录
				_this.$requestApi.publicApi.userReg({
					code: _this.code,
					nickName:data.nickName,
					avatarUrl: data.avatarUrl,
					sex:data.sex
				}).then(res => {
					const index = res.lastIndexOf('|')
					const token = "Bearer" + ' ' + res.substring(index + 1, res.length)
					this.$store.commit("LOGIN",{'token':token})
					// 获取手机号码
					_this.$requestApi.publicApi.getPhone({
						encryptedData: _this.SessionKey.encryptedData,
						iv: _this.SessionKey.iv
					}).then(res =>{
						this.$requestApi.publicApi.userInfo().then(res => {
							uni.setStorageSync('user_info',res.data)
							uni.reLaunch({//信息更新成功后跳转到小程序首页
								url: '/pages/home/index'
							});
						})
					})
					.catch(err => {
						uni.showToast({
							title:"登录失败，请重新登录",
							icon:"none",
							type:"error"
						})
					})
				})
				.catch(err => {
					uni.hideLoading();
					uni.showToast({
						title:"登录失败，请重新登录",
						icon:"none",
						type:"error"
					})
				})
            }
        },
    }
</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;
		background-color: #03c963 !important;
    }
</style>