+
95
-

uniapp的微信、qq、新浪微博第三方登录代码如何写?

uni

uniapp的微信、qq、新浪微博第三方登录代码如何写?


网友回复

+
15
-

800_auto

首先在 manifest.json -> App模块权限配置,勾选 OAuth(登陆鉴权),勾选自己想要的第三方登录,然后点击蓝色的链接去开放平台注册开通

800_auto

最后输入appid等参数即可。

具体代码如下:

<template>
	<view class="flex align-center px-5 py-3">
		<view class="flex-1 flex align-center justify-center" v-for="(item, index) in providerList" :key="index">
			<view
				:class="item.icon + ' ' + item.bgColor"
				class="iconfont font-lg text-white flex align-center justify-center rounded-circle"
				style="width: 100rpx;height: 100rpx;"
				@click="thirdPartyLogin(index)"
			></view>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			providerList: []
		};
	},
	mounted() {
		uni.getProvider({
			service: 'oauth',
			success: result => {
				this.providerList = result.provider.map(value => {
					let providerName = '';
					let icon = '';
					let bgColor = '';
					switch (value) {
						case 'weixin':
							providerName = '微信登录';
							icon = 'icon-weixin';
							bgColor = 'bg-success';
							break;
						case 'qq':
							providerName = 'QQ登录';
							icon = 'icon-QQ';
							bgColor = 'bg-primary';
							break;
						case 'sinaweibo':
							providerName = '新浪微博登录';
							icon = 'icon-xinlangweibo';
							bgColor = 'bg-warning';
							break;
					}
					return {
						name: providerName,
						id: value,
						icon: icon,
						bgColor: bgColor
					};
				});
			},
			fail: error => {
				console.log('获取登录通道失败!', error);
				return false;
			}
		});
	},
	methods: {
		//第三方登录
		thirdPartyLogin(index) {
			if (i...

点击查看剩余70%

我知道答案,我要回答