[Applet de développement Uniapp] Configurez une publicité à écran ouvert en plein écran, appuyez longuement pour identifier l'image, cliquez pour passer à l'appel pour passer un appel

Définissez les exigences de publicité en plein écran pour atteindre

Rendus :

Cliquez pour passer à d'autres applets :

uni.navigateToMiniProgram()

Document officiel : uni.navigateToMiniProgram(OBJECT) | site officiel de l'application uni

// 示例代码
uni.navigateToMiniProgram({
  appId: '',
  path: 'pages/index/index?id=123',
  extraData: {
    'data1': 'test'
  },
  success(res) {
    // 打开成功
  }
})

Afficher les images en plein écran :

"navigationStyle": "personnalisé" 

Style de barre de navigation, ne prend en charge que la valeur par défaut/personnalisée. personnalisé annule la barre de navigation native par défaut

Démonstration complète du code :

• Créer une nouvelle page pour afficher la page d'annonce

<template>
	<div class="ad-container">
		<div class="ad-content">
			<img src="https://5b0988e595225.cdn.sohucs.com/images/20200426/fcd7643a0b2146d58934366b6ccbf680.jpeg" alt="广告图片" class="ad-image" @click="redirectToMiniProgram">
			<div class="countdown">{
   
   { countdown }}秒</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				countdown: 5,
				timer: null
			};
		},
		mounted() {
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(this.timer);
					uni.redirectTo({
						url: '/pages/index/index' // 要跳转的首页路径
					});
				}
			}, 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			redirectToMiniProgram() {
				uni.navigateToMiniProgram({
					appId: '其他小程序的AppID', // 要跳转的小程序的AppID
					path: '/pages/index/index', // 要跳转的小程序页面路径
					extraData: {}, // 额外的数据，可选
					success(res) {
						console.log('跳转成功');
					},
					fail(err) {
						console.error('跳转失败', err);
					}
				});
			}
		}
	}
</script>

<style>
	.ad-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* 全屏高度 */
	}

	.ad-content {
		text-align: center;
	}

	.ad-image {
		width: 100vw;
		height: 100vh;
	}

	.countdown {
		position: absolute;
		left: 238rpx;
		top: 74rpx;
		color: white;
		font-size: 24px;
	}
</style>

• Modifier  manifest.json le fichier pour ajouter la page publicitaire à la configuration de la page

Appuyez longuement pour identifier les exigences d'image à atteindre

 Rendus :

Types d'identification pris en charge :

✅ Identifier le code de l'applet - ✅ Aller à l'applet

✅ Identifiez les codes QR de WeChat et du groupe Qiwei - ✅ Passez à la page d'ajout de groupes

✅ Reconnaître le code QR de la carte de visite- ✅ Passer à la page d'ajout d'amis

Code complet :

<template>
	<!-- show-menu-by-longpress  开启长按图片显示识别小程序码菜单 -->
	<image show-menu-by-longpress="true" @click="previewImage"
		src="../../static/123.png" style="width: 100%;height: 45vh;">
	</image>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			//长按识别二维码
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: [e.target.src],
					// 为当前显示图片的链接/索引值
					current: e.target.src,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					success: res => {
						console.log('previewImage res', res);
					},
					fail: err => {
						console.log('previewImage err', err);
					}
				});
			}
		}
	}
</script>

Cliquez pour passer à l'appel pour passer un appel Réalisation de l'exigence

 Rendus :

Affichage des codes :

<template>
	<view class="page-map">
		<view class="btn" @click="telFun()" style="text-align: center;">电话咨询</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			//拨打电话：
			telFun() {
				uni.makePhoneCall({
					phoneNumber: '135xxxxxxxxxx', //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>

</style>

annotation:

uni.makePhoneCall(OBJECT) passer un appel