Feat yb ad new

miniprogram/app.json

@@ -4,7 +4,17 @@
     "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",
+    "page/ad/optimize-ad/optimize-ad",
+    "page/ad/optimize-ad/home-small-card/home-small-card",
+    "page/ad/optimize-ad/home-large-card/home-large-card",
+    "page/ad/optimize-ad/other-small-card/other-small-card",
+    "page/ad/optimize-ad/other-large-card/other-large-card"
   ],
   "usingComponents": {
     "mp-navigation-bar": "/component/navigation-bar/navigation-bar"
@@ -484,6 +494,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/page/ad/index.js

@@ -0,0 +1,81 @@
+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
+    }
+    if (type === 'optimize') {
+      wx.navigateTo({
+        url: '/page/ad/optimize-ad/optimize-ad'
+      })
+      return
+    }
+    const typeMap = {
+      hosting: '广告托管',
+      custom: '自主开发'
+    }
+    wx.showToast({
+      title: '稍后上线',
+      icon: 'none'
+    })
+  }
+})

miniprogram/page/ad/index.json

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

miniprogram/page/ad/index.wxml

@@ -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.wxss

@@ -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;
+}

miniprogram/page/ad/optimize-ad/home-large-card/home-large-card.js

@@ -0,0 +1,53 @@
+// 广告调优测试-首页大卡
+Page({
+  data: {
+    theme: 'light'
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '广告调优测试-首页大卡',
+      path: 'page/ad/optimize-ad/home-large-card/home-large-card'
+    }
+  },
+
+  onUnload() {
+    if (wx.offThemeChange) {
+      wx.offThemeChange()
+    }
+  },
+
+  onLoad(options) {
+    this.setData({
+      theme: getApp().globalData.theme || 'light'
+    })
+
+    if (wx.onThemeChange) {
+      wx.onThemeChange(({ theme }) => {
+        this.setData({ theme })
+      })
+    }
+  },
+
+  /**
+   * 广告加载成功回调
+   */
+  onadload(e) {
+    console.log('广告加载成功:', e)
+  },
+
+  /**
+   * 广告加载失败回调
+   */
+  onaderror(e) {
+    console.log('广告加载失败:', e)
+  },
+
+  /**
+   * 广告视频结束回调
+   */
+  onvideoended(e) {
+    console.log('广告视频播放结束:', e)
+  }
+})
+

miniprogram/page/ad/optimize-ad/home-large-card/home-large-card.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "广告调优测试-首页大卡",
+  "renderer": "webview"
+}
+

miniprogram/page/ad/optimize-ad/home-large-card/home-large-card.wxml

@@ -0,0 +1,56 @@
+<!--广告调优测试-首页大卡-->
+<view class="container" data-weui-theme="{{theme}}">
+  <!-- 广告调优测试-首页大卡 -->
+  <view class="ad-section">
+    <text class="ad-label">广告调优测试-首页大卡</text>
+    <ad-custom 
+      unit-id="adunit-c34f3ed02619f043" 
+      class="ad-unit"
+      bindload="onadload"
+      binderror="onaderror" 
+      bindvideoended="onvideoended"
+    ></ad-custom>
+  </view>
+
+  <!-- 填充内容 -->
+  <view class="content-section">
+    <text class="content-title">内容区域</text>
+    <view class="content-item">
+      <text class="content-text">这是一段填充内容，用于页面展示。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">此页面确保只有一个广告组件，符合一个页面只有一个广告的要求。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">小程序广告是微信官方推出的广告组件，支持多种广告形式。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">广告调优可以帮助开发者优化广告展示效果，提升用户体验。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">首页小卡广告适合在首屏位置展示，能够获得更高的曝光率。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">合理的广告布局可以在不影响用户体验的前提下实现流量变现。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">广告组件会根据用户特征自动匹配最合适的广告内容。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">开发者可以通过回调函数监听广告的加载状态和用户交互行为。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">广告收益与曝光量、点击率等多种因素相关。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">建议在合适的场景下展示广告，避免过度打扰用户。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">持续优化广告展示策略，可以获得更好的变现效果。</text>
+    </view>
+    <view class="content-item">
+      <text class="content-text">感谢您使用微信广告服务，祝您使用愉快！</text>
+    </view>
+  </view>
+</view>
+

miniprogram/page/ad/optimize-ad/home-large-card/home-large-card.wxss

@@ -0,0 +1,60 @@
+/* 广告调优测试-首页大卡 */
+.container {
+  display: block !important;
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  min-height: auto;
+  justify-content: initial;
+}
+
+.ad-section {
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+}
+
+.ad-label {
+  display: block;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx;
+  margin: 0;
+  text-align: center;
+  background-color: #fff;
+}
+
+.ad-unit {
+  width: 100%;
+  display: block;
+}
+
+.content-section {
+  margin: 0;
+  padding: 20rpx;
+  background-color: #fff;
+}
+
+.content-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+
+.content-item {
+  margin: 20rpx 0;
+  padding: 20rpx;
+  background-color: #fafafa;
+  border-radius: 8rpx;
+  border-left: 4rpx solid #007aff;
+}
+
+.content-text {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #666;
+}