鸿蒙的诞生

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统；它实现了一个非常轻量级的 MVVM 模式。通过使用和 vue2 相似的属性劫持技术实现了响应式系统。鸿蒙 JS 框架支持 ECMAScript 5.1；js runtime 没有使用 V8，也没有使用 jscore。而是选择了 JerryScript。JerryScript 是用于物联网的超轻量 JavaScript 引擎。Jerryscript是由三星开发的一款JavaScript引擎，是为了让JavaScript开发者能够构建物联网应用。物联网设备在CPU性能和内存空间上都有着严重的制约。因此，三星设计了JerryScript引擎，它能够运行在小于64KB内存上，且全部代码能够存储在不足200KB的只读存储（ROM）上。说到这里，我想身为前端的我们是不是该搞点事情，比如给自己的华为手表上写一个APP应用，让他定时叫你敷面膜；或者写一个新闻APP，类似今日头条，数据么，可以造假；

编写一个HarmonyOS

第一步

首先去官网下载DevEco Studio开发工具，下载地址：developer.harmonyos.com/cn/develop/…

第二步

新建鸿蒙项目，HarmonyOS提供了两种FA（Feature Ability）的UI开发框架：Java UI框架和JS UI框架。 我们使用JS UI框架即可；选择好之后进入编码。

创建新项目选择模板，官方提供了好多模板，我们选一个简单地js模板

第三步

开始编码啦，目录结构如下图，我们只需要新建文件夹，然后在创建页面

新建页面的时候，相对应的config.json配置文件会自动更新，无需手动添加

"js": [
  {
    "pages": [
      "pages/index/index",
      "pages/index/details/details"
    ],
    "name": "default",
    "window": {
      "designWidth": 720,
      "autoDesignWidth": true
    }
  }
]

来看看我们的index页面的HTML代码

<div class="container">
    <text class="text">
       Hello Word
    </text>
    <button class="button" type="capsule" value="Next" on:click="launch"></button>
</div>

js代码

import router from '@system.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    launch() {
        router.push ({
            uri:'pages/index/details/details', // 指定要跳转的页面
            params: {
                title: 'Hi Here',
            }
        })
    }
}

css代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text{
    font-size: 42px;
}
.button {
    width: 300px;
    height: 60px;
    background-color: #007dff;
    font-size: 40px;
    text-color: white;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("../../common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

是熟悉的味道，嘿嘿！目前为止，我们已经完成了一个简单地应用了，看看效果吧！

右边是开发工具自带的实时展示效果，仔细的朋友应该发现，我们写了一套代码，适应了多端， 来看看手表上的展示效果

达到这样的效果是因为我们在config.json配置文件中配置了

"deviceType": [
  "phone",
  "tv",
  "wearable",
  "tablet"
],

如果你没有华为设备，不怕，我们有真实的模拟器，按照如下操作，就可以看到真实效果；

第四步

代码撸完了，接下来该打包上线了

发布应用比较麻烦，由于本人例子简单，肯定审核不过的，所以也没有在进一步深入，详情猛戳： developer.harmonyos.com/cn/docs/doc…

至此已经全部结束！