当前位置:   article > 正文

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

鸿蒙系统跑js

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

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

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

image.png

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

例如开发一个这样的界面

image.png

部分代码如下:

  1. <todo-header title="今日" type="" @add-event="toAddEvent('today')"></todo-header>
  2. <list-item id="item{{$item.id}}" for="{{todolist}}" class="tag-list-item" clickeffect="false">
  3.    <todo-list todo="{{$item}}" todos="{{todolist}}" index="{{$idx}}"></todo-list>
  4. </list-item>
  1. // 完成任务
  2. completeEvent(clicked) {
  3.     var key = clicked.detail.key;
  4.     if (!(key['type'] == 'click' || key[0].code == 22)) {
  5.       return;
  6.     }
  7.     var lists = clicked.detail.lists;
  8.     var eid = clicked.detail.id;
  9.     /*完成事项的动画*/
  10.     for (var i in lists) {
  11.       if (lists[i].id == eid) {
  12.         if (lists[i].checkbtn == "/common/done.png") {
  13.           lists[i].checkbtn = "/common/checkbutton.png";
  14.           lists[i].showtag = '';
  15.           lists[i].color = 'text-default';
  16.           lists[i].lineclz = false;
  17.         } else {
  18.           lists[i].checkbtn = "/common/done.png";
  19.           lists[i].showtag = 'hide';
  20.           lists[i].color = 'text-gray';
  21.           lists[i].lineclz = true;
  22.         }
  23.         break;
  24.       }
  25.     }
  26.     this.updateStorage();
  27.   },

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

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

image.png

发布会今天就会召开,关于华为鸿蒙生态的各种最新资讯,大家可以持续关注。

最后

  1. 我是黑叔,关注我,跑得更快噢!


亲,点这涨工资 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/221263
推荐阅读
相关标签
  

闽ICP备14008679号