如何使用 AppML
引入脚本、声明应用、指定模型、跑起来的最小步骤。
Key Points四步：引脚本、写页面里的 appml-app 标签、写 model.xml、起一个本地服务器。
第一步：引入脚本
HTML
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>The script must load before <appml-app>; putting it in <head> is simplest. It also works before </body>, since AppML scans the DOM once ready.
第二步：声明应用
HTML
<appml-app src="model.xml"></appml-app>| Attribute | Meaning |
|---|---|
src | XML 模型文件路径 |
app | 用于多应用共存 |
controller | 自定义 JS 控制器文件 |
data | 直接传数据，绕过模型 |
第三步：写模型
XML
<appml>
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city FROM customers</query>
</datasource>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>第四步：起服务器
Bash
# 不能直接双击打开 index.html（file:// 下无法读取 model.xml）
python -m http.server 8000Output
Serving HTTP on 0.0.0.0 port 8000 ...Under file:// the browser blocks fetching local files, so AppML cannot read the model and fails. Serve it over HTTP — the usual reason a page stays blank after following a tutorial.
页面里能放什么
HTML
<h1>我的客户管理</h1>
<!-- 一个应用可以有多块，用 appml-view 指定视图 -->
<appml-app src="model.xml">
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
</appml-app>AppML views (list / form / search) depend on both the model and the framework version, and attribute names differ between versions. Check the CDN version before copying another version's docs.
常见问题
| Symptom | Cause |
|---|---|
| Blank page | 脚本没加载 / 用 file:// 打开 |
| Model not found | src 路径错，或模型不在同目录 |
| No data | query 写错，或数据库配置无效 |
| CORS error | 模型与页面不同源 |
第一步：引入脚本
HTML
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>脚本必须在 <appml-app> 之前加载，放在 <head> 里最省事。放在 </body> 前也行，但 AppML 会在 DOM 就绪后扫描页面。
第二步：声明应用
HTML
<appml-app src="model.xml"></appml-app>| 属性 | 含义 |
|---|---|
| 模型地址 | XML 模型文件路径 |
| 应用名 | 用于多应用共存 |
| 控制器 | 自定义 JS 控制器文件 |
| 数据对象 | 直接传数据，绕过模型 |
第三步：写模型
XML
<appml>
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city FROM customers</query>
</datasource>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>第四步：起服务器
Bash
# 不能直接双击打开 index.html（file:// 下无法读取 model.xml）
python -m http.server 8000Output
Serving HTTP on 0.0.0.0 port 8000 ...file:// 协议下浏览器禁止 fetch 本地文件，AppML 读不到模型就会报错。必须用任意 HTTP 服务器跑起来——这是最常见的「按教程做了但页面空白」的原因。
页面里能放什么
HTML
<h1>我的客户管理</h1>
<!-- 一个应用可以有多块，用 appml-view 指定视图 -->
<appml-app src="model.xml">
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
</appml-app>AppML 的视图（list / form / search）由模型和框架共同决定，不同版本的属性名有差异。用之前先确认 CDN 上的版本号，别照抄另一个版本的文档。
常见问题
| 现象 | 原因 |
|---|---|
| 空白页 | 脚本没加载 / 用 file:// 打开 |
| 找不到模型 | src 路径错，或模型不在同目录 |
| 没有数据 | query 写错，或数据库配置无效 |
| 跨域错误 | 模型与页面不同源 |