javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > UNIAPP微信小程序登录授权

UNIAPP实现微信小程序登录授权和手机号授权功能(uniapp做微信小程序)

作者:小小黑007

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

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
}

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>

示例图:

到此这篇关于UNIAPP实现微信小程序登录授权和手机号授权(uniapp做微信小程序)的文章就介绍到这了,更多相关UNIAPP微信小程序登录授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文