手把手教你做一个华为鸿蒙系统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



相关文章
|
11月前
|
定位技术 开发工具
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
544 5
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
|
11月前
|
安全 开发工具 数据安全/隐私保护
HarmonyOS应用安全全攻略:从系统到代码的全面防护
本文全面解析HarmonyOS应用安全开发,涵盖系统到代码的防护策略。首先介绍HarmonyOS三层安全体系:系统安全层、开发工具层与应用生态层。接着详解设备与数据安全等级划分,提供分级加密实战代码,包括文件读写与HUKS高级加密案例。最后总结开发最佳实践,强调数据分类、最小权限、加密常态及传输安全保障,助你构建更安全的应用。保护用户数据不仅是功能需求,更是开发者责任!
|
11月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1286 0
|
11月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1295 80
|
9月前
|
移动开发 网络协议 小程序
鸿蒙NEXT即时通讯/IM系统RinbowTalk v2.4版发布,基于MobileIMSDK框架、ArkTS编写
RainbowTalk是一套基于开源即时通讯讯IM框架 MobileIMSDK 的产品级鸿蒙NEXT端IM系统。纯ArkTS编写、全新开发,没有套壳、也没走捷径,每一行代码都够“纯血”。与姊妹产品RainbowChat和RainbowChat-Web 技术同源,历经考验。
362 1
|
10月前
|
缓存 移动开发 网络协议
纯血鸿蒙NEXT即时通讯/IM系统:RinbowTalk正式发布,全源码、纯ArkTS编写
RainbowTalk是一套基于MobileIMSDK的产品级鸿蒙NEXT端IM系统,目前已正式发布。纯ArkTS、从零编写,无套壳、没走捷径,每一行代码都够“纯”(详见:《RainbowTalk详细介绍》)。 MobileIMSDK是一整套开源IM即时通讯框架,历经10年,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp、鸿蒙NEXT,服务端基于Netty编写。
759 1
|
11月前
|
开发工具 数据安全/隐私保护 开发者
打造鸿蒙系统中最好用的加载动画和提示弹窗
幽蓝君开发了鸿蒙平台的轻量级弹窗工具 yloadinghud,旨在实现简洁优雅的提示交互。无需在每个页面重复初始化,只需一行代码即可展示加载动画或提示弹窗。支持多种类型,如成功、失败提示及文字弹窗,且具备自动消失功能,使用便捷。项目已上传至 ohpm 仓库,欢迎搜索体验并提出宝贵建议。#三方SDK #工具效率
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
416 2

热门文章

最新文章