Uniapp 微信小程序登陆页面

Uniapp 微信小程序登陆页面

---

前言

在学习uniapp中，记录一下部分功能的实现

—

提示：以下是本篇文章正文内容，下面案例可供参考

一、参考官方文档写的

https://uniapp.dcloud.net.cn/api/plugins/provider.html#getprovider

二、使用步骤

1.引入库

代码如下（示例）：

// src/mock.js

export const Login = [
	
	{authorization:'授权登陆',yizhiy:'翼智云登陆小程序'},
	

]
//该处使用的mock的数据。

<template>
	<view class="pages">
	<view v-for="(lg,index) in Login " key="index" class="login-1">
		<view class="login-1-1">{{lg.yizhiy}}</view></view>
		<button size="mini" type="primary" @click="wechatLogin()">授权登录</button>
		
	</view>
</template>

<script>
	import {Login} from '@/src/Login'
	export default {
		data() {
			return {
				userInfo: {
					nickName: '',
					avatarUrl: '',
					username: '',
					
				},
				Login: Login,
				formData:{},
			}
		},
		onLoad() {
			// #ifndef H5
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息				
					console.log(loginRes)
				}
			});
			// #endif
		},
		onLoad() {
			uni.clearStorageSync()
		},
		methods: {
			// 微信登录
			wechatLogin() {
				var that = this
				// 获取服务商
				uni.getProvider({
					service: "oauth",
					success: function(res) {
						uni.login({
							provider: res.provider,
							success: function(infoRes) {
								console.log(infoRes)
								that.getUserInfo(infoRes)
							}
						})
					}
				})
			},
			// 获取微信昵称与头像
			getUserInfo(v) {
				var that = this
				// 弹窗提示
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						console.log(res)
						if(res.confirm){
							// 获取信息
							console.log(1111);
							
							uni.getUserProfile({
								desc: "用于完善用户信息",
								success: (userRes) => {
									
									console.log(userRes, that.formData);
									
									that.formData.username = userRes.userInfo.nickName
									// debugger;
									// console.log(res.data);
									that.formData.image = userRes.userInfo.avatarUrl
									uni.setStorageSync("globalUser", that.formData)
									
									console.log(that.formData);
									
									uni.showToast({
										icon: "success",
										title: '获取用户信息成功',
										complete() {
											
											console.log(2222);
											
											uni.redirectTo({
												url: '/pages/Login/Select/Select'
											})
										}
									})
								},
								fail: (err) => {
									uni.showToast({
										icon: "error",
										title: '获取失败,请重新授权'
									})
								}
							})
						}
					}
				})
				
			},
			checkboxChange(e) {
				console.log(e)
			},
			// goRoute() {
			// 	uni.navigateTo({
			// 		url: `./information/information?name=${this.userInfo.nickName}&img=${this.userInfo.avatarUrl}`,
			// 		// url: '/pages/Login/Select/Select',
			// 		animationType: 'pop-in',
			// 	})
			
			// }
		}
	}
</script>

<style scoped>
	.pages {
		background-color: #00ccff;
		width: 100%;
		top: 0;
		bottom: 0;
		position: absolute;
	}
	.login-1-1{
		display: flex;
		justify-content: center;
		margin-top: 250rpx;
		font-size: 25px;
	}
	.pages button{
		margin-top: 150rpx;
		margin-left: 280rpx;
		}
</style>

				

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。