鸿蒙2.0！用 JavaScript 开发鸿蒙应用-CSDN博客

华为2020开发者大会召开在即。

本来华为的开发者大会，我都很少关注，可是所有人关心的鸿蒙操作系统，都会在发布会上放出消息。今年也不例外。这一次，鸿蒙将会在开发者大会上，发布 鸿蒙2.0。

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

image.png

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

例如开发一个这样的界面

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();
  },

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

在文档中提到的开发工具 IDE，是一个全新的工具，名叫「DevEco Studio」赶紧去搜索了一下，发现果然有这个东西，并且已经在9月1号放出了内测申请。我刚提交了申请，还没办法上手直接搞鸿蒙应用，还要再等等。