1 编写静态页面
## 编写静态页面
本开发手册中仅关注核心功能实现，并没有提供样式。
示例文件中提供有少数基础样式。
### 1.1 准备基础页面框架
>i 我们需要首先编写完成静态页面，再做相应配置。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<meta name="viewport" content="width=1920,user-scalable=no,target-densitydpi=device-dpi,minimal-ui,viewport-fit=cover">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="/data/plugin/template/public/css/clear.css">
<script src="/data/plugin/template/public/js/jquery.js"></script>
<script>
window.USP = "认证站地址";
</script>
<script src="认证站地址/api/sdk/xy.sdk.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var BaseData = {};
BaseData.reg = '[普通注册]';
BaseData.regvip = '[贵宾注册]';
BaseData.money = '[充值金额]';
BaseData.action = '[处理地址]';
BaseData.template = '[素材主键]';
</script>
<script src="/data/plugin/template/public/js/main.js"></script>
</body>
</html>
```
>i 如果你需要引入新的样式或脚本，可以直接在head或body中引入。
>w clear.css中有部分重置样式，你可以按需求覆盖它。
### 1.2 编写内容展示区
在`id`为`app`的标签内新增
```html
<div></div>
```
里面可以放任何的元素标签。
这里面的内容是页面默认展示的所有内容。
### 1.3 编写注册选择弹窗
在`id`为`app`的标签内新增
```html
<div class="dialog regselect">
<div class="vipreg">普通注册</div>
<div class="svipreg">贵宾注册</div>
</div>
```
> dialog类名里面出现的所有类名都是基础类名，你可以根据需要增加，但不可以删除。
dialog类名里面的内容层级可以移动，保证存在即可，否则会影响功能的使用。
你可以在里面增加更多元素。
dialog默认必须为隐藏状态，这个需要你来设定。将display设置为none即可。
如下内容也是可以的。
>i 本对话框在用户开始注册且普通注册和贵宾注册同时开启时出现
```html
<div class="dialog regselect newclass">
<div>选择注册方式</div>
<span class="vipreg btn">普通</span>
<span class="svipreg btn">贵宾</span>
</div>
```
### 1.4 编写手游下载选择弹窗
>i 本对话框在推广类型为游戏且同时拥有两个平台下载地址时出现
在`id`为`app`的标签内新增
```html
<div class="dialog gamedown">
<div class="android">安卓下载</div>
<div class="ios">苹果下载</div>
</div>
```
编写规则同 1.3 注册选择弹窗。
### 1.5 编写游戏服选择弹窗
>i 本对话框在推广类型为游戏且同时拥有两个平台下载地址时出现
在`id`为`app`的标签内新增
```html
<div class="dialog serverselect">
<div class="server-list newserver">
<div class="btn">最新游戏服</div>
</div>
<div class="server-list">
<!-- 以下为自动生成的游戏服列表，结构不可改变 -->
<div class="btn">游戏1服</div>
<div class="btn">游戏2服</div>
</div>
</div>
```
编写规则同 1.3 注册选择弹窗。
>w server-list newserver btn 这些都是固定类名，可以增加但不能省略。
第二个 server-list 中的内容为开发时的填充内容，实际渲染时会情况并重新生成。
### 1.6 支付方式选择弹窗
在`id`为`app`的标签内新增
```html
<div class="dialog gotopay">
<div class="paytype-list">
<!-- 以下为自动生成的支付方式列表，结构不可改变 -->
<div class="btn">支付宝</div>
</div>
<div class="pay-info">充值金额<span>0</span>元</div>
<div class="paynow">立即支付</div>
</div>
```
>w 支付方式列表同游戏服列表，只能改变样式，不可改变结构。
### 1.7 支付成功弹窗（无奖励）
>i 本弹窗在贵宾注册成功后且无奖励时会出现
在`id`为`app`的标签内新增
```html
<div class="dialog paysuccess">
<div class="paySuccessBtn">确定</div>
</div>
```
### 1.8 支付成功弹窗（有奖励）
在`id`为`app`的标签内新增
```html
<div class="dialog paysuccess2">
<div class="jiangli-box">
<!-- 以下为自动生成的奖励内容，结构不可改变 -->
<div>点券<span>×10</span></div>
<div>平台币<span>×10</span></div>
<div>积分<span>×10</span></div>
</div>
<div class="paySuccessBtn">确定</div>
</div>
```
>w jiangli-box 中最多有实例中的三条内容。结构不可更改。
### 1.9 支付失败弹窗
在`id`为`app`的标签内新增
```html
<div class="dialog payerror">
<div class="payErrorBtn">确定</div>
</div>
```
### 1.10 登录后弹窗
>i 本弹窗在登录后或注册后会出现
在`id`为`app`的标签内新增
```html
<div class="dialog logined">
<span class="XYUS-UNAME"></span>
<div class="joingame">进入游戏</div>
<div class="XYUS-LOGOUT">注销</div>
</div>
```