微信小程序登录,包括uniapp的微信小程序登录

代码：

样式：

<button @click="login">登入</button>

事件（methods中）：

login() {
			      //判断缓存中是否有用户数据（也就是判断有没有登录）
						if (!uni.getStorageSync('encryptedData')) {
							uni.getUserProfile({
								desc: '获取您的昵称、头像、地区及性別',//向用户展示的信息
                                //用户点击了登录
								success: infoRes => {
									console.log(infoRes)
									if (infoRes.errMsg === 'getUserProfile:ok') {
										//开始登录
										const appid = uni.getAccountInfoSync().miniProgram.appId
										uni.login({
										  provider: 'weixin',
										  success: function (loginRes) {
										    const code = loginRes.code
												uni.request({
													url:'https://api.weixin.qq.com/sns/jscode2session',
													method:'GET',
													data:{
														appid:appid,
														secret:'a*********f',//微信公众平台小程序获取
														js_code:code,
														grant_type:'authorization_code'
													},
													success:res => {
														console.log(res)//根据你的需要存用户信息，可以存到cookie也可以写个请求存到你服务器的数据库里面
														uni.setStorageSync('encryptedData', infoRes.encryptedData);
														uni.setStorageSync('iv', infoRes.iv);
														uni.setStorageSync('rawData', infoRes.rawData);
														uni.setStorageSync('signature', infoRes.signature);
														uni.setStorageSync('securityStatus', 1);
														uni.showToast({
															title: '登陆成功',
															duration:2000
														});
													},
													fail:err => {
														uni.showToast({
															title: '网络错误登陆失败',
															icon: 'none',
															duration:2000
														});
													}
												})
										  }
										});	
									} else {
										uni.showToast({
											title: '授权失败',
											icon: 'none',
											duration:2000
										});
									}
								},
								fail: err => {
									uni.showToast({
										title: '授权失败',
										icon: 'none',
										duration:2000
									});
								}
							});
						} else {
							console.log('登陆过了')
						}
					},

详细解释：

1、首先是uni.getUserProfile，这个只是获取当前用户的登录信息，而且包含这个API的事件必须定义为click事件，不能定义在钩子函数也就是生命周期函数中。否则会报错{errMsg: "getUserProfile:fail can only be invoked by user TAP gesture."}

而且异步也会报同样的错误，可以理解为尽量别在uni.getUserProfile外面套别的请求或者uni.的方法。

2、uni.getUserProfile，这个只是获取当前用户的登录信息。目的也只是获取用户信息，可以用来存到数据库，所以用户即使不登陆也可以存下来用户信息（最好不要这样）。然后就是uni.login,目的是获取微信登陆用的code(等同于微信小程序官方的wx.login,uniapp只是改了个名字)。这一步的目的是获取code,只有有了code才能使用微信登陆的官方接口。（一般获取到用户信息其实可以自己实现存用户信息登录了，但是小程序上传代码可能会不给你过。所以按照官方流程来）

3、调用https://api.weixin.qq.com/sns/jscode2session接口，来使用微信官方的登录流程。此接口的接口文档：auth.code2Session | 微信开放文档 (qq.com)

方法为get方法，参数appid和secret可以去微信公众平台 (qq.com)登录后的开发管理的开发设置中找到，如图：

 js_code就是第二步中获得的code,最后一个参数grant_type直接写为：grant_type:'authorization_code'就可以了。

最后根据这张图：

 我们就已经完成到了返回自定义登陆状态。微信的官方文档告诉我们下一步应该这样做：

 4、可以把第三步请求中获得的openid也就是用户唯一标识来判断用户有没有登录和传给后端的token（我上边的代码为了方便验证是否登录用了其他参数）。

此时用户数据已经获取并告诉微信官方小程序被用户登陆了。然后怎么存用户信息就要根据业务来写代码了。

注：uniapp上述代码可以直接复制，然后换上自己的secret就行了。

        如果你用的是微信小程序原生开发：

        （1）uni.getUserProfile换成wx.getUserProfile来获取用户信息。

        （2）uni.getStorageSync和uni.setStorageSync就不能用了，换成微信小程序的cookie存储方式。

        （3）uni.login换成wx.login来获取code。

        （4）uni.request换成微信小程序的调用网络接口模式。

        （5）uni.showToast换成微信小程序的弹窗插件。