手把手教你做一个华为鸿蒙系统Demo级项目(JS角度)

简介: 手把手教你做一个华为鸿蒙系统Demo级项目(JS角度)

系统定位


HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。


  • 对消费者而言,HarmonyOS能够将生活场景中的各类终端进行能力整合,可以实现不同的终端设备之间的快速连接、能力互助、资源共享,匹配合适的设备、提供流畅的全场景体验。


  • 对应用开发者而言,HarmonyOS采用了多种分布式技术,使得应用程序的开发实现与不同终端设备的形态差异无关。这能够让开发者聚焦上层业务逻辑,更加便捷、高效地开发应用。


  • 对设备开发者而言,HarmonyOS采用了组件化的设计方案,可以根据设备的资源能力和业务特征进行灵活裁剪,满足不同形态的终端设备对于操作系统的要求。


HarmonyOS代码开发支持多语言,包括Java、XML(Extensible Markup Language)、C/C++ 、 JS(JavaScript)、CSS(Cascading Style Sheets)和HML(HarmonyOS Markup Language)。


视频链接


https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4


体验HarmonyOS


HUAWEI DevEco Studio


面向华为终端全场景多设备的一站式分布式应用开发平台,支持分布式多端开发、分布式多端调测、多端模拟仿真和全方位的质量与安全保障。


1. 下载链接


https://developer.harmonyos.com/cn/develop/deveco-studio#download


点击下载链接之后,会进入华为账号注册页面。输入账号注册登录。


微信截图_20220505185935.png


登录之后,会跳到下载页面。选择符合自己的系统,下载解压安装包即可。


微信截图_20220505191640.png


2. 软件配置


微信截图_20220505185952.png


打开软件之后,会显示以下窗口。这里直接点击OK即可。


微信截图_20220505190006.png


勾选并且点击Agree


微信截图_20220505190026.png


点击Next


微信截图_20220505190146.png


选择Accept,并且点击Next


微信截图_20220505190202.png


等待安装SDK


微信截图_20220505190214.png


安装完成后,点击Finish


微信截图_20220505190330.png


3. 创建项目


点击Create HarmonyOS Project


微信截图_20220505190342.png


选择TV,默认会选择Empty Freature Ability(JS)。点击Next


微信截图_20220505190354.png


设置项目参数,自定义项目名、依赖名、项目路径,默认选择SDK:API Version 3即可。设置完成后点击Finish


微信截图_20220505190407.png


打开如下图所示文件目录。有时会出现这种错误。java.io.IOException: Cannot run program “node”: error=2, No such file or directory。你需要将nodejs可执行文件符号链接到node。在Terminal选项卡下输入命令:


sudo ln -s "$(which nodejs)" /usr/local/bin/node


微信截图_20220505190418.png


选择Tools选项卡下的HVD Manager就可以启动模拟器预览项目了。


微信截图_20220505190430.png


点击之后,浏览器会跳到一个授权窗口。点击允许就好了。


微信截图_20220505190447.png


允许之后,会弹出以下窗口。点击TVActions下面的小三角符号,就可以运行了。


微信截图_20220505190503.png


你会在看到以下画面,说明你启动模拟器成功了。


微信截图_20220505190516.png


模拟器窗口嵌套在编辑器里面可能会觉得不太舒服,你可以点击预览窗口右上方的小齿轮。选择View Mode下的Window选项即可。


微信截图_20220505190527.png


下面就单独一个窗口,看着舒服。这里需要说明的是,模拟器是远程链接到别的服务器,所以画质不是很清晰。还有每次启动都有时间限制(60分钟),时间到了需要重新启动项目。


微信截图_20220505190539.png


点击如下图所示的小三角,运行项目。


微信截图_20220505190551.png


点击OK即可。


微信截图_20220505190603.png


出现以下画面,证明模拟器启动成功了。


微信截图_20220505190616.png


4. 开发项目


看到了之前的您好,世界。那我们就实操一番,做一个Demo。我们几个操作都是在index.hmlindex.cssindex.js。这几个文件中操作的。


