uni-app 自定义广告组件

在uni-app中自定义广告组件，你可以通过创建一个自定义组件来实现。下面是一个简单的示例，展示了如何创建一个自定义广告组件，并在页面中引用它。

1. 创建自定义广告组件

首先，在项目的 components 目录下创建一个名为 AdComponent.vue 的文件。这个文件将包含你的广告组件的模板、脚本和样式。

<template>
  <view class="ad-container">
    <image class="ad-image" :src="adImageSrc" @click="handleClick"></image>
    <text class="ad-text">{{ adText }}</text>
  </view>
</template>

<script>
export default {
  name: 'AdComponent',
  props: {
    adImageSrc: {
      type: String,
      required: true
    },
    adText: {
      type: String,
      default: 'Click here for more!'
    }
  },
  methods: {
    handleClick() {
      this.$emit('ad-click');
    }
  }
}
</script>

<style scoped>
.ad-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.ad-image {
  width: 100%;
  max-width: 300px;
  height: auto;
}
.ad-text {
  margin-top: 10px;
  text-align: center;
}
</style>

2. 在页面中使用自定义广告组件

接下来，在需要使用广告组件的页面中引用并使用它。例如，在 pages/index/index.vue 中：

<template>
  <view>
    <AdComponent 
      adImageSrc="https://example.com/ad-image.jpg" 
      adText="Special Offer Inside!" 
      @ad-click="handleAdClick"
    />
  </view>
</template>

<script>
import AdComponent from '@/components/AdComponent.vue';

export default {
  components: {
    AdComponent
  },
  methods: {
    handleAdClick() {
      uni.showToast({
        title: 'Ad clicked!',
        icon: 'success'
      });
      // 处理广告点击事件，如跳转到广告详情页
    }
  }
}
</script>

<style>
/* 页面样式 */
</style>

在这个示例中，我们创建了一个简单的广告组件，它接受 adImageSrc 和 adText 作为属性，并在点击广告时触发一个 ad-click 事件。然后在页面中引用这个组件，并处理广告点击事件。

通过这种方式，你可以轻松地在uni-app中创建和使用自定义广告组件，以满足你的应用需求。