tutoriel d'introduction à l'uni-app - connexion et partage avec des tiers

Recommandé (gratuit) : Tutoriel de développement d'uni-app

Article Table des matières

• Avant-propos
• 1. Configuration générale
• • 1. Configuration de l'applet WeChat
  • 2. Configuration côté .APP
• 2. Connexion tierce de l'applet WeChat
• • 1. 2. Développement de la page de connexion
  3. Connexion tierce à l'application
• 4. Interface de partage
• 1. partage de programme
  • 2.Partage d'APP
  Résumé

Avant-propos

Cet article principalement présente deux aspects du développement d'applications. Les fonctions de base sont la connexion et le partage par des tiers : y compris la configuration générale de la connexion, les méthodes de connexion tierces pour les mini-programmes et applications WeChat, et le partage pour discuter et Moments. Il existe différentes interfaces et méthodes de mise en œuvre utilisant Uni. -application.

1. Configuration générale

Étant donné que

les interfaces de connexion de l'applet et de l'application sont différentes

, un traitement de compatibilité croisée doit être effectué. sur le front-end, en même temps, les mini-programmes sur des plateformes telles que WeChat ne prennent généralement en charge que la connexion tierce du programme hôte auquel ils appartiennent et ne peuvent pas inclure d'autres méthodes de connexion tierces courantes, telles que Weibo , QQ, etc., ils doivent donc être séparés de l'APP.

1. Configuration du mini programme WeChat

Le programme WeChat Mini doit être configuré

Vous devez postuler pour un mini développeur de programme et obtenir l'application et les clés associées. . Soutenir les développeurs individuels.

Après avoir obtenu l'appid, modifiez manifest.json. Vous pouvez choisir de terminer la configuration de l'applet WeChat ou de remplir la vue du code source. Les instructions sont les suivantes : appid

"mp-weixin" : {
    "appid" : "appid"}

Vous pouvez cliquer sur https://. Developers.weixin.qq.com/ Miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html Consultez la documentation officielle de WeChat.

Lors de l'utilisation de l'AppID de test fourni par HBuilder, une erreur peut être signalée, telle que

À ce stade, vous pouvez utiliser la plateforme publique WeChat https://developers.weixin.qq.com/. community/welogin?redirect_url=%2Fsandbox Demandez les informations

AppID et AppSecretCannot read property 'forceUpdate' of undefined du numéro de test de l'environnement sandbox et utilisez-les pour les tests du projet, afin que les erreurs ne soient plus générées.

2. Configuration côté APP

Le côté APP prend en charge diverses méthodes de connexion tierces telles que WeChat, QQ, Weibo, etc. Vous devez demander le correspondant. développeur et obtenez l’appid correspondant.

Après avoir obtenu l'appid correspondant, modifiez manifest.json, effectuez des opérations visuelles, sélectionnez la configuration du module d'application, effectuez la configuration de l'authentification OAuth et sélectionnez la méthode de connexion requise, telle que QQ, WeChat, etc., comme suit :

Après avoir sélectionné la méthode de connexion correspondante, vous devez remplir l'AppID et d'autres informations.

2. Connexion tierce au programme WeChat Mini

1 Déterminez si vous devez vous connecter

Obligatoire avant de vous connecter. dans le mini programme WeChat Pour déterminer si vous devez vous connecter, vous pouvez le définir dans App.vue à ce moment, car les variables et méthodes définies dans App.vue sont des

variables et méthodes globales

, qui peuvent être appelées dans d'autres pages, utilisez simplement Déclarez simplement le mot-clé. globalLe principe général de la connexion est le suivant :

Obtenez l'ID utilisateur, le code aléatoire et d'autres informations du cache local en fonction de la clé, puis demandez au serveur de vérifier si l'utilisateur existe. Un

