docs: ✏️ 微信小程序演示demo提供激励视频广告页面 (#783)

Author: Moonofweisheng

src/components/page-wraper/page-wraper.vue

@@ -1,6 +1,6 @@
 <template>
   <wd-config-provider :theme="theme" :theme-vars="isRed ? themeVars : {}">
-    <view class="page-wraper">
+    <view class="page-wraper" @click="closeOutside">
       <wd-cell title="切换暗黑" title-width="240px" center v-if="showDarkMode">
         <wd-switch v-model="isDark" />
       </wd-cell>
@@ -24,6 +24,16 @@
     </view>
     <wd-notify />
     <wd-toast />
+    <!-- #ifdef MP-WEIXIN -->
+    <wd-fab v-model:active="fabActive" draggable type="error" :gap="{ bottom: 58 }" v-if="enableRewardFab">
+      <wd-button type="error" round @click="goToReward">
+        <view style="display: flex; align-items: center">
+          <wd-icon name="thumb-up" size="22px"></wd-icon>
+          观看激励视频广告为我助力
+        </view>
+      </wd-button>
+    </wd-fab>
+    <!-- #endif -->
   </wd-config-provider>
 </template>
 <script lang="ts">
@@ -37,24 +47,32 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, ref, onMounted, nextTick } from 'vue'
-import { setNotifyDefaultOptions, type ConfigProviderThemeVars } from '@/uni_modules/wot-design-uni'
+import { setNotifyDefaultOptions, useQueue, type ConfigProviderThemeVars } from '@/uni_modules/wot-design-uni'
 import { useDark } from '../../store'
 
 interface Props {
   showDarkMode?: boolean
   safeAreaInsetBottom?: boolean
   useWxAd?: boolean
+  useRewardFab?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showDarkMode: false,
   safeAreaInsetBottom: true,
-  useWxAd: process.env.NODE_ENV === 'development' ? false : true
+  useWxAd: process.env.NODE_ENV === 'development' ? false : true,
+  useRewardFab: false
+})
+
+const enableRewardFab = computed(() => {
+  return props.useRewardFab && (process.env.NODE_ENV === 'development' ? false : true)
 })
 
 const darkMode = useDark()
+const { closeOutside } = useQueue()
 const isDark = ref<boolean>(false)
 const isRed = ref<boolean>(false)
+const fabActive = ref<boolean>(false)
 // #ifdef MP-WEIXIN
 // 横幅广告和格子广告可以共存，但插屏广告展示时，不显示横幅广告和格子广告
 const showWxAd = ref<boolean>(Math.random() > 0.5) // 横幅广告
@@ -71,6 +89,13 @@ const theme = computed(() => {
   return darkMode.isDark.value || isDark.value ? 'dark' : 'light'
 })
 
+function goToReward() {
+  fabActive.value = false
+  uni.navigateTo({
+    url: '/pages/wxRewardAd/Index'
+  })
+}
+
 onMounted(() => {
   setNotifyDefaultOptions({
     onClick: (event) => console.log('onClick', event),
@@ -82,10 +107,10 @@ onMounted(() => {
   if (uni.createInterstitialAd && showWxAd3.value && props.useWxAd) {
     interstitialAd = uni.createInterstitialAd({ adUnitId: 'adunit-fc8522e2b1185c89' })
     nextTick(() => {
-      console.log(interstitialAd)
       interstitialAd && interstitialAd.show()
     })
   }
+
   // #endif
 })
 </script>

src/pages.json

@@ -831,6 +831,16 @@
         },
         "navigationBarTitleText": "floatingPanel 浮动面板"
       }
+    },
+    {
+      "path": "pages/wxRewardAd/Index",
+      "name": "wxRewardAd",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "感谢激励"
+      }
     }
   ],
   // "tabBar": {

src/pages/index/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-wraper :use-wx-ad="false">
+  <page-wraper :use-wx-ad="false" :use-reward-fab="true">
     <view class="page">
       <view class="page__hd">
         <view class="page__title">

src/pages/wxRewardAd/Index.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-12-12 21:33:43
+ * @LastEditTime: 2024-12-12 22:52:14
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/pages/wxRewardAd/Index.vue
+ * 记得注释
+-->
+<template>
+  <page-wraper :use-wx-ad="false">
+    <div class="ad-completion-message">
+      <div class="message-title">感谢你愿意来观看广告！</div>
+      <div class="message-content">观看成功就已经成功为我助力！</div>
+      <div class="message-content">请继续使用我们的组件，您的支持对我们非常重要！</div>
+      <view class="button-group">
+        <wd-button type="success" block @click="back">返回使用</wd-button>
+        <wd-button type="error" block @click="showAd">再次观看</wd-button>
+      </view>
+    </div>
+  </page-wraper>
+</template>
+<script setup lang="ts">
+import { useToast } from '@/uni_modules/wot-design-uni'
+import { onMounted } from 'vue'
+const { loading: showLoading, close: closeLoading } = useToast()
+let rewardVideoAd: UniApp.InterstitialAdContext | null = null
+
+function showRewardAd() {
+  showLoading({ msg: '正在加载激励视频...' })
+  rewardVideoAd &&
+    rewardVideoAd
+      .show()
+      .then(() => {
+        closeLoading()
+      })
+      .catch(() => {
+        rewardVideoAd!
+          .load()
+          .then(() =>
+            rewardVideoAd!.show().finally(() => {
+              closeLoading()
+            })
+          )
+          .catch((err) => {
+            closeLoading()
+            console.log('激励视频 广告显示失败')
+          })
+      })
+}
+
+onMounted(() => {
+  // 接入微信小程序激励视频广告
+  if (uni.createRewardedVideoAd) {
+    rewardVideoAd = uni.createRewardedVideoAd({ adUnitId: 'adunit-91e0e9b07b57557a' })
+    rewardVideoAd.onLoad(() => {
+      console.log('激励视频 广告加载成功')
+    })
+    rewardVideoAd.onError((err) => {
+      console.log('激励视频 广告加载失败', err)
+    })
+    showRewardAd()
+  }
+})
+
+function back() {
+  uni.navigateBack()
+}
+
+function showAd() {
+  showRewardAd()
+}
+</script>
+<style lang="scss" scoped>
+.ad-completion-message {
+  text-align: center;
+  padding: 20px;
+}
+
+.message-title {
+  font-size: 24px;
+  color: #4caf50;
+}
+
+.message-content {
+  font-size: 16px;
+  margin: 16px 0;
+}
+
+.continue-button {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.continue-button:hover {
+  background-color: #0056b3;
+}
+
+.button-group {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+</style>