注意：

1、使用低代码要一次性把整个页面制作完，不能今天做一点明天接着做这样可能打不开文件 2、注意在转换成html和css文件之前备份.visual文件，一旦转换为html和css文件就不能再转换成visual文件了，而且有问题也可以直接修改

3、预览和实时页面都要打开，依据预览页面制作

 面向JS的低代码开发

1.创建工程

1.打开工程创建向导(File > New >Create Project) ,创建一个新工程。
2.工程模板选择"Empty Ability",然后点击Next进行下一步。
3.填写工程配置信息，打开"Enable Super Visual"开关，UI Syntax选择"JS"，其余配置保持默认即可。
4.最后在工程配置信息界面，点Fish,完成工程创建。

2. 创建第一个页面

开发者可在工程中”js>pages目录下，单击鼠标右键，选择New > JS Visual”新建低代码页面。

创建低代码页面时（如图1所示），系统会自动生成对应的visual文件和js文件，两种文件的目录结构一致。其中，visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发。而js文件描述了低代码页面的行为逻辑，定义了页面里所用到的所有的逻辑关系，比如数据、事件等。

注意：使用低代码页面开发时，其关联js文件的同级目录，即js>default>pages>page目录下不能包含hml或css文件，否则编译报错。

低代码页面创建成功后的界面如图2所示，由组件栏、组件树、画布、功能面板以及属性样式栏五部分组成。开发者在低代码页面进行的相关操作，均会保存到visual文件中。

2.1 删除组件

打开"index.visual"文件，选中画布中的组件，单击鼠标右键,选择Delete删除画布原有模板组件

2.2 增加组件（这里以Div组件为例）

• 选中UI Control中的Div组件，将其拖至画布。
• 点击右侧属性样式栏中的样式图标(General)，设置Div组件的高度Height为100%，使其占满屏幕;
• 点击右侧属性样式栏中的样式图标(Flex)， 设置Div组件的FlexDirection样式为column,使Div的主轴垂直;设置Div组件的JustifyContent样式为center,使得其子组件在主轴上居中显示;设置Div组件的Alignltems样式为center, 使得其子组件在交叉轴上居中显示。

2.3 添加文本

• 选中UI Control中的Text组件，将其拖至Div组件的中央区域。
• 点击右侧属性样式栏中的属性图标(Properties),设置Text组件的Content属性为“低代码入门” ;
• 点击右侧属性样式栏中的样式图标。(Feature) ,设置组件的FontSize样式为60px, 使得其文字放大;设置组件的TextAlign样式为center, 使得组件文字居中显示。
• 再选中画布上的Text组件，拖动放大。

2.4 添加按钮

• 选中UI Control中的Button组件，将其拖至Text组件下面。
• 点击右侧属性样式栏中的属性图标(Properties),设Button组件的Value属性为"一键入门";
• 点击右侧属性样式栏中的样式图标 (Feature) , 设置组件的FontSize样式为40px,使得其文字放大;
  再选中画布上的Button组件，拖动放大。

3、创建第二个页面

在"Project"窗口，打开"entry > src > main > js > MainAbility",右键点击pages"文件夹，选择"New >Visual",命名为"second", 单击Finish",即完成第二个页面的创建。
 

3.1 页面跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。
1.第一个页面跳转到第二个页面。
在第一个页面中， 跳转按钮绑定onclick方法， 点击按钮时，跳转到第二页。需同时处理js文件及visual文件

• index.js示例如下：

export default {    onclick (){ router.push({uri:'pages/second/second',})    }}

• “index.viusal”:打开"index.visual", 选中画布上的Button组件。点击右侧属性样式栏中的事件图标(Events) ,鼠标点击Click事件的输入框，选择onclick,如下所示:

  

2.第二个页面返回到第一个页面。
在第二个页面中，返回按钮绑定back方法，点击按钮时，返回到第一页。
需同时处理js文件及visua文件。

• second.js示例如下：

export default {   back() {router.back()   }}

• “second.viusal”: 打开"second.visual", 选中画布上的Button组件。 点击右侧属性样式栏中的事件图标(Events), 鼠标点击Click事件的输入框，选择back。