uniapp小程序实现图片开屏页

随着小程序的快速发展，开屏广告成为了小程序广告营销领域的一种重要形式。开屏广告不仅能够提高曝光率，还有助于品牌的形象建立和用户的留存。

在小程序开发中，使用uniapp框架可以快速实现多端适配，极大地方便了开发者的工作。下面，本文将介绍如何使用uniapp框架来实现开屏图片广告的功能。

一、需求分析

在开发开屏广告之前，我们需要明确开发的需求。一般来说，开屏广告需要实现如下功能：

1. 显示倒计时，让用户了解广告时间。
2. 用户可以点击跳过广告，直接进入应用。
3. 用户可以点击广告跳转到对应的小程序页面。
4. 广告图片需要自适应屏幕大小，保证在各种分辨率下都能正常展示。

二、实现步骤

基于以上需求分析，我们可以结合uniapp框架来实现开屏广告的功能。

1.设计开屏广告页面

我们需要在uniapp的项目根目录下，新建一个pages/splash目录，然后创建一个splash.vue文件。页面中需要设计一个展示广告的大图，以及一个倒计时标识。代码如下：

<template>
  <view class="splash">
	<u--image :src="images" :width="windowWidth" :height="windowHeight" mode="widthFix"></u--image>
    <view class="time" :style="{'top':statusBarHeight + 'px'}">{{countDown}}s</view>
    <view class="skip" v-if="showSkip" @click="skip">跳过广告</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
		images:'https://s11.ax1x.com/2024/01/15/pFiNtun.png',
        showSkip: false, // 是否显示跳过广告按钮
        countDown: 0, // 倒计时
		windowWidth:0,
		windowHeight:0,
		statusBarHeight:0
      };
    },
	onLoad(){
		wx.getSystemInfo({
		  success: res => {
			this.statusBarHeight = res.statusBarHeight;
			this.windowHeight = res.windowHeight;
			this.windowWidth = res.windowWidth;
		  }
		})
	},
    onShow() {
      this.showAd();
    },
    methods: {
		/**
		 * 展示广告,轮播图片地址可通过接口获取,具体自己实现
		*/
		showAd() {
			this.countDown = 10; // 设置倒计时时间
			this.startCountDown(); // 开始倒计时
		},
		/**
		 * 倒计时跳转展示跳过按钮
		*/
		startCountDown() {
			const that = this
			setInterval(() => {
			  if (that.countDown > 0) {
				that.countDown--;
				if (that.countDown <= 3) {
				  that.showSkip = true; // 显示跳过广告按钮
				}
			  } else {
				that.skip();
			  }
			}, 1000);
		},
		/**
		 * 跳转链接
		*/
		skip() {
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
    },
  };
</script>

<style>
  .splash {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .splash .time {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 20px;
  }
  .splash .skip {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
    z-index: 999;
  }
</style>

轮播图开屏广告https://blog.csdn.net/wyh757787026/article/details/135596743