亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

鴻蒙OS如何開發(fā)一個前端應用詳解

 更新時間：2021年08月23日 10:11:00   作者：云積分大前端團隊  
以前一個前端開發(fā)人員,能開發(fā)網(wǎng)頁、能開發(fā)安卓系統(tǒng)和 IOS 系統(tǒng),就可以說是一個合格的前端程序員了,但是鴻蒙的出現(xiàn),也逼著你需要再掌握一門新系統(tǒng)的開發(fā),這篇文章主要給大家介紹了關于鴻蒙OS如何開發(fā)一個前端應用的相關資料,需要的朋友可以參考下

鴻蒙的誕生

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

編寫一個HarmonyOS

第一步

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

第二步

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

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

第三步

開始編碼啦，目錄結構如下圖，我們只需要新建文件夾，然后在創(chuàng)建頁面

新建頁面的時候，相對應的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;
    }
}

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

右邊是開發(fā)工具自帶的實時展示效果，仔細的朋友應該發(fā)現(xiàn)，我們寫了一套代碼，適應了多端，
來看看手表上的展示效果

達到這樣的效果是因為我們在config.json配置文件中配置了

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

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

第四步

代碼擼完了，接下來該打包上線了

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

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

總結

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

相關文章

最新評論