Code aléatoire
est établi pour améliorer la sécurité de l'interface de données. De plus, Redis, MemCache, etc. peuvent également être utilisés pour assurer la sécurité. Définissez d'abord la méthode globale pour déterminer s'il faut se connecter à App.vue, comme suit :

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
	global.isLogin = function() {
		try{
			var suid = uni.getStorageSync('suid');
			var srand = uni.getStorageSync('srand');
		}catch(e){
			//TODO handle the exception
		}
		if(suid == '' || srand == ''){
			return false;
		}
		else{
			return [suid, srand];
		}
	}</script><style>
	/*每个页面公共css */
	.red{
		color:#ff0000;
	}</style>

Appelez ensuite la méthode globale dans index.vue, comme suit :

<template>
	<view>
		Index...	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			var res = global.isLogin();
			if(!res){
				uni.showModal({
					title: '登录提醒',
					content: '请登录',
					success:function(){
						uni.navigateTo({
							url: '/pages/login'
						})
					}
				})
			}
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
		}
	}</script><style></style>

En même temps Créez une nouvelle page login.vue dans le répertoire pages, comme suit :

<template>
	<view>
		login...	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
		}
	}</script><style></style>

et ajoutez-la à pages.json, comme suit :

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Uni Index",
				"backgroundColor": "#F0AD4E",
				"navigationBarTextStyle":"black"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "Uni About"
			}
		},
		{
			"path": "pages/news",
			"style": {
				"navigationBarTitleText": "Uni News",
				"navigationBarBackgroundColor":"#DD524D"
			}
		},
		{
			"path": "pages/login",
			"style": {
				"navigationBarTitleText": "Uni Login",
				"navigationBarBackgroundColor":"#00aaff"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"tabBar": {
		"color":"#F0AD4E",
		"selectedColor":"#007AFF",
		"backgroundColor":"#FFFFFF",
		"list": [
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/imgs/index_0.png",
				"selectedIconPath":"static/imgs/index_1.png",
				"text": "首页"
			},
			{
				"pagePath":"pages/about/about",
				"iconPath":"static/imgs/about_0.png",
				"selectedIconPath":"static/imgs/about_1.png",
				"text":"关于我们"
			}
		]
	},
	"condition": { //模式配置，仅开发期间生效
	    "current": 0, //当前激活的模式（list 的索引项）
	    "list": [{
	            "name": "index", //模式名称
	            "path": "pages/index/index", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
	        },
	        {
	            "name": "about", //模式名称
	            "path": "pages/about/about", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
	        }
	    ]
	}}

Affichage :

Évidemment, après avoir obtenu le statut de non connecté, il passe à la page de connexion.

2. Développement de la page de connexion

La connexion nécessite de déterminer la plate-forme et d'effectuer un développement cross-end, donc une

compilation conditionnelle

est requise. est le suivant :

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		methods: {
			getuserinfo: function(res){
				console.log(res)
			}
		}
	}</script><style></style>

Affichage :

Vous pouvez voir qu'après une connexion réussie, les informations pertinentes de l'utilisateur seront renvoyées

Après avoir vidé le cache et recompilé ; , avant Le statut de connexion n'existe pas et doit être reconnecté.

Après vous être connecté, affichez la valeur de retour res qui contient des informations de base non chiffrées. Il y a un

attribut iv

sous l'attribut de détail, qui est le vecteur initial de l' algorithme de chiffrement <.>, qui peut être déchiffrée. Les informations peuvent également être utilisées comme critère pour déterminer s'il faut autoriser la connexion ; rawData, une chaîne de données brutes qui n'inclut pas d'informations sensibles, est utilisée pour calculer les signatures. Il ne contient pas d'informations telles que openid et session_key, qui doivent être obtenues davantage : Obtenez d'abord le code, qui est l'identifiant de connexion de l'utilisateur, via
puis transportez le code, et obtenez openid et session_key via
.

