页面结构与组成

引用

引用第三方或项目中自定义的样式或脚本文件；编译时会自动根据引用文件的后缀判断文件类型、例如：

引用 MyJs.jsx
引用 "./static/css/mys.css"
引用 "http://www.xxx.com/a.js"

页头

定义页面中的标题、语言、编码、关键字、作者等等信息；例如：

页头 标题 = "这是网站标题"
    编码 = "UTF-8"
    语言 = "zh-Cn"
结束 页头

样式

定义页面中所有可视化、可见的内容、组件的外观、排列顺序、尺寸大小、位置等；在网站开发中样式的使用较多；例如：

' 默认写法
样式 样式一
    宽度 = 100px
    高度 = 32px
    背景颜色 = #ccc
结束 样式

' 与原生混合编写
样式 样式二
    宽度 = 100px
    height = 32px
    border = "1px #ccc solid"
    line-height: 45px;
    box-shadow: none;
结束 样式

' 也可像原生一样写在一排、使用分号“;”隔开
样式 样式三
    宽度:100px;高度:32px;line-height: 45px;
结束 样式

' 使用原生选择器、只需要将名称使用双引号包裹即可
样式 ".p-box > *"
    宽度 = 100px
    边距顶 = 10px
    边距底 = 10px
结束 样式

页体

定义页面的主体、所有可视组件、标签、基础元素都必须放在页体中使用；页体的主要作用是管理组件的存放；而样式主要负责对放在页体中的组件进行渲染、美化、排版。

例如：

页体 类型="Body"
    <容器 类="页面主体">
        <图像 地址="./static/logo.jpg" 内联样式="宽度:100px;高度:100px;" />
        <容器>
            欢迎使用 <段 内联样式="颜色:#ff3636;字体粗细:bold;">{Text}</段> 网站开发插件
        </容器>
        <容器>{Msg}</容器>
        <按钮 类="按钮样式" 被单击="按钮1被单击()">点击我</按钮>
    </容器>
结束 页体

在页体中也支持使用原生HTML标签：

<div class="style1">
    <div style="color:red;">我是DIV标签</div>
    <div>{Nt}</div>
    <button onclick="NativeBtnOnClick">I is Button</button>
</div>

模板变量

模板变量可用于在页体中便捷显示数据、而不需要手动操作DOM节点、模板变量无需定义；只需要在页体中指定位置使用花括号包裹指定字符串即可；即使用{ }花括号包裹的字符串即为模板变量、当在函数中修改该变量的值时、系统将同步更新页面中的值。

模板变量可用于

1.显示普通文本内容

<容器>
    欢迎使用 <段 内联样式="颜色:#ff3636;字体粗细:bold;">{Text}</段> 网站开发插件
</容器>
<div>{Nt}</div>

2.双向绑定 input textarea 标签的输入值

双向绑定需使用 m- 前缀；后跟 value 属性名称；
当用户在编辑框中输入指定内容时；输入的内容将会自动赋值给绑定的变量。
<输入框 值="{InputValue}" 提示文本="请输入内容" />
<编辑框 m-value="{TextValue}" 提示文本="请输入多行内容" />

3.绑定类及内联样式Style的值

当在函数中修改 DivCls 的值时、该容器的样式类也将随之改变。
<容器 类="{DivCls}">
    <容器 内联样式="颜色:{TextColor}">当在函数中修改 TextColor 变量值为 red 时、这段内容文本颜色将会变成红色。 </容器>
</容器>

使用模板变量时需注意：模板变量只能独立存在于标签位置处；例如上方的 Text、Nt 前后不能含有任何其它文本或字符串、且变量名称与花括号之间不能有任何空格！

函数

用于数据处理、与用户交互；接收用户的操作、例如：点击按钮。

事件

监听页面的改变、加载。