uni微信小程序登录

前提
需要引入colorui
使用uni开发
html

<template>
	<view>
		<cu-custom bgColor="bg-green-m" :isBack="true"><block slot="backText">返回</block><block slot="content">我的订单</block></cu-custom>
		   <!-- 作者：https://www.cnblogs.com/wfaceboss/p/10472413.html -->
			<view v-if="!user.isHankerCanUse">
				<view>
					<view class='header'>
						<image src='../../static/my/wexing_logo.png'></image>
					</view>
					<view class='content-logo'>
						<view>申请获取以下权限</view>
						<text>获得你的公开信息(昵称，头像、地区等)</text>
					</view>
	
					<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
						授权登录
					</button>
				</view>
			</view>

		<view v-else>
			<view class="bg">
				<view class="my-info">
					<image :src="user.avatarUrl" mode="aspectFit"></image>
					<text class="user-name">{{user.nickName}}</text>
				</view>
				<view class="my-order padding">
					<view class="radius orer-wrap">
						<view class="order-title bg-white padding">
							<text>我的订单</text>
							<navigator url="/pages/myorder/index" class="all-order" >
								<text>查看全部</text>
							   <text class="cuIcon-right"></text>
							</navigator>
						</view>
						<view class="">
						<!-- 九宫格 -->
						<view class="shadow-lg bg-white">
							<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
								<view class="cu-item" v-for="(item,index) in sudoku" :key="index" v-if="index @click="navigatorTo(item.to)">
									<image :src="item.url" class="g-img">
									<text>{{item.name}}</text>
								</view>
							</view>
							
						</view>
					</view>
					</view>
				</view>
			</view>
		<!-- 列表 -->
		  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
		
		      <navigator class="content cu-item arrow" url="/pages/my/income" hover-class="none">
		        <image src="~@/static/my/l1.png" class="png" mode="aspectFit"></image>
		        <text class="text-grey">累计收入</text>
		      </navigator>
	
	
		      <navigator class="content cu-item arrow" url="/pages/my/myteam" hover-class="none">
		       <image src="~@/static/my/l2.png" class="png" mode="aspectFit"></image>
		        <text class="text-grey">我的团队</text>
		      </navigator>

		       <navigator class="content cu-item arrow" url="/pages/my/welcome" hover-class="none">
		         <image src="~@/static/my/l3.png" class="png" mode="aspectFit"></image>
		        <text class="text-grey">邀请有礼</text>
		       </navigator>


		      <navigator class="content cu-item arrow" url="/pages/my/myaddress" hover-class="none">
		         <image src="~@/static/my/l4.png" class="png" mode="aspectFit"></image>
		        <text class="text-grey">地址管理</text>
		       </navigator>

		  </view>
		  	<view class="technology">技术支持：玩族科技</view>
		  <view class="cu-tabbar-height"></view>
	</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { login ,updateUserInfo} from '../../common/login.js';
	export default{
		data(){
			return {
			
				//九宫格
				sudoku:[
					{
						url:'../../static/my/o1.png',
						name:'待支付',
						isShow:true,
						to:'/pages/myorder/index'
					},
					{
						url:'../../static/my/o2.png',
						name:'待发货',
						isShow:true,
						to:'/pages/myorder/index'
					},
					{
						url:'../../static/my/o3.png',
						name:'待收货',
						isShow:true,
						to:'/pages/myorder/index'
					},
					{
						url:'../../static/my/o4.png',
						name:'已完成',
						isShow:true,
						to:'/pages/myorder/index'
					}
				],
				gridCol: 4,
				gridBorder: false,
				menuBorder: false,
			}
		},
		computed:{
			...mapState([
				'user'
			])
		},
		methods:{
			// 我的订单跳转
			navigatorTo(url){
				uni.navigateTo({
					url:url
				})
			},
			
		    //第一授权获取用户信息===》按钮触发
			wxGetUserInfo(res) {
				let _this = this;
				//获取授权
				if(res.detail.userInfo){
					_this.$store.commit('changeCanUse',true);
					login();
				}else{//拒绝了授权
					uni.showModal({
						title:'提示',
						content:'需要您的授权,否则无法正常下单',
						showCancel:false,
						success(){},
						fail(){},
						complete(){}
					});
					return;
				}
			},

　　　　　　
		},
		onLoad() {//默认加载
		    //此处加载直接进入放入App.vue的onLaunch里面
			//this.login();
			
		}
	}
</script>

