HarmonyOS Developer——鸿蒙【构建第一个JS应用(FA模型)】

  • 创建JS工程

  • JS工程目录结构

  • 构建第一个页面

  • 构建第二个页面

  • 实现页面间的跳转

  • 使用真机运行应用

说明

为确保运行效果,本文以使用DevEco Studio 3.1 Release版本为例,点击此处获取下载链接。

创建JS工程

  1. 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择File > New > Create Project来创建一个新工程。
  2. 选择Application应用开发(本文以应用开发为例,Atomic Service对应为元服务开发),选择模板“Empty Ability”,点击Next进行下一步配置。

在这里插入图片描述

  1. 进入配置工程界面,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开关。

  1. 点击Finish,工具会自动生成示例代码和相关资源,等待工程创建完成。

在这里插入图片描述

  • entry:HarmonyOS工程模块,编译构建生成一个HAP包。

    • src > main > js:用于存放js源码。
    • src > main > js > MainAbility:应用/服务的入口。
    • src > main > js > MainAbility > i18n:用于配置不同语言场景资源内容,比如应用文本词条、图片路径等资源。
    • src > main > js > MainAbility > pages:MainAbility包含的页面。
    • 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:应用级编译构建任务脚本。

构建第一个页面

  1. 使用文本组件。

    工程同步完成后,在“Project”窗口,点击“entry > src > main > js > MainAbility > pages> index”,打开“index.hml”文件,设置Text组件内容。“index.hml”文件的示例如下:

    <!-- index.hml -->
    <div class="container">    
    <text class="title">        Hello World    
    </text>
    </div>
    
  2. 添加按钮,并绑定onclick方法。

    在默认页面基础上,我们添加一个button类型的input组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“index.hml”文件的示例代码如下:

    <!-- index.hml --><div class="container">    <text class="title">        Hello World    </text>
    <!-- 添加按钮,值为Next,并绑定onclick方法-->    <input class="btn" type="button" value="Next" onclick="onclick"></input></div>
    
  3. 设置页面样式。

    在“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;
    }
    
  4. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:

image.png

构建第二个页面

  1. 创建第二个页面。

    在“Project”窗口,打开“entry > src > main > js > MainAbility”,右键点击“pages”文件夹,选择“New > Page”,命名为“second”,点击“Finish”,即完成第二个页面的创建。可以看到文件目录结构如下:

image.png

  1. 添加文本及按钮。

    参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“second.hml”文件的示例如下:

    <!-- second.hml --><div class="container">    <text class="title">        Hi there    </text>
    <!-- 添加按钮,值为Back,并绑定back方法-->    <input class="btn" type="button" value="Back" onclick="back"></input></div>
    
  2. 设置页面样式 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模块。

  1. 第一个页面跳转到第二个页面。

    在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“index.js”示例如下:

    // index.js// 导入页面路由模块import router from '@ohos.router';
    export default {    onclick: function () {        router.push({            url: "pages/second/second"        })    }}
    
  2. 第二个页面返回到第一个页面。

    在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“second.js”示例如下:

    // second.js// 导入页面路由模块import router from '@ohos.router';
    export default {    back: function () {        router.back()    }}
    
  3. 打开index文件夹下的任意一个文件,点击预览器中的按钮进行刷新。效果如下图所示:

image.png

使用真机运行应用

运行HarmonyOS应用可以使用远程模拟器和物理真机设备,区别在于使用远程模拟器运行应用不需要对应用进行签名。接下来将以物理真机设备为例,介绍HarmonyOS应用的运行方法,关于模拟器的使用请参考使用Remote Emulator运行应用/服务。

  1. 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求,可查看使用本地真机运行应用/服务。
  2. 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”,点击界面提示的“Sign In”,使用华为帐号登录。等待自动签名完成后,点击“OK”即可。如下图所示:

image.png

在编辑窗口右上角的工具栏,点击按钮运行。效果如下图所示

image.png

恭喜您已经使用JS语言开发(FA模型)完成了第一个HarmonyOS应用,快来探索更多的HarmonyOS功能吧。


华为鸿蒙官方文档地址:构建第一个JS应用(FA模型)-快速入门-入门-HarmonyOS应用开发


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/209941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虾皮什么商品好卖

在虾皮&#xff08;Shopee&#xff09;平台上&#xff0c;有许多商品类别都表现出了较好的销售情况。然而&#xff0c;随着时间和地区的变化&#xff0c;热销商品也会有所不同。本文将介绍一些在虾皮平台上表现较好的商品类别&#xff0c;并提供一些建议&#xff0c;帮助您在虾…

交换机基本原理和配置

目录 一、数据链路层功能 二、交换机的工作原理 三、交换机的四大功能 一、数据链路层功能 位于网络层与物理层之间 数据链路的建立、维护与拆除帧包装、帧传输、帧同步帧的差错恢复流量控制 二、交换机的工作原理 交换机通过数据帧的源 MAC 地址&#xff0c;学习到交换机端…

偶数位字符前置算法

题目描述&#xff1a; 题目描述 编写函数void myshift(char *s),在不打乱s原本相对位置情况下&#xff0c;将偶数位上的字符全部挪到奇数位字符的前面。输入格式 输入一个字符串 s保证输入字符串 s 的长度大于等于1小于等于100输出格式 输出修改后的字符串 s。输入样例1 01234…

【算法】直接插入排序

目录 1. 说明2. 举个例子3. java代码示例4. java示例截图 1. 说明 1.直接插入排序的方式和打牌一样&#xff0c;刚开始数组为空 2.拿到一个数字后从左到右将它与数组中的每一个数字进行比较&#xff0c;然后插入合适的位置 3.到最后&#xff0c;数组按照既定的顺序排序好 2. 举…

