网站描述标签,网站建设和编程的区别,綦江网站,曹鹏wordpress构建第一个JS应用#xff08;FA模型#xff09;
创建JS工程 若首次打开DevEco Studio#xff0c;请点击Create Project创建工程。如果已经打开了一个工程#xff0c;请在菜单栏选择File New Create Project来创建一个新工程。 选择Application应用开发#xf…构建第一个JS应用FA模型
创建JS工程 若首次打开DevEco Studio请点击Create Project创建工程。如果已经打开了一个工程请在菜单栏选择File New Create Project来创建一个新工程。 选择Application应用开发本文以应用开发为例Atomic Service对应为元服务开发选择模板“Empty Ability”点击Next进行下一步配置。 进入配置工程界面Compile SDK选择“3.0.0(API 8)”Compile SDK选择“3.1.0(API 9)”时注意同步选择 Model 为“FA”此处以选择“3.0.0(API 8)”为例Language选择“JS”其他参数保持默认设置即可。 说明 DevEco Studio V2.2 Beta1及更高版本支持使用JS低代码开发方式。 低代码开发方式具有丰富的UI界面编辑功能通过可视化界面开发方式快速构建布局可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 如需使用低代码开发方式请打开上图中的Enable Super Visual开关。 点击Finish工具会自动生成示例代码和相关资源等待工程创建完成。
JS工程目录结构 entryHarmonyOS工程模块编译构建生成一个HAP包。 src main js用于存放js源码。src main js MainAbility应用/服务的入口。src main js MainAbility i18n用于配置不同语言场景资源内容比如应用文本词条、图片路径等资源。src main js MainAbility pagesMainAbility包含的页面。src main js MainAbility app.js承载Ability生命周期。src main resources用于存放应用/服务所用到的资源文件如图形、多媒体、字符串、布局文件等。关于资源文件详见资源限定与访问。src main config.json模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明详见应用配置文件FA模型。build-profile.json5当前的模块信息、编译信息配置项包括buildOption、targets配置等。其中targets中可配置当前运行环境默认为HarmonyOS。hvigorfile.ts模块级编译构建任务脚本开发者可以自定义相关任务和代码实现。 build-profile.json5应用级配置信息包括签名、产品配置等。hvigorfile.ts应用级编译构建任务脚本。
构建第一个页面 使用文本组件。 工程同步完成后在“Project”窗口点击“entry src main js MainAbility pages index”打开“index.hml”文件设置Text组件内容。“index.hml”文件的示例如下 !-- index.hml --
div classcontainertext classtitleHello World/text
/div添加按钮并绑定onclick方法。 在默认页面基础上我们添加一个button类型的input组件作为按钮响应用户点击从而实现跳转到另一个页面。“index.hml”文件的示例代码如下 !-- index.hml --
div classcontainertext classtitleHello World/text!-- 添加按钮值为Next并绑定onclick方法--input classbtn typebutton valueNext onclickonclick/input
/div设置页面样式。 在“Project”窗口点击“entry src main js MainAbility pages index”打开“index.css”文件可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“index.css”文件的示例如下 /* index.css */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;
}.title {font-size: 100px;font-weight: bold;text-align: center;width: 100%;margin: 10px;
}.btn {font-size: 60px;font-weight: bold;text-align: center;width: 40%;height: 5%;margin-top: 20px;
}在编辑窗口右上角的侧边工具栏点击Previewer打开预览器。第一个页面效果如下图所示
构建第二个页面 创建第二个页面。 在“Project”窗口打开“entry src main js MainAbility”右键点击“pages”文件夹选择“New Page”命名为“second”点击“Finish”即完成第二个页面的创建。可以看到文件目录结构如下 添加文本及按钮。 参照第一个页面在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“second.hml”文件的示例如下 !-- second.hml --
div classcontainertext classtitleHi there/text!-- 添加按钮值为Back并绑定back方法--input classbtn typebutton valueBack onclickback/input
/div设置页面样式**。**“second.css”文件的示例如下 /* second.css */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;
}.title {font-size: 100px;font-weight: bold;text-align: center;width: 100%;margin: 10px;
}.btn {font-size: 60px;font-weight: bold;text-align: center;width: 40%;height: 5%;margin-top: 20px;
}实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面从而实现跳转。使用页面路由请导入router模块。 第一个页面跳转到第二个页面。 在第一个页面中跳转按钮绑定onclick方法点击按钮时跳转到第二页。“index.js”示例如下 // index.js
// 导入页面路由模块
import router from ohos.router;export default {onclick: function () {router.push({url: pages/second/second})}
}第二个页面返回到第一个页面。 在第二个页面中返回按钮绑定back方法点击按钮时返回到第一页。“second.js”示例如下 // second.js
// 导入页面路由模块
import router from ohos.router;export default {back: function () {router.back()}
}打开index文件夹下的任意一个文件点击预览器中的按钮进行刷新。效果如下图所示
使用真机运行应用
运行HarmonyOS应用可以使用远程模拟器和物理真机设备区别在于使用远程模拟器运行应用不需要对应用进行签名。接下来将以物理真机设备为例介绍HarmonyOS应用的运行方法关于模拟器的使用请参考使用Remote Emulator运行应用/服务。 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求可查看使用本地真机运行应用/服务。 点击File Project Structure… Project SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”点击界面提示的“Sign In”使用华为帐号登录。等待自动签名完成后点击“OK”即可。如下图所示 在编辑窗口右上角的工具栏点击按钮运行。效果如下图所示
rmonyOS**”和“Automatically generate signature”点击界面提示的“Sign In”使用华为帐号登录。等待自动签名完成后点击“OK”即可。如下图所示 在编辑窗口右上角的工具栏点击[外链图片转存中…(img-mrSa8YY2-1703301325564)]按钮运行。效果如下图所示
