鸿蒙系统大文件夹里的应用（鸿蒙操作系统应用笔记211109B）
鸿蒙系统大文件夹里的应用（鸿蒙操作系统应用笔记211109B）☀️☀️4.1，打开“page.visual”文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。☀️4，这第一个页面内有一个容器、文本和一个按钮，通过Div、Text和Button组件来实现。☀️1，首先，删除工程运行默认的入口文件夹：“entry > src > main > js> default > pages > index”文件夹。☀️2，在工程窗口，选择工程中的“entry > src > main > js > default > pages”，单击鼠标右键，选择“New > JS Visual”。☀️3，创建完成后，点击提示框中的“确认”按钮，可以看到生成的“entry > src > main > supervisual> default > p
使用JS以元件界面开发方式实现简单页面跳转。☀️元件界面开发方式，即通过可视化界面开发方式快速构建布局、编辑且用户界面，可有效降低用户的上手成本并提升用户构建用户界面的效率。
☀️注意：使用开物室V2.2 Beta1及更高版本。元件界面开发功能适用于Phone和Tablet设备的JS工程，且compileSdkVersion必须为6及以上。
一，创建JS工程☀️1，创建一个新工程，选择支持Phone/Tablet的模板，如Empty Ability。
☀️2，在工程配置向导中，选择语言为JS，设备类型选择Phone/Tablet，其他参数根据实际需要设置即可，然后点击完成等待工程同步完成。
二，创建第一个页面☀️1，首先，删除工程运行默认的入口文件夹：“entry > src > main > js> default > pages > index”文件夹。
☀️2，在工程窗口，选择工程中的“entry > src > main > js > default > pages”，单击鼠标右键，选择“New > JS Visual”。
☀️3，创建完成后，点击提示框中的“确认”按钮，可以看到生成的“entry > src > main > supervisual> default > pages > page > page.visual”的文件目录结构。
☀️4，这第一个页面内有一个容器、文本和一个按钮，通过Div、Text和Button组件来实现。
☀️☀️4.1，打开“page.visual”文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。
☀️☀️4.2，选中UI Control中的Div组件，将其拖至画布。点击右侧属性样式栏中的 常规 样式图标，设置Div组件的高度为100%，使其占满屏幕；点击右侧属性样式栏中的 布局 样式图标，设置Div组件的 布局走向 样式为 纵；设置Div组件的 纵对齐 样式为 居中；设置Div组件的 横对齐 样式为 居中。
☀️☀️4.3，选中UI Control中的Text组件，将其拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标，设置Text组件的内容属性为“Hello World”；点击右侧属性样式栏中的特性样式图标，设置组件的字体大小为60px；设置组件的对齐样式为居中。再选中画布上的Text组件，拖动放大。
☀️☀️4.4，选中UI Control中的Button组件，将其拖至Text组件下面。点击右侧属性样式栏中的属性图标，设置Button组件的值为“继续”，点击右侧属性样式栏中的特性样式图标，设置组件的字体大小样式为39px；再选中画布上的Button组件，拖动放大。
☀️5，创建转向的详情页面
☀️☀️5.1，在工程窗口，选择工程中的“entry > src > main > js > default > pages”，单击鼠标右键，选择“New > JS Visual”。创建完成后，点击提示框中的“确认”按钮，page2.visual文件目录结构。
☀️☀️5.2，详情页面中有一个容器和文本，通过Div、Text组件来实现。
- 同上，删除画布原有模板组件。
- 同上，添加Div组件，并设置Div的样式和属性。
- 选中Text组件，拖至Div组件的中央区域。点击右侧属性样式栏中的属性图标，设置Text组件的内容属性为“Hi there”；点击右侧属性样式栏中的特性样式图标，设置组件的字体大小样式为60px；设置组件的对齐样式为居中。再选中画布上的Text组件，拖动放大。
☀️6，实现页面跳转
☀️☀️6.1，在工程窗口，打开工程中的“entry > src > main > js > default > pages > page > page.js” ，导入router模块，页面路由router根据页面的 网址源 来找到目标页面，从而实现跳转。示例代码如下：
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/page2/page2' // 指定要跳转的页面
})
}
}
☀️☀️6.2，打开“page.visual”，选中画布上的Button组件。点击右侧属性样式栏中的事件图标，鼠标点击Click事件的输入框，选择launch事件。
☀️☀️6.3，使用预览器或模拟器运行项目，查看结果。
恭喜你，至此已成功完成使用JS语言以 元件界面开发方式来实现简单的页面跳转。
