构建第一个JS应用(FA模型)

创建JS工程

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

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

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

JS工程目录结构

  • 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,打开预览器。第一个页面效果如下图所示:

构建第二个页面

  1. 创建第二个页面。

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

  2. 添加文本及按钮。

    参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“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>

  3. 设置页面样式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文件夹下的任意一个文件,点击预览器中的

    按钮进行刷新。效果如下图所示:

使用真机运行应用

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

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

  3. 在编辑窗口右上角的工具栏,点击

    按钮运行。效果如下图所示:

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

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

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

相关文章

【网络基础】一文搞懂,什么是三次握手与四次挥手

文章目录 三次握手过程为什么要三次握手而不是两次握手呢&#xff1f; 四次挥手过程为什么客户端需要等待超时时间&#xff1f;为什么要四次挥手&#xff1f; 参考 三次握手过程 当客户端向服务端发起连接时&#xff0c;会先发一包 SYN 包连接请求数据&#xff0c;进行询问&am…

【智能算法】蜣螂优化算法(DBO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2022年&#xff0c;Xue等人受到自然界中蜣螂生存行为启发&#xff0c;提出了蜣螂优化算法&#xff08;Dung beetle optimizer, DBO&#xff09;。 2.算法原理 2.1算法思想 DBO模拟了自然界蜣螂种…

基于8086温度监控报警系统设计

**单片机设计介绍&#xff0c;基于8086温度监控报警系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086的温度监控报警系统设计概要主要涵盖了该系统的基本组成、工作原理、设计特点以及应用前景等方面。以下是对该…

HarmonyOS 应用开发之RelationalStore开发

场景介绍 RelationalStore提供了一套完整的对本地数据库进行管理的机制&#xff0c;对外提供了一系列的增、删、改、查等接口&#xff0c;也可以直接运行用户输入的SQL语句来满足复杂的场景需要。 基本概念 谓词&#xff1a;数据库中用来代表数据实体的性质、特征或者数据实体…

字典树基础(Java实现)

字典树也叫Trie&#xff0c;是一种树形结构&#xff0c;其中每个节点可以存储一些变量表示该字符串出现的数量。每条边表示一个字符&#xff0c;如节点9存储一个变量cnt&#xff0c;说明存在三个字符串为“cbc” 例题&#xff1a;前缀判定 import java.math.BigInteger; impor…

Kubernetes(k8s):网络插件之Calico安装与详解

Kubernetes&#xff08;k8s&#xff09;&#xff1a;网络插件之Calico安装与详解 1、什么是Calico&#xff1f;2、安装和配置Calico&#xff08;控制节点-master执行&#xff09;3、配置网络策略4、 Calico 的 yaml 文件部分详解1、ConfigMap配置2、DaemonSet 配置 5、calico-k…

【智能算法】蜜獾算法(HBA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2021年&#xff0c;FA Hashim等人受到自然界中蜜獾狩猎行为启发&#xff0c;提出了蜜獾算法&#xff08;(Honey Badger Algorithm&#xff0c;HBA&#xff09;。 2.算法原理 2.1算法思想 蜜獾以其…

Mysql 常用SQL语句

1、查看mysql中所有的数据库&#xff0c; show databases; 2、创建库 create database 库名;&#xff08;也可以用 create database if not exists 库名; 表示如果库不存在再创建&#xff09; 例&#xff1a;create database if not exists ecology; 3、删除库 …

[网鼎杯 2020 朱雀组]Nmap1

打开题目 在源代码中看到了提示 先随便输入127.0.0.1 那我们试试输入 127.0.0.1 | ls 可以看到 | 被转义符号\所转义 那我们输入 127.0.0.1 /| ls 得到三条反斜线 我们猜测&#xff0c;我们输入的东西是被escapeshellarg和escapeshellcmd处理过后的结果 我们输入的东西必须…

element-ui tag 组件源码分享

今日简单分享一下 tag 组件的源码实现&#xff0c;主要从以下三个方面来分享&#xff1a; 1、tag 组件页面结构 2、tag 组件属性 3、tag 组件方法 一、tag 组件页面结构 vue2 中使用 jsx 语法小结&#xff1a; 1.1 需要安装 babel-plugin-transform-vue-jsx 和 vue/babel-…

echarts仪表盘特殊样式

const drawChartOption function (value, max) {const colorConfig {name: 测试,colorList: {text: #fff,line2: {type: linear,x: 0, // 右y: 0, // 下x2: 1, // 左y2: 0, // 上colorStops: [// {// offset: 0,// color: transparent// },{offset: 0.1,color: #031e…

服务器托管让服务器管理更轻松高效

在信息化飞速发展的今天&#xff0c;服务器作为企业数据处理和信息存储的核心设备&#xff0c;其管理的重要性日益凸显。服务器托管&#xff0c;作为一种高效、专业的服务器管理方式&#xff0c;正逐渐成为众多企业的首选。那么&#xff0c;服务器托管究竟是如何让服务器管理更…

AI版青花瓷

3月22日&#xff0c;Suno正式上线V3版本&#xff0c;很多人都称之为AI音乐的"ChatGPT"时刻&#xff0c;从此人人都可以是作曲家&#xff0c;先来听下最近霸榜的只因你太美baby来感受下它的厉害之处&#xff08;我已经被洗脑了哈哈&#xff09; 1. Suno 介绍 根据Sun…

便携式组件el测试仪讲解

TH-EL3便携式组件EL&#xff08;电致发光&#xff09;测试仪是一种专门用于检测光伏组件质量的设备。该设备基于电致发光的原理&#xff0c;通过非破坏性的方式快速准确地检测出光伏组件内部的各种缺陷和问题。 产品概述 便携式组件EL测试仪是一种轻便、易于携带的设备&#…

Mysql实战--为什么表数据删掉一半,表文件大小不变

经常会有同学来问我&#xff0c;我的数据库占用空间太大&#xff0c;我把一个最大的表删掉了一半的数据&#xff0c;怎么表文件的大小还是没变&#xff1f; 那么今天&#xff0c;我就和你聊聊数据库表的空间回收&#xff0c;看看如何解决这个问题。 这里&#xff0c;我们还是针…

云容器引擎CCE弹性伸缩

CCE弹性伸缩介绍 CCE的弹性伸缩能力分为如下两个维度&#xff1a; 工作负载弹性伸缩&#xff1a;即调度层弹性&#xff0c;主要是负责修改负载的调度容量变化。例如&#xff0c;HPA是典型的调度层弹性组件&#xff0c;通过HPA可以调整应用的副本数&#xff0c;调整的副本数会…

数据结构进阶篇 之 【堆的应用】(堆排序,TOP-K问题)详细讲解

所有人都关心我飞的高不高&#xff0c;只有我妈关心我翅膀硬不硬 一、堆的应用 1. 堆排序 1.1 建堆 1.2 利用堆删除思想来进行排序 2.TOP-K问题 二、完结撒❀ –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–❀–❀–…

如何快速有效地压缩图片大小?这款在线工具可保证图片质量

当你需要上传或发送大量图片时&#xff0c;大体积的图片文件往往会让我们感到困扰&#xff0c;如何快速有效的压缩图片大小成了比较关键的问题&#xff0c;在图片压缩时&#xff0c;我们还需要担心的就是会不会对图片质量有损害&#xff0c;想要做到图片无损压缩就需要用到一些…

go和Java该如何选择?

今天&#xff0c;每个企业都需要一个软件应用程序&#xff0c;从初创公司到大型公司如果你想以最有效的方式运行业务&#xff0c;你必须把它列在网上。竞争并没有就此结束 但重要的是您能够以多简单、多快速的方式创建软件应用程序-这是引领竞争的正确方式。 选择最适合您的软…

MegaSeg Pro for Mac v6.3.1 注册激活版 音视频DJ混音工具

MegaSeg Pro for Mac是一款专业的DJ和广播自动化软件&#xff0c;旨在为音乐专业人士提供强大的音乐播放和演播功能。这款软件具有多种功能&#xff0c;包括强大的音乐库管理&#xff0c;支持导入和组织大量音乐文件&#xff0c;可以轻松管理你的音乐收藏。它支持广泛的音频格式…