<style scoped>
	/* 微信登录 */
	   .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-logo {
	        margin-left: 50rpx;
	        margin-bottom: 90rpx;
	    }
	
	    .content-logo text {
	        display: block;
	        color: #9d9d9d;
	        margin-top: 40rpx;
	    }
		.cu-list.grid>.cu-item{
			align-items: center;
		}
	    .bottom {
	        border-radius: 80rpx;
	        margin: 70rpx 50rpx;
	        font-size: 35rpx;
	    }
		/* 微信登录end */
	.bg{
		width:100%;
		height:460rpx;
		background: url(~@/static/my/b1.png) no-repeat;
		background-size:100% 460rpx;
		position: relative;
		
	}
	/* 用户信息 */
	.my-info{
		padding:30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.my-info image{
		width: 160rpx;
		height:160rpx;
		color:#333;
		border-radius: 160rpx;
	}
	.user-name{
		color:#fff;
		font-weight: 500;
		font-size: 40rpx;
		flex:1;
		padding-left:30rpx;
	}
	.orer-wrap{
		overflow: hidden;
		border-radius: 23rpx;
	}
	.my-order{
		position: absolute;
		left: 0;
		bottom: -60rpx;
		width: 100%;
		border-radius: 20rpx;
		text-align: center;
	}
	.my-order image{
		width:60rpx;
		height:60rpx;
	}
	/* 我的订单 */
	.order-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 500;
		font-size: #333;
	}
	.all-order{
		font-size: 26rpx;
		color:#999;
	}
	.content.cu-item.arrow{
		justify-content: flex-start;
	}
	.content.cu-item.arrow>.text-grey{
		padding-left:20rpx;
	}
	.cu-item image{
		width: 1.6em;
		height: 1.6em;
	}

	.technology{
		text-align: center;
		font-size: 30rpx;
		color:#999;
	}
	
</style>

vuex

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({  
    state: {
		//微信user
		user:{
			isHankerCanUse: uni.getStorageSync('isHankerCanUse')||false,  //记录是否第一次授权  false:表示不是第一次授权
			token: '',  
			avatarUrl: '',  
			nickName: '',
			//微信登录
			SessionKey: '',
			OpenId: '',
			appKey:'',
		},
		//loading
		loading:false,
  
    },  
    mutations: {  
        login(state, provider) {  
			console.log('mutations');
            console.log(state)  
            console.log(provider)  
            state.user.token = provider.token;  
            state.user.nickName = provider.nickName;  
            state.user.avatarUrl = provider.avatarUrl;  
        },
		changeCanUse(state,flag){
			uni.setStorageSync('isHankerCanUse',flag);
			state.user.isHankerCanUse = flag
		},
		switch_loading(state,tf){
			if(tf){
				state.loading = tf;
			}else{
				state.loading = !state.loading
			}
		}
    }  
})
export default store;

main.js

<script>
	import Vue from 'vue'
	import { login ,updateUserInfo} from './common/login.js';
	export default {
		globalData:{//全局变量
			
		},
		onLaunch: function() {
		
			//微信账户登录
			login();
		
		}
	}
</script>

common/login.js

import store from '../store/index.js';
//更新state
function updateState(user){
	store.commit('login',user);
}
//登录
function login() {
		let _this = this;

		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				console.log('uni.login成功');
				console.log(loginRes);
				let code = loginRes.code;
				
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('login');
						console.log(infoRes);
　　　　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						//更新用户的信息
						updateState({nickName,avatarUrl})
						updateUserInfo();//调用更新信息方法
					}
				});
		
				//uni.hideLoading();
				//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
				uni.request({
					url: '服务器地址',
					data: {
						code: code,
					},
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						//openId、或SessionKdy存储//隐藏loading
						//uni.hideLoading();
					}
				});
			},
		});
}
 //向后台更新信息
function updateUserInfo() {
		let _this = this;
		uni.request({
			url:'url' ,//服务器端地址
			data: {
				appKey: store.state.user.appKey,
				nickName: store.state.user.nickName,
				headUrl: store.state.user.avatarUrl
			},
			method: 'POST',
			header: {
				'content-type': 'application/json'
			},
			success: (res) => {
				if (res.data.state == "success") {
					uni.reLaunch({//信息更新成功后跳转到小程序首页
						url: '/pages/index/index'
					});
				}
			}
		   
		});
	 }
export{
	login,
	updateUserInfo
}

思路：
1.在vuex中设置一个user用于存储所有的用户信息
2.当小程序加载的时候launch时候，自动登录（前提是用户已经登录过的，否则uni.getUserInfo，无法返回success）
3.用户下单的时候，如果没有登录会提示到我的登录页面去登录
4.当用户去授权后，继续调用login，请求微信头像昵称，利用后天接口申请appid等信息
5.当用户离开，以后继续登录的时候会自动登录，更新数据（不需要手动登录）