diff --git a/packages/uni-app-plus/src/service/framework/app/subscriber/ad.ts b/packages/uni-app-plus/src/service/framework/app/subscriber/ad.ts
index 17b553c731e60c7e19abcdcd0f26a8e32c0cb5e7..76c5b7394f296e3b40896cbb4376e9e7d3a6a791 100644
--- a/packages/uni-app-plus/src/service/framework/app/subscriber/ad.ts
+++ b/packages/uni-app-plus/src/service/framework/app/subscriber/ad.ts
@@ -1,8 +1,48 @@
 import { registerServiceMethod } from '@dcloudio/uni-core'
 
+const _adDataCache: Record<string, any> = {}
+
+function getAdData(data: any, onsuccess: Function, onerror: Function) {
+  const { adpid, width } = data
+  const key = adpid + '-' + width
+  const adDataList = _adDataCache[key]
+  if (adDataList && adDataList.length > 0) {
+    onsuccess(adDataList.splice(0, 1)[0])
+    return
+  }
+
+  plus.ad.getAds(
+    data,
+    (res) => {
+      const list = res.ads
+      onsuccess(list.splice(0, 1)[0])
+      _adDataCache[key] = adDataList ? adDataList.concat(list) : list
+    },
+    (err) => {
+      onerror({
+        errCode: err.code,
+        errMsg: err.message,
+      })
+    }
+  )
+}
+
 export function subscribeAd() {
-  // view 层通过 UniViewJSBridge.invokeServiceMethod('getAdData', args, function({data})=>{console.log(data)})
   registerServiceMethod('getAdData', (args, resolve) => {
-    // TODO args: view 层传输的参数，处理完之后，resolve:回传给 service，如resolve({data})
+    getAdData(
+      args,
+      (res: any) => {
+        resolve({
+          code: 0,
+          data: res,
+        })
+      },
+      (err: any) => {
+        resolve({
+          code: 1,
+          message: err,
+        })
+      }
+    )
   })
 }
diff --git a/packages/uni-app-plus/src/view/components/ad/index.tsx b/packages/uni-app-plus/src/view/components/ad/index.tsx
index a6813d0ccc5abf2f786e41fb64962f21410ccecd..55d3424afb6979d015a7cb79b537274c813094bf 100644
--- a/packages/uni-app-plus/src/view/components/ad/index.tsx
+++ b/packages/uni-app-plus/src/view/components/ad/index.tsx
@@ -1,5 +1,128 @@
-import { defineBuiltInComponent } from '@dcloudio/uni-components'
+import { Ref, ref, watch, onBeforeUnmount } from 'vue'
+import {
+  defineBuiltInComponent,
+  useCustomEvent,
+  EmitEvent,
+} from '@dcloudio/uni-components'
+import { useNativeAttrs, useNative } from '../../../helpers/useNative'
 
 export default /*#__PURE__*/ defineBuiltInComponent({
   name: 'Ad',
+  props: {
+    adpid: {
+      type: [Number, String],
+      default: '',
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+    dataCount: {
+      type: Number,
+      default: 5,
+    },
+    channel: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const rootRef: Ref<HTMLElement | null> = ref(null)
+    const containerRef: Ref<HTMLElement | null> = ref(null)
+    const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
+    const attrs = useNativeAttrs(props, ['id'])
+    const { position, onParentReady } = useNative(containerRef)
+
+    let adView: ReturnType<typeof plus.ad.createAdView>
+
+    onParentReady(() => {
+      adView = plus.ad.createAdView(Object.assign({}, attrs.value, position))
+      plus.webview.currentWebview().append(adView as any)
+
+      adView.setDislikeListener((data) => {
+        ;(containerRef.value as HTMLElement).style.height = '0'
+        window.dispatchEvent(new CustomEvent('updateview'))
+        trigger('close', {} as Event, data)
+      })
+      adView.setRenderingListener((data) => {
+        if (data.result === 0) {
+          ;(containerRef.value as HTMLElement).style.height = data.height + 'px'
+          window.dispatchEvent(new CustomEvent('updateview'))
+        } else {
+          trigger('error', {} as Event, {
+            errCode: data.result,
+          })
+        }
+      })
+      adView.setAdClickedListener(() => {
+        trigger('adclicked', {} as Event, {})
+      })
+
+      watch(
+        () => position,
+        (position) => adView.setStyle(position),
+        { deep: true }
+      )
+      watch(
+        () => props.adpid,
+        (val) => {
+          if (val) {
+            loadData()
+          }
+        }
+      )
+      watch(
+        () => props.data,
+        (val) => {
+          if (val) {
+            adView.renderingBind(val)
+          }
+        }
+      )
+
+      function loadData() {
+        let args = {
+          adpid: props.adpid,
+          width: position.width,
+          count: props.dataCount,
+        }
+        if (props.channel !== undefined) {
+          ;(args as any).ext = {
+            channel: props.channel,
+          }
+        }
+        UniViewJSBridge.invokeServiceMethod(
+          'getAdData',
+          args,
+          ({ code, data, message }) => {
+            if (code === 0) {
+              adView.renderingBind(data)
+            } else {
+              trigger('error', {} as Event, {
+                errMsg: message,
+              })
+            }
+          }
+        )
+      }
+
+      if (props.adpid) {
+        loadData()
+      }
+    })
+
+    onBeforeUnmount(() => {
+      if (adView) {
+        adView.close()
+      }
+    })
+
+    return () => {
+      return (
+        <uni-ad ref={rootRef}>
+          <div ref={containerRef} class="uni-ad-container" />
+        </uni-ad>
+      )
+    }
+  },
 })