鸿蒙OS如何开发一个前端应用详解

鸿蒙的诞生

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…

至此已经全部结束！

总结

到此这篇关于鸿蒙OS如何开发一个前端应用的文章就介绍到这了,更多相关鸿蒙OS开发前端应用内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！

编程技巧