构建 AIP 页面

经过前面的描述，相信你对 AIP 已经有了大致的了解，你也一定对 AIP 页面的开发方式有了兴趣。

通过阅读这章节，你将学会如何使用 AIP 快速构建常用的页面，并学会基础技巧。当然 AIP 十分简单，如果你有前端框架的使用经验，我相信你可以在 10 分钟内就学会它。下面是一个简单的上手样例。

1. Hello AIP

用你喜欢的任何编辑器，新建一个空白的 HTML 页面，输入以下代码：

<!DOCTYPE html>
<html aip>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,minimum-scale=1,initial-scale=1"
        />
        <link
            rel="stylesheet"
            type="text/css"
            href="https://unpkg.byted-static.com/latest/byted-fangyuan/aip/dist/aip.css"
        />
        <script
            defer
            src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip/dist/aip.iife.js"
        ></script>
    </head>
    <body>
        <aip-text aip-state="{ message: 'Hello AIP' }">{{ message }}</aip-text>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后将页面用浏览器打开，你就已经进入了 AIP 的世界了！

2. 添加样式

通过在head标签内添加<style aip-custom></style>标签，并写入 CSS 样式代码即可。注意：该style标签仅允许出现一次。

例如写入如下样式后：

<style aip-custom>
    .h1 {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 40px;
    }
</style>

1
2
3
4
5
6
7

即可在body内使用class="h1"定义指定元素的样式，如：

<aip-text class="h1" aip-state="{ message: 'Hello AIP' }"> {{ message }} </aip-text>

3. 添加图片

我们将使用<aip-image>标签即可在页面内添加图片，例如：

<aip-image
    src="https://source.unsplash.com/random/600x400"
    width="600"
    height="400"
></aip-image>

1
2
3
4
5

4. 使用组件

AIP 页面内的所有所有元素都是组件，有效的视图内容都必须由「AIP 组件」模块内声明的组件组成。

AIP 组件是由 AIP 官方提供的基于广告场景的 Web Components 组件库，提供了一系列开箱即用的组件，用于广告页面的快速搭建。

例如需要添加一个轮播图滑块组件，只需要在head标签内添加：

<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-swiper/aip-swiper.iife.js"
></script>

1
2
3
4

即可在 body 内使用<aip-swiper>标签添加轮播内容，例如：

<aip-swiper
    autoplay
    interval="1000"
    current-item-id="1"
    indicator-dots="true"
    indicator-color="white"
    indicator-active-color="black"
    aip-state="{
        mode:'normal',
        imgs: [
            'https://p6-orange.byteorg.com/obj/ad-tetris-site/aip/official_site/image_demo.jpeg',
            'https://p6-orange.byteorg.com/obj/ad-tetris-site/aip/official_site/image_demo1.jpeg'
        ]
    }"
>
    <aip-swiper-item aip-for="(img, index) in imgs" [key]="index" [item-id]="index">
        <aip-image width="750" height="375" [src]="img" [mode]="mode"></aip-image>
    </aip-swiper-item>
</aip-swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 事件处理

通过使用中 aip-on 指令来给元素绑定事件，AIP 支持常规的 HTML 事件，比如 aip-on:click。

赋值给 aip-on 指令的属性值会在触发事件后立即执行，对数据的操作是十分简单的，AIP 可以智能的追踪到数据变更，并更新对应的视图。

例如下面例子：

<div aip-state="{ color: 'pink' }" aip-bind:style="{color}">
    <aip-text aip-if="color === 'red'">Red</aip-text>
    <aip-text aip-else-if="color === 'green'">Green</aip-text>
    <aip-text aip-else>Pink</aip-text>
    <aip-view>
        <aip-button width="300" height="60" aip-on:click="color = 'red'">
            按钮1: 文本改为红色
        </aip-button>
        <aip-button width="300" height="60" aip-on:click="color = 'green'">
            按钮2: 文本改为绿色
        </aip-button>
    </aip-view>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

点击「按钮 1」可将粉色文本改成红色，点击「按钮 2」可将文本改成绿色

页面效果预览

集合上述 1 ～ 5 步的所有代码的 AIP 页面如下方 Playground 所示：

你可以直接在下方左侧代码区查看或编辑；也可以复制后直接在浏览器中打开相应的 HTML 文件（需要将预览视图设置成移动端效果）。

AIP 语法校验

AIP 提供了官方 VSCode 插件open in new window，用于 AIP 页面的语法规则校验。如果开发者使用 VSCode 编写 AIP 页面，在安装该插件之后，会自动对 html 文件进行 AIP 语法校验。

下一步

通过上面的步骤，你很快就得到了一个使用 AIP 标准编写的页面，接下来你将可以把这个页面提交给 AIP 的相关链路服务进行广告页面的投放。

# 构建 AIP 页面

# 1. Hello AIP

# 2. 添加样式

# 3. 添加图片

# 4. 使用组件

# 5. 事件处理

# 页面效果预览

# 相关限制

# AIP 语法校验

# 下一步