鸿蒙2.0!用 JavaScript 开发鸿蒙应用

简介: 鸿蒙2.0!用 JavaScript 开发鸿蒙应用

去年虽然发布了鸿蒙操作系统,但是并没有放出任何开发文档,导致鸿蒙系统在很长一段时间都被喷得很惨,甚至大家一致认为这是一个骗局,好在今年这一现象得到了改观。在 CSDN 社区里,有了鸿蒙应用的开发介绍。这也是我作为一个大前端开发者最关注的东西,鸿蒙应用到底使用的什么语言开发应用?

image.png

image.png


读了文档之后,我发现了一个值得所有前端小伙伴们开心的事情,鸿蒙应用的技术栈是JavaScript + HTML + css

image.png

例如开发一个这样的界面

image.png

image.png


部分代码如下:

<todo-header title="今日" type="" @add-event="toAddEvent('today')"></todo-header>
<list-item id="item{{$item.id}}" for="{{todolist}}" class="tag-list-item" clickeffect="false">
   <todo-list todo="{{$item}}" todos="{{todolist}}" index="{{$idx}}"></todo-list>
</list-item>
// 完成任务
completeEvent(clicked) {
    var key = clicked.detail.key;
    if (!(key['type'] == 'click' || key[0].code == 22)) {
      return;
    }
    var lists = clicked.detail.lists;
    var eid = clicked.detail.id;
    /*完成事项的动画*/
    for (var i in lists) {
      if (lists[i].id == eid) {
        if (lists[i].checkbtn == "/common/done.png") {
          lists[i].checkbtn = "/common/checkbutton.png";
          lists[i].showtag = '';
          lists[i].color = 'text-default';
          lists[i].lineclz = false;
        } else {
          lists[i].checkbtn = "/common/done.png";
          lists[i].showtag = 'hide';
          lists[i].color = 'text-gray';
          lists[i].lineclz = true;
        }
        break;
      }
    }
    this.updateStorage();
  },


完整的开发体验,还需要进一步上手尝试了之后才能跟大家分享。

相关文章
|
6天前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
114 68
|
7天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
65 47
Harmony OS开发-ArkTS语言速成二
|
5天前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
37 13
|
4天前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
37 10
|
8天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
34 14
|
8天前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
5天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
25 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
8天前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘
|
8天前
|
前端开发 API 数据库
鸿蒙开发:异步并发操作
在结合async/await进行使用的时候,有一点需要注意,await关键字必须结合async,这两个是搭配使用的,缺一不可,同步风格在使用的时候,如何获取到错误呢,毕竟没有catch方法,其实,我们可以自己创建try/catch来捕获异常。
鸿蒙开发:异步并发操作
|
8天前
|
API
鸿蒙开发:实现popup弹窗
目前提供了两种方式实现popup弹窗,主推系统实现的方式,几乎能满足我们常见的所有场景,当然了,文章毕竟有限,尽量还是以官网为主。
鸿蒙开发:实现popup弹窗

热门文章

最新文章