OpenCV基础篇

OpenCV基础篇 一、图像、视频读取二、cv::Mat()数据类型三、绘图功能四、鼠标响应事件五、图像像素读写六、图像像素运算七、颜色空间转换八、图像几何变换九、图像滤波十、图像二值化十一、图像梯度十二、Canny边缘检测十三、图像形态学十四、图像直方图十五、霍夫变换十六、分…

线程池的拒绝策略

文章目录 线程池的拒绝策略AbortPolicy拒绝策略&#xff1a;CallerRunsPolicy拒绝策略&#xff1a;DiscardOldestPolicy拒绝策略&#xff1a;DiscardPolicy拒绝策略&#xff1a; 线程池的拒绝策略 若在线程池当中的核心线程数已被用完且阻塞队列已排满&#xff0c;则此时线程池…

springboot_ssm_java学位论文盲审系统

本系统主要实现用户登录验证&#xff0c;用户使用邮箱&#xff0c;密码和选择身份进行登录&#xff0c;用户查看个人中心&#xff0c;提交论文&#xff0c;发表留言和问题反馈。用户在线注册。学生模块功能实现&#xff1a;学生注册&#xff0c;查看信息&#xff0c;修改资料&a…

智能优化算法应用:基于鱼鹰算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于鱼鹰算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于鱼鹰算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.鱼鹰算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

蓝桥杯航班时间

蓝桥杯其他真题点这里&#x1f448; //飞行时间 - 时差 已过去的时间1 //飞行时间 时差 已过去的时间2 //两个式子相加会发现 飞行时间 两段时间差的和 >> 1import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public cl…

Android蓝牙协议栈fluoride(四) - 设备管理(bt interface)

设备管理的接口实现了蓝牙的开/关、属性设置、发现设备、获取profile的接口等等。 接口声明 接口声明如下&#xff1a; // include/hardware/bluetooth.h typedef struct {// 打开接口并注册回调函数int (*init)(bt_callbacks_t* callbacks, bool is_atv);// 关闭接口void (…

目标检测YOLO系列从入门到精通技术详解100篇-【图像处理】边缘检测

目录 知识储备 算法原理 边缘检测(Canny算子) Canny算子边缘检测流程 应用案例

[Linux] LAMP架构

一、LAMP架构架构的概述 LAMP 架构是一种流行的 Web 应用程序架构&#xff0c;它的名称是由四个主要组件的首字母组成的&#xff1a; Linux&#xff08;操作系统&#xff09;&#xff1a; 作为操作系统&#xff0c;Linux 提供了服务器的基础。它负责处理硬件资源、文件系统管理…

解读 | 阿里通义千问模型全尺寸开源 “诚意满满“背后的名与利

大家好&#xff0c;我是极智视界&#xff0c;欢迎关注我的公众号&#xff0c;获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xff1a;https://t.zsxq.com/0aiNxERDq 12 月 1 日阿里开源…

基于Web和深度学习的辣椒检测产量预测系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 辣椒是一种重要的经济作物&#xff0c;被广泛种植和消费。然而&#xff0c;辣椒的产量预测一直是农业生产中的重要问题。准确地预测辣椒的产量可以帮助农民合理安…

第10节:Vue3 论点

如何在UniApp中使用Vue3框架创建论点&#xff1a; <template> <view> <text>{{ segments[currentSegment].content }}</text> </view> </template> <script> import { ref, computed } from vue; export default { setup…

高项备考葵花宝典-项目进度管理输入、输出、工具和技术(下,很详细考试必过)

项目进度管理的目标是使项目按时完成。有效的进度管理是项目管理成功的关键之一&#xff0c;进度问题在项目生命周期内引起的冲突最多。 小型项目中&#xff0c;定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度计划等过程的联系非常密切&#xff0c;可以视为一…

【论文笔记】FSD V2: Improving Fully Sparse 3D Object Detection with Virtual Voxels

原文链接&#xff1a;https://arxiv.org/abs/2308.03755 1. 引言 完全稀疏检测器在基于激光雷达的3D目标检测中有较高的效率和有效性&#xff0c;特别是对于长距离场景而言。 但是&#xff0c;由于点云的稀疏性&#xff0c;完全稀疏检测器面临的一大困难是中心特征丢失&…

vFW搭建IRF

正文共&#xff1a;2328字 40图&#xff0c;预估阅读时间&#xff1a;5 分钟 IRF&#xff08;Intelligent Resilient Framework&#xff0c;智能弹性架构&#xff09;技术通过将多台设备连接在一起&#xff0c;虚拟化成一台设备&#xff0c;集成多台设备的硬件资源和软件处理能…

C++如何通过调用ffmpeg接口对H265文件进行编码和解码

要对H265文件进行编码和解码&#xff0c;需要使用FFmpeg库提供的相关API。以下是一个简单的C程序&#xff0c;演示如何使用FFmpeg进行H265文件的编码和解码&#xff1a; 编码&#xff1a; #include <cstdlib> #include <cstdio> #include <cstring> #inclu…

两个月软考-高项上岸

文章目录 前言结缘软考功亏一篑有始有终2个月计划资料部分计划截图 总结 前言 我们看小说或者电视剧电影都会看到这样的情节&#xff0c;主角一开始锦衣玉食&#xff0c;突然家道中落&#xff0c;啥都没了&#xff0c;主角再一路奋起重新找回了属于自己的一切&#xff1b;还有…