fix: 广告

Author: youngboyliu

miniprogram/app.json

@@ -4,7 +4,12 @@
     "page/API/index",
     "page/cloud/index",
     "page/extend/index",
-    "page/animation/index"
+    "page/animation/index",
+    "page/ad/index",
+    "page/ad/smart-ad/smart-ad",
+    "page/ad/smart-ad/example1/example1",
+    "page/ad/smart-ad/example2/example2",
+    "page/ad/smart-ad/example3/example3"
   ],
   "usingComponents": {
     "mp-navigation-bar": "/component/navigation-bar/navigation-bar"
@@ -484,6 +489,12 @@
         "iconPath": "@iconPathCloud",
         "selectedIconPath": "@selectedIconPathCloud",
         "text": "云开发"
+      },
+      {
+        "pagePath": "page/ad/index",
+        "iconPath": "@iconPathAd",
+        "selectedIconPath": "@selectedIconPathAd",
+        "text": "广告"
       }
     ]
   },

miniprogram/demo.theme.json

@@ -15,6 +15,8 @@
     "selectedIconPathAPI": "image/icon_API_HL.png",
     "iconPathCloud": "image/icon_cloud.png",
     "selectedIconPathCloud": "image/icon_cloud_HL.png",
+    "iconPathAd": "image/icon_ad.png",
+    "selectedIconPathAd": "image/icon_ad_HL.png",
 
     "backgroundTextStyle": "dark"
   },
@@ -34,6 +36,8 @@
     "selectedIconPathAPI": "image/icon_API_HL.png",
     "iconPathCloud": "image/icon_cloud_dark.png",
     "selectedIconPathCloud": "image/icon_cloud_HL.png",
+    "iconPathAd": "image/icon_ad_dark.png",
+    "selectedIconPathAd": "image/icon_ad_HL.png",
 
     "backgroundTextStyle": "light"
   }

miniprogram/image/icon_ad.png

@@ -0,0 +1,77 @@
+let interstitialAd = null
+
+Page({
+  onShareAppMessage() {
+    return {
+      title: '微信广告展示',
+      path: 'page/ad/index'
+    }
+  },
+
+  data: {
+    theme: 'light'
+  },
+
+  onUnload() {
+    if (wx.offThemeChange) {
+      wx.offThemeChange()
+    }
+  },
+
+  onLoad() {
+    this.setData({
+      theme: getApp().globalData.theme || 'light'
+    })
+
+    if (wx.onThemeChange) {
+      wx.onThemeChange(({ theme }) => {
+        this.setData({ theme })
+      })
+    }
+
+    // 创建插屏广告
+    if (wx.createInterstitialAd) {
+      interstitialAd = wx.createInterstitialAd({
+        adUnitId: 'adunit-7c0acfb6438237aa'
+      })
+      interstitialAd.onLoad(() => {
+        console.log('插屏广告加载成功')
+      })
+      interstitialAd.onError((err) => {
+        console.error('插屏广告加载失败', err)
+      })
+      interstitialAd.onClose(() => {
+        console.log('插屏广告关闭')
+      })
+    }
+  },
+
+  onShow() {
+    // 显示插屏广告
+    if (interstitialAd) {
+      interstitialAd.show().catch((err) => {
+        console.error('插屏广告显示失败', err)
+      })
+    }
+  },
+
+  onItemTap(e) {
+    const type = e.currentTarget.dataset.type
+    if (type === 'smart') {
+      wx.navigateTo({
+        url: '/page/ad/smart-ad/smart-ad'
+      })
+      return
+    }
+    const typeMap = {
+      optimize: '广告调优',
+      hosting: '广告托管',
+      custom: '自主开发'
+    }
+    wx.showToast({
+      title: `点击了${typeMap[type]}`,
+      icon: 'none'
+    })
+  }
+})
+

miniprogram/image/icon_ad_HL.png

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "广告",
+  "renderer": "webview"
+}
+

miniprogram/image/icon_ad_dark.png

@@ -0,0 +1,37 @@
+<view class="page" data-weui-theme="{{theme}}">
+  <view class="index">
+    <view class="index-hd">
+      <image class="index-logo" src="/image/wechat.png"></image>
+      <text class="index-desc">微信广告是微信官方提供的广告投放平台，帮助开发者通过小程序实现流量变现。支持多种广告形式，包括 Banner 广告、激励视频广告、插屏广告、原生模板广告等。</text>
+    </view>
+    <view class="index-bd">
+      <view class="kind-list">
+        <view class="kind-list-item">
+          <view class="kind-list-item-hd" bindtap="onItemTap" data-type="smart">
+            <view class="kind-list-text">智能广告</view>
+            <image class="kind-list-img" src="resources/kind/logo.png"></image>
+          </view>
+        </view>
+        <view class="kind-list-item">
+          <view class="kind-list-item-hd" bindtap="onItemTap" data-type="optimize">
+            <view class="kind-list-text">广告调优</view>
+            <image class="kind-list-img" src="resources/kind/logo.png"></image>
+          </view>
+        </view>
+        <view class="kind-list-item">
+          <view class="kind-list-item-hd" bindtap="onItemTap" data-type="hosting">
+            <view class="kind-list-text">广告托管</view>
+            <image class="kind-list-img" src="resources/kind/logo.png"></image>
+          </view>
+        </view>
+        <view class="kind-list-item">
+          <view class="kind-list-item-hd" bindtap="onItemTap" data-type="custom">
+            <view class="kind-list-text">自主开发</view>
+            <image class="kind-list-img" src="resources/kind/logo.png"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
+

miniprogram/page/ad/index.js

@@ -0,0 +1,13 @@
+@import "../../common/reset.wxss";
+@import "../common/index.wxss";
+
+.index-logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.kind-list-item-hd {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}