微信截图_20220505190628.png


首先,我们在index.hml文件中编辑以下代码。


<div class="container">
    <text class="filter" for="{{filter in filters}}" tid="{{$idx}}">
        {{filter}}{{title}}
    </text>
    <div class="todo-item" for="{{todo in todos}}" tid="id">
        <input type="checkbox" />
        <text>{{todo.content}}</text>
    </div>
</div>


然后,在index.js文件中编辑如下。


export default {
    data: {
        title: "demo",
        filters: ["全部", "已完成", "未完成"],
        todos: [{id: 1, content: "待办1"}, {id: 2, content: "待办2"}]
    },
}


大功告成了,我们重新启动下项目,看下模拟器。点击如下图所示Run 'entry'标识的按钮。


微信截图_20220505190642.png


点击Stop and Rerun


微信截图_20220505190652.png


点击OK


微信截图_20220505190708.png


如下图所示,运行成功。


微信截图_20220505190729.png


5. 开发文档


我们看到上面demo的代码可能对于学过微信小程序跟Vue.js等MVVM框架的小伙伴感觉非常熟悉,你可以开发下面的链接继续学习。


https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791


微信截图_20220505190740.png



相关文章
|
2月前
|
API
HarmonyOS 3.1/4项目在DevEco Studio 5.0(HarmonyOS NEXT)版本下使用的问题
有读者在使用《鸿蒙HarmonyOS应用开发入门》书中的源码时遇到问题,主要原因是使用的DevEco Studio版本不同所致。本文提供了三种解决方案:1) 降级DevEco Studio至3.1版本;2) 按照5.0版本修改书中示例;3) 等待并使用《鸿蒙之光HarmonyOS NEXT原生应用开发入门》升级版书籍。
215 1
|
11天前
|
安全 数据安全/隐私保护 Android开发
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
HarmonyOS NEXT是华为自研的鸿蒙操作系统的重要版本更新,标志着鸿蒙系统首次完全脱离Linux内核及安卓开放源代码项目(AOSP),仅支持鸿蒙内核和鸿蒙系统的应用。该版本引入了“和谐美学”设计理念,通过先进的物理渲染引擎还原真实世界的光影色彩,为用户带来沉浸式体验。应用图标设计融合国画理念,采用留白和实时模糊技术展现中式美学。 HarmonyOS NEXT强化了设备间的协同能力,支持无缝切换任务,如在手机、平板或电脑间继续阅读文章或编辑文件。系统注重数据安全和隐私保护,提供数据加密和隐私权限管理功能。此外,它利用分布式技术实现跨设备资源共
79 15
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
|
14天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
96 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
16天前
|
存储 IDE JavaScript
【HarmonyOS Next开发】端云一体化初始化项目
端云一体化开发是HarmonyOS对云端开发的支持、实现端云联动。云开发服务提供了云函数、云数据库、云存储等服务,可以使开发者专注于应用的业务逻辑开发,无需关注基础设施,例如:服务器、操作系统等问题。
55 6
【HarmonyOS Next开发】端云一体化初始化项目
|
9天前
|
监控 算法 JavaScript
基于 Node.js Socket 算法搭建局域网屏幕监控系统
在数字化办公环境中,局域网屏幕监控系统至关重要。基于Node.js的Socket算法实现高效、稳定的实时屏幕数据传输,助力企业保障信息安全、监督工作状态和远程技术支持。通过Socket建立监控端与被监控端的数据桥梁,确保实时画面呈现。实际部署需合理分配带宽并加密传输,确保信息安全。企业在使用时应权衡利弊,遵循法规,保障员工权益。
23 7
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
本篇将带领你实现一个互动性十足的灯光控制小项目,用户可以通过点击按钮来控制灯光的开关。该项目将涉及状态管理、动态图片加载以及按钮交互,是学习鸿蒙应用开发的重要基础。
52 5
|
2月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
38 2
2024年5月node.js安装(winmac系统)保姆级教程
|
2月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
69 4
|
2月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
49 2