login.vue如下：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		methods: {
			getuserinfo: function(res1) {
				console.log(res1)
				if (!res1.detail.iv) {
					uni.showToast({
						title: '您已取消授权，登录失败',
						icon: "none"
					})
					return false;
				}
				uni.login({
					provider: 'weixin',
					success: function(res2) {
						console.log(res2);
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
							success:function(res3){
								// get the openid and seesion key
								console.log(res3)
							},
							fail:function(res4){
								console.log(re4)
							}
						})
					},
					fail:function(r){
						console.log(r)
					}
				});
			}
		}
	}</script><style></style>

显示：

显然，此时获取到了openid和session key。
此外还可以获取unionid，其在满一定条件的情况下才会返回。
获取到了openid和session key后，可以解密iv。
通过微信官方提供的SDK进行解密，可以实现解密的接口，如下：
login.vue如下：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		methods: {
			getuserinfo: function(res1) {
				console.log(res1)
				if (!res1.detail.iv) {
					uni.showToast({
						title: '您已取消授权，登录失败',
						icon: "none"
					})
					return false;
				}
				uni.login({
					provider: 'weixin',
					success: function(res2) {
						console.log(res2);
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code='+res2.code+'&grant_type=authorization_code',
							success:function(res3){
								// get the openid and seesion key
								console.log(res3)
								// decrypt
								uni.request({
									method: 'POST',
									url: 'https://hoa.hcoder.net/xcxencode/',
									header: {'content-type':'application/x-www-form-urlencoded'},
									data: {
										appid: 'wxd3d4ee5ed8017903',
										sessionKey: res3.data.session_key,
										iv: res1.detail.iv,
										encryptedData: res1.detail.encryptedData									},
									success:function(res4){
										console.log(res4)
									}
								})
							},
							fail:function(res5){
								console.log(re5)
							}
						})
					},
					fail:function(r){
						console.log(r)
					}
				});
			}
		}
	}</script><style></style>

小程序登录时，可以设置选择携带手机号。
从之前button组件的open-type属性中可以发现，getPhoneNumber属性可以获取用户手机号，可以从@getphonenumber回调中获取到用户信息。

三、APP第三方登录

实现APP登录也是通过条件编译实现。

login.vue如下：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<button type="primary" @click="appWxLoin" withCredentials="true">用微信登录</button>
		<!-- #endif -->
		<button style="margin-top:50px;">手机号码登录</button>
	</view></template><script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		methods: {
			// miniprogram
			getuserinfo: function(res1) {
				console.log(res1)
				if (!res1.detail.iv) {
					uni.showToast({
						title: '您已取消授权，登录失败',
						icon: "none"
					})
					return false;
				}
				uni.login({
					provider: 'weixin',
					success: function(res2) {
						console.log(res2);
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
								res2.code + '&grant_type=authorization_code',
							success: function(res3) {
								// get the openid and seesion key
								console.log(res3)
								// decrypt
								uni.request({
									method: 'POST',
									url: 'https://hoa.hcoder.net/xcxencode/',
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										appid: 'wxd3d4ee5ed8017903',
										sessionKey: res3.data.session_key,
										iv: res1.detail.iv,
										encryptedData: res1.detail.encryptedData									},
									success: function(res4) {
										console.log(res4)
									}
								})
							},
							fail: function(res5) {
								console.log(re5)
							}
						})
					},
					fail: function(r) {
						console.log(r)
					}
				});
			},
			appWxLoin: function(){
				console.log('login...')
			}
		}
	}</script><style></style>

此时不需要open-type等属性，只需要进行事件绑定就可以。

显示：

手机端显示：

显然，此时实现了条件编译，在不同的设备显示不同的按钮；
同时手机端点击时，控制台也输出信息。

