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

Jacquelyn38
• 阅读 1520

系统定位

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  

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

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

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

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

2. 软件配置

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

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

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

勾选并且点击Agree

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

点击Next

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

选择Accept,并且点击Next

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

等待安装SDK

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

安装完成后,点击Finish

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

3. 创建项目

点击Create HarmonyOS Project

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

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

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

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

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

打开如下图所示文件目录。有时会出现这种错误。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  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

点击OK即可。

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

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

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

4. 开发项目

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

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

首先,我们在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'标识的按钮。

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

点击Stop and Rerun

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

点击OK

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

如下图所示,运行成功。

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

5. 开发文档

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

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

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

  • 欢迎关注我的公众号前端历劫之路

  • 回复关键词电子书,即可获取12本前端热门电子书。

  • 回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。

  • 关注公众号后,点击下方菜单即可加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,期待你的加入。

  • 作者:Vam的金豆之路

  • 微信公众号:前端历劫之路

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

- END -

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/c7GMkn4nI16Yyz5nwiN52g,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 (教程含源码)
HarmonyOS鸿蒙入门教程之01基础环境和开发工具鸿蒙系统是什么HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
京东云开发者 京东云开发者
1个月前
带你走进 HarmonyOS:前端如何迎接新技术的到来
一、HarmonyOS简介HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终