UNIAPP實現(xiàn)微信小程序登錄授權和手機號授權功能(uniapp做微信小程序)

更新時間：2024年08月16日 10:17:59 作者：小小黑007

uniapp開發(fā)小程序,先授權用戶信息后再出現(xiàn)手機號授權的頁面進行手機號授權,完成后返回上一頁面并把信息存入后臺以及前臺緩存中,方便使用,這篇文章主要介紹了UNIAPP實現(xiàn)微信小程序登錄授權和手機號授權（uniapp做微信小程序）,需要的朋友可以參考下

UNIAPP實現(xiàn)微信小程序登錄授權和手機號授權（uniapp做微信小程序）

描述：uniapp開發(fā)小程序，先授權用戶信息后再出現(xiàn)手機號授權的頁面進行手機號授權。完成后返回上一頁面并把信息存入后臺以及前臺緩存中，方便使用。

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)
			}
		})
	})
}

3.封裝微信授權登錄以及獲取手機號，之后把用戶信息數(shù)據(jù)傳入后臺。

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
							}) //傳入后臺數(shù)據(jù)
							.then(function(v) {
								uni.navigateBack({
									delta: 1
								})
							}, function(error) {
								reject(error);
							})
					}, function(error) {
						reject(error);
					})
			},
			fail(err) {
				login()
			}
		})
	})
	return promise;
}
module.exports = {
	wechatAppLogin,
	getPhoneNumber
}

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>

示例圖：