先实现登录，需要获取服务商，判断是否安装微信，如果已安装则申请登录验证，如下：

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<button type="primary" @click="appWxLogin" withCredentials="true">用微信登录</button>
		<!-- #endif -->
		<button style="margin-top:50px;">手机号码登录</button>
	</view></template><script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onHide() {},
		methods: {
			// miniprogram
			getuserinfo: function(res1) {
				console.log(res1)
				if (!res1.detail.iv) {
					uni.showToast({
						title: '您已取消授权，登录失败',
						icon: "none"
					})
					return false;
				}
				uni.login({
					provider: 'weixin',
					success: function(res2) {
						console.log(res2);
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxd3d4ee5ed8017903&secret=83c0d5efdfca99fc0509ff0d8956b830&js_code=' +
								res2.code + '&grant_type=authorization_code',
							success: function(res3) {
								// get the openid and seesion key
								console.log(res3)
								// decrypt
								uni.request({
									method: 'POST',
									url: 'https://hoa.hcoder.net/xcxencode/',
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										appid: 'wxd3d4ee5ed8017903',
										sessionKey: res3.data.session_key,
										iv: res1.detail.iv,
										encryptedData: res1.detail.encryptedData									},
									success: function(res4) {
										console.log(res4)
									}
								})
							},
							fail: function(res5) {
								console.log(re5)
							}
						})
					},
					fail: function(r) {
						console.log(r)
					}
				});
			},
			appWxLogin: function() {
				console.log('login...');
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider)
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log(JSON.stringify(infoRes));
											console.log('用户昵称为：' + infoRes.userInfo.nickName);
										}
									});
								}
							});
						}
					}
				});
			}
		}
	}</script><style></style>

显示：

手机端显示：

显然，实现了在APP端调用微信登录；
登录后，输出了相应的信息。

四、分享接口

分享是一个很重要的功能。

1.小程序分享

小程序只支持分享到聊天界面（包括微信好友和微信群），不支持分享到朋友圈，是使用onShareAppMessage生命周期实现的。

index.vue如下：

<template>
	<view>
		Index...	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			var res = global.isLogin();
			if(!res){
				uni.showModal({
					title: '登录提醒',
					content: '请登录',
					success:function(){
						uni.navigateTo({
							url: '/pages/login'
						})
					}
				})
			}
		},
		onShow() {
		},
		onHide() {
		},
		onShareAppMessage:function(){
			return {
				title: 'Share test...',
				path: 'pages/index/index'
			}
		},
		methods: {
		}
	}</script><style></style>

显示：

可以看到，实现了分享功能。

2.APP分享

APP中要实现分享，需要在manifest.json中进行配置，如下：

先实现分享纯文字，index.vue如下：

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<button type="primary" @click="share">点击分享</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		onShareAppMessage:function(){
			return {
				title: 'Share test...',
				path: 'pages/index/index'
			}
		},
		methods: {
			share: function(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 1,
				    summary: "我正在参加CSDN年度博客之星活动，请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧，先在此谢过啦！！",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
		}
	}</script><style></style>

显示：

手机端显示：

显然，控制台输出了分享成功的信息；
同时，APP成功调用了微信分享。

再实现分享图文，如下：

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<button type="primary" @click="share">点击分享</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		onShareAppMessage:function(){
			return {
				title: 'Share test...',
				path: 'pages/index/index'
			}
		},
		methods: {
			share: function(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: "https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr",
				    title: "cufeecr年度博客之星评选",
				    summary: "我正在参加CSDN年度博客之星活动，请点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 投一票吧，先在此谢过啦！！",
				    imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
		}
	}</script><style></style>

显示：

手机端显示：

显然，实现了分享图文到微信好友或微信群。

还可以分享到微信朋友圈，如下：

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<button type="primary" @click="share">点击分享</button>
		<!-- #endif -->
	</view></template><script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onHide() {
		},
		onShareAppMessage:function(){
			return {
				title: 'Share test...',
				path: 'pages/index/index'
			}
		},
		methods: {
			share: function(){
				uni.share({
				    provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: "https://img-blog.csdnimg.cn/20210112093810423.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}</script><style></style>

显示：

手机端显示：

已经实现了分享消息到朋友圈。

总结

第三方登录和分享是APP和小程序的基本功能，对于APP和小程序有不同的实现方式，相比较而言，APP实现更简单，都是其他功能的基础和起步。

更多相关免费了解敬请关注uni_app教程栏目！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!