鴻蒙的誕生

HarmonyOS是一款面向萬(wàn)物互聯(lián)時(shí)代的、全新的分布式操作系統(tǒng)；它實(shí)現(xiàn)了一個(gè)非常輕量級(jí)的 MVVM 模式。通過(guò)使用和 vue2 相似的屬性劫持技術(shù)實(shí)現(xiàn)了響應(yīng)式系統(tǒng)。鴻蒙 JS 框架支持 ECMAScript 5.1；js runtime 沒(méi)有使用 V8，也沒(méi)有使用 jscore。而是選擇了 JerryScript。JerryScript 是用于物聯(lián)網(wǎng)的超輕量 JavaScript 引擎。Jerryscript是由三星開(kāi)發(fā)的一款JavaScript引擎，是為了讓JavaScript開(kāi)發(fā)者能夠構(gòu)建物聯(lián)網(wǎng)應(yīng)用。物聯(lián)網(wǎng)設(shè)備在CPU性能和內(nèi)存空間上都有著嚴(yán)重的制約。因此，三星設(shè)計(jì)了JerryScript引擎，它能夠運(yùn)行在小于64KB內(nèi)存上，且全部代碼能夠存儲(chǔ)在不足200KB的只讀存儲(chǔ)（ROM）上。說(shuō)到這里，我想身為前端的我們是不是該搞點(diǎn)事情，比如給自己的華為手表上寫(xiě)一個(gè)APP應(yīng)用，讓他定時(shí)叫你敷面膜；或者寫(xiě)一個(gè)新聞APP，類(lèi)似今日頭條，數(shù)據(jù)么，可以造假；

編寫(xiě)一個(gè)HarmonyOS

第一步

首先去官網(wǎng)下載DevEco Studio開(kāi)發(fā)工具，下載地址：developer.harmonyos.com/cn/develop/…

第二步

新建鴻蒙項(xiàng)目，HarmonyOS提供了兩種FA（Feature Ability）的UI開(kāi)發(fā)框架：Java UI框架和JS UI框架。
我們使用JS UI框架即可；選擇好之后進(jìn)入編碼。

創(chuàng)建新項(xiàng)目選擇模板，官方提供了好多模板，我們選一個(gè)簡(jiǎn)單地js模板

第三步

開(kāi)始編碼啦，目錄結(jié)構(gòu)如下圖，我們只需要新建文件夾，然后在創(chuàng)建頁(yè)面

新建頁(yè)面的時(shí)候，相對(duì)應(yīng)的config.json配置文件會(huì)自動(dòng)更新，無(wú)需手動(dòng)添加

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

來(lái)看看我們的index頁(yè)面的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', // 指定要跳轉(zhuǎn)的頁(yè)面
            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;
    }
}

是熟悉的味道，嘿嘿！目前為止，我們已經(jīng)完成了一個(gè)簡(jiǎn)單地應(yīng)用了，看看效果吧！

右邊是開(kāi)發(fā)工具自帶的實(shí)時(shí)展示效果，仔細(xì)的朋友應(yīng)該發(fā)現(xiàn)，我們寫(xiě)了一套代碼，適應(yīng)了多端，
來(lái)看看手表上的展示效果

達(dá)到這樣的效果是因?yàn)槲覀冊(cè)赾onfig.json配置文件中配置了

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

如果你沒(méi)有華為設(shè)備，不怕，我們有真實(shí)的模擬器，按照如下操作，就可以看到真實(shí)效果；

第四步

代碼擼完了，接下來(lái)該打包上線(xiàn)了

發(fā)布應(yīng)用比較麻煩，由于本人例子簡(jiǎn)單，肯定審核不過(guò)的，所以也沒(méi)有在進(jìn)一步深入，詳情猛戳：
developer.harmonyos.com/cn/docs/doc…

至此已經(jīng)全部結(jié)束！

總結(jié)

到此這篇關(guān)于鴻蒙OS如何開(kāi)發(fā)一個(gè)前端應(yīng)用的文章就介紹到這了,更多相關(guān)鴻蒙OS開(kāi)發(fā)前端應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論