UNIAPP---实现微信小程序登录授权和手机号授权（uniapp做微信小程序）_uniapp微信手机号授权登录

UNIAPP—实现微信小程序登录授权和手机号授权（uniapp做微信小程序）

描述：uniapp开发小程序，先授权用户信息后再出现手机号授权的页面进行手机号授权。完成后返回上一页面并把信息存入后台以及前台缓存中，方便使用。

1.在uniapp的manifest.json进行微信小程序配置

2.封装request请求api.js（如果已封装可跳过）

const BASE_URL = 'xxxxxxxxxxxxxxxxxxxxx';

import func from '@/config/func.js'; 

export const myRequest = (url, method, data = {}, header = {}) => {
	func.loading('正在加载中...')
	return new Promise((resolve, reject) => {
	
		uni.request({
			url: BASE_URL + url,
			method: method || 'GET',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			} || header,
			data: data || {},
			success: (res) => {
				uni.hideLoading();
				let code = res.data.code;
				if (code == 1) {
					resolve(res.data.data)
				} else {
					func.alert(res.data.msg)
				}
			},
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败',
					icon: 'none'

				})
				reject(err)
			}
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3.封装微信授权登录以及获取手机号，之后把用户信息数据传入后台。

import {
	myRequest
} from '@/config/api.js';

// uni.login()封装
const wxLogin = function(openid) {
	return new Promise((resolve, reject) => {
		uni.login({
			success(res) {
				if (res.code) {
					resolve(res.code)
				} else {
					reject(res.errMsg);
				}
			}

		})
	})
}
/*微信小程序登录*/
const wechatAppLogin = function() {
	/*登录提示*/
	loading("正在授权")
	uni.getUserProfile({
		desc: '获取用户授权',
		success: res => {
			let userInfo = res.userInfo;
			wxLogin().then(code => { // 引用uni.login()封装

				myRequest('getOpenid', 'POST', {
						code: code
					}) //获取openid
					.then(function(v) {
						uni.hideLoading();
						uni.setStorageSync("useInfo", res.userInfo);
						uni.setStorageSync("openid", v.openid);
						wx.navigateTo({
							url: '/pages/login/index'
						})
					}, function(error) {
						reject(error);
					})

			})
		}
	})
}

// 获取手机号授权
const getPhoneNumber = function(event) {
	let that = this;
	let code = event.detail.code; //获取手机code
	var promise = new Promise(function(resolve, reject) {
		uni.checkSession({
			success: (res) => {
				myRequest('getPhone', 'POST', {
						code: code
					}) //获取手机号
					.then(function(v) {
					
						let phone = v.data;
						let useInfo = uni.getStorageSync('useInfo')
						wx.setStorageSync('mobile', mobile)
						resolve(phone);
						myRequest('login', 'POST', {
								openid: uni.getStorageSync('openid'),
								nickname: useInfo.nickName,
								img: useInfo.avatarUrl,
								phone: phone
							}) //传入后台数据
							.then(function(v) {
								uni.navigateBack({
									delta: 1
								})
							}, function(error) {
								reject(error);
							})
					}, function(error) {
						reject(error);
					})
			},
			fail(err) {
				login()
			}
		})
	})
	return promise;
}

module.exports = {
	wechatAppLogin,
	getPhoneNumber
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

4.在页面中引用，登录页面login.vue中：

<template>
	<view class="">
		<f-navbar title="登录" navbarType='3'></f-navbar>
		<view class="arvImg marCenter marT100 ">
			<image class="imgz " src="/static/images/arv.png" alt=""></image>
		</view>
		<view class="FontCenter fontSize18 marT40 fontBold">
			健身房
		</view>
		<view class="fontSize16 FontCenter marT80">
			申请获取以下权限
		</view>
		<button class="btnBig marT140" @click="getUserInfo" v-if="useInfo == ''">
			微信账号快捷登录
		</button>
		<button class="btnBig marT140" v-else open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" >
			点击获取手机号
		</button>
	</view>
</template>

<script>
	import func from '@/config/func.js';
	export default {
		data() {
			return {
				useInfo:wx.getStorageSync('useInfo')||''
			}
		},
		methods:{
			// 授权登录
			getUserInfo(){
				func.wechatAppLogin()
			},
			// 手机号授权
			onGetPhoneNumber(e){
				func.getPhoneNumber(e)
				
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

示例图：