微信小程序授權（uniapp）

首先在App.vue中加onLaunch方法：

onLaunch

當uni-app 初始化完成時觸發（全局只觸發一次）

<script>
export default {
    onLaunch: function() {
		if (!uni.getStorageSync('token')) {
			uni.navigateTo({
				url:'/pages/auth/auth'
			})
		} 	
    }
}
</script>

auth.vue中：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="isCanUse == 'first'">
			<view>
				<view class="header">
					<image src="../../static/wx_login.png" />
				</view>
				<view class="content">
					<view>申請獲取以下權限</view>
					<text>獲得你的公開信息(暱稱，頭像、地區等)</text>
				</view>

				<button class="bottom" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授權登錄</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		API_LOGIN,
		API_USER_WECHAT_DETAIL,
		API_USER_WECHAT_UPDATE
	} from '@/globalAPI/frame.js'
	export default {
		data() {
			return {
				SessionKey: "",
				OpenId: "",
				nickName: null,
				avatarUrl: null,
				gender: null,
				isCanUse: uni.getStorageSync("isCanUse") ? uni.getStorageSync("isCanUse") : 'first' //默認爲first
			};
		},
		methods: {
			//第一授權獲取微信用戶信息===》按鈕觸發
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: "weixin",
					success: function(infoRes) {
						_this.nickName = infoRes.userInfo.nickName; //暱稱
						_this.avatarUrl = infoRes.userInfo.avatarUrl; //頭像
						_this.gender = infoRes.userInfo.gender;//性別
						try {
							uni.setStorageSync("isCanUse", 'fault'); //記錄是否第一次授權  fault:表示不是第一次授權
							_this.updateUserInfo();
						} catch (e) {}
					},
					fail(res) {}
				});
			},
			//微信小程序登陸授權
			xcxlogin() {
				let _this = this;
				uni.showLoading({
					title: "登錄中..."
				});
				// 1.wx獲取登錄用戶code
				uni.login({
					provider: "weixin",
					success: function(loginRes) {
						// console.log(loginRes,new Date())
						let code = loginRes.code;
						let params = {
							code: code,
							type: "smallProgram",
							username: code
						}
						//利用code獲取token
						_this.getToken(params);
					},
					fail:function(res) {
						console.log('fail',res);
					}
				});
			},
			//獲取token操作
			getToken(params) {
				let _this = this;
				API_LOGIN(params).then(function(res){
					uni.hideLoading();
					if (res.statusCode == 200) {
						uni.setStorageSync('token', res.data.access_token);
						if (_this.isCanUse == 'fault') {//非第一次授權獲取用戶信息
							uni.getUserInfo({
								provider: "weixin",
								success: function(infoRes) {
									//獲取用戶信息後向調用信息更新方法
									_this.nickName = infoRes.userInfo.nickName; //暱稱
									_this.avatarUrl = infoRes.userInfo.avatarUrl; //頭像
									_this.gender = infoRes.userInfo.gender;//性別
									_this.updateUserInfo(); //調用更新信息方法
								}
							});
						}
					} else {
						uni.showToast({
							title: '獲取token失敗',
							mask: true,
							icon: 'none',
							duration: 3000
						});
					}
				}).then(function() {
					_this.getUserDetail();
				}).catch(function(res){
					console.log(res)
				})
			},
			//獲取數據庫中用戶的信息
			getUserDetail(type) {
				API_USER_WECHAT_DETAIL().then(function(res) {
					uni.setStorageSync('userInfo', JSON.stringify(res.data.data));
				}).then(function(res){
					if(type) {
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				})
			},
			//向後臺更新信息
			updateUserInfo() {
				let params = JSON.parse(uni.getStorageSync('userInfo'));
				let _this = this;
				params.wechatName = this.nickName;
				params.wechatIcon = this.avatarUrl;
				params.gender = this.gender;
				API_USER_WECHAT_UPDATE(params).then(function(res){
					_this.getUserDetail(1)
				})
			}
		},
		onLoad() {
			this.xcxlogin();
		}
	};
</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;
	}
</style>