uni-app 下小程序登录 前端实现

uni-app下的登陆API说白了就是对小程序原生代码的封装，先来看一下小程序的登录流程：

代码开始之前理一下思路：

1.在根目录下的manifest.json中配置小程序appid与appsecret

2.通过uni.getProvider获取服务供应商

3.通过uni.login获取code

4.发送code给后台，获取openid

5.通过wx.getUserInfo获取微信用户信息

 

从微信小程序获取appid与appsecret填入

 

代码部分（我是写在了vuex里面）：

const actions = {
	login({ commit }){
		uni.getProvider({		//获取服务商
			service: 'oauth',
			success:(res)=>{	
				uni.login({		// 获取code
					provider: res.provider[0],
					success:(res)=>{		
						console.log(res)
						/* #ifdef MP-WEIXIN */	
						/* 只在小程序端运行 */
						commit('SET_CODE',res.code)
						req(`/GetUserInfoByCode?code=${res.code}`,{},'GET').then((data)=>{	//后台接口 通过code获取openid与其他信息
							if(data.data.code== 200){
								console.log(data)
								commit('SET_COOKIE',data.header['Set-Cookie'])
								if(data.data.content.UserId!= null && data.data.content.UserId != 0){
									commit('SET_BINDED',true)
									commit('SET_PASSWORD',data.data.content.Password)
									commit('SET_AVATAR',data.data.content.UserInfoName)
								}
							}	
						}).then(()=>{
							wx.getUserInfo({	// 获取微信用户信息   可单独调用
								withCredentials: true,		// 获取了code 可设为true获取更多信息
								success:function(data){
									console.log(data)
									commit('SET_WXUSERINFO',data.userInfo)
									console.log(state.wxUserInfo)
								}
							})
						})
						
						/* #endif */
					},
					fail:(res)=>{		//失败
						console.log(res)
					}
				})

			},
			fail:(res)=>{		//失败
				console.log(res)
			}
		})
	}
}