Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
72d1fbf8
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
72d1fbf8
编写于
8月 23, 2022
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
ad-interactive: 增加互动广告组件
上级
27ab45eb
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
132 addition
and
0 deletion
+132
-0
docs/component/ad-interactive.md
docs/component/ad-interactive.md
+132
-0
未找到文件。
docs/component/ad-interactive.md
0 → 100644
浏览文件 @
72d1fbf8
## 互动广告
## 简介
互动广告是DCloud联合三方服务商为开发者提供新的广告场景增值服务。开发者在App中放置入口,用户点击入口参与权益化、趣味性的活动。
**平台差异说明**
|App |H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序|快手小程序 |京东小程序 |
|:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√(3.5.5+) |√(3.5.5+) |√(3.5.5+) |x |x |x |x |x |x |x |x |
**开通配置广告**
[
开通广告步骤详情
](
https://uniapp.dcloud.net.cn/uni-ad.html#start
)
## 语法
`<ad-interactive></ad-interactive>`
**属性说明**
|属性名 |类型 |默认值 |说明 |
|:- |:- |:- |:- |
|adpid |String | |广告位id |
|open-page-path |String | |点击广告后需要打开的webview页面路径|
|v-slot:default="{data, loading, error}"| | |组件内部广告加载状态和加载错误信息 |
|@load |EventHandle|加载事件 | |
|@error |EventHandle|错误事件 | |
### 简单示例
```
html
<template>
<view>
<!-- 互动广告组件, 3.5.5+,目前仅支持微信小程序 -->
<!-- 用户点击组件后将打开广告页面,参见属性 open-page-path -->
<ad-interactive
adpid=
"1000000001"
v-slot:default=
"{data, loading, error}"
open-page-path=
"/pages/ad-interactive-webview/ad-interactive-webview"
>
<view
v-if=
"data"
>
<!-- 可以自定义此图片,组件提供了默认素材,通过 uni-ad 后台配置 -->
<image
:src=
"data.imgUrl"
style=
"width: 128px; height: 72px;"
></image>
</view>
</ad-interactive>
</view>
</template>
```
注意:需要添加依赖页面
[
open-page-path
](
#openpagepath
)
### 完整示例
```
html
<template>
<view
class=
"content"
>
<!-- 互动广告组件, 3.5.5+,目前仅支持微信小程序 -->
<!-- 用户点击组件后将打开广告页面,参见属性 open-page-path -->
<ad-interactive
adpid=
"1000000001"
v-slot:default=
"{data, loading, error}"
@
load=
"onadload"
@
error=
"onaderror"
open-page-path=
"/pages/ad-interactive-webview/ad-interactive-webview"
>
<view
v-if=
"loading"
>
Loading
</view>
<view
v-if=
"data"
>
<!-- 可以自定义此图片,组件提供了默认素材,通过 uni-ad 后台配置 -->
<image
:src=
"data.imgUrl"
style=
"width: 128px; height: 72px;"
></image>
</view>
<view
v-if=
"error"
>
{{error.errMsg}}
</view>
</ad-interactive>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
}
},
methods
:
{
onadload
(
e
)
{
console
.
log
(
'
广告数据加载成功
'
);
},
onaderror
(
e
)
{
// 广告加载失败
console
.
log
(
"
onaderror
"
,
e
.
errCode
,
e
.
errMsg
);
}
}
}
</script>
```
### open-page-path 页面代码@openpagepath
组件的
`open-page-path`
属性所需页面,点击广告后将打开此页面
在项目的pages目录上右键,新增
`ad-interactive-webview.vue`
页面,并复制替换为下面代码
```
html
<template>
<web-view
:src=
"url"
></web-view>
</template>
<script>
export
default
{
data
()
{
return
{
url
:
''
}
},
onLoad
(
options
)
{
if
(
options
&&
options
.
url
)
{
this
.
url
=
decodeURIComponent
(
options
.
url
);
}
}
}
</script>
```
## 接入步骤
1.
开通并
[
申请
](
https://uniapp.dcloud.net.cn/
)
广告位
3.
在需要展示广告的地方放入
`<ad-interactive></ad-interactive>`
组件代码,此广告可作为悬浮红包使用,设置组件样式 fixed 定位即可
4.
在项目中新增
[
ad-interactive-webview
](
#openpagepath
)
页面
运行到微信小程序时需要添加request合法域名和业务域名白名单
1.
登陆
[
微信公众平台
](
https://mp.weixin.qq.com/
)
,左侧栏找到
`开发管理`
并点击 开发设置->服务器域名
2.
新增
`request合法域名`
:
`https://wxac1.dcloud.net.cn`
3.
新增
`业务域名`
:
`https://engine.dcad01.com`
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录