四、編寫項目代碼
1.新新建一個文件夾common->images將部分照片放在images目錄下，作為項目背景圖片進行引用。

圖6 照片目錄

2.編寫第一個頁面。

hml:

復制

css:

/* phone */
@media screen and (device-type: phone) {
    .container {
        width: 100%;
        height: 100%;
        background-image: url("/common/images/zhishi.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size:720px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
   .liaojie{

       text-color: black;
       background-color: yellow;
       width: 50%;
       height: 100px;
       text-align: center;
       font-size: 42px;
       border-radius: 45px;
       font-weight: 700;
   }
}

復制

點擊屏幕右方按鈕，打開預覽器查看效果。

效果如下所示:

3.編寫第二個頁面。

Index頁面在項目創建的時候，會自動創建，若需要更多的頁面，需要進行新建一個頁面目錄。方法如下：單擊pages目錄，選擇新建一個JS Page。

圖3 新建頁面

新建玩page目錄后，編寫相關頁面代碼即可。

hml:

復制

css:

/* 說明設備類型 */
@media screen and (device-type: phone) {/* 樣式 */
.box {
width: 100%;
        height: 100%;
        background-image: url("/common/images/page2.jpg");
        background-size: 720px;
        display: flex;
        justify-content: center;
    }
    .liaojie1 {
        text-color: black;
        background-color: yellow;
        width: 30%;
        height: 50px;
        text-align: center;
    font-size: 22px;
        border-radius: 45px;
        font-weight: 700;
        margin-top: 70%;
    }
}

復制

效果如下：

圖2 效果圖

在該頁面采用了監聽路由跳轉的方式進行跳轉到下一個頁面。

4.編寫第三個頁面

hml:

復制

css:

/* phone */
@media screen and (device-type: phone) {
    .box_interest {
        width: 100%;
        height: 100%;
        background-image: url("/common/images/xingq.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 720px;
    }
    .button_interest {
        width: 100%;
        height: 150px;
        justify-content: center;
        margin-top: 320px;
    }
    .button_style_interest {
        width: 40%;
        height: 60px;
        text-align: center;
        font-size: 30px;
        border-radius: 45px;
        font-weight: 700;
        background-color: yellow;
        color: black;
       
    }
}

復制

js：

import router from '@system.router';

export default {
    data: {
        know_interest:"點擊學習"
    },
    page_three(){
        router.push({
            uri:'pages/study/study'
        })
    }
}

復制

效果如下：

圖5 效果圖

5.編寫第四個頁面

按照第二步的方法再新建一個頁面。填寫其頁面代碼。

hml:

復制

css:

/* phone */
@media screen and (device-type: phone) {
    .pagediv {
        width: 100%;
        height: 1500px;
        background-color: cornsilk;/**啟用flex布局**/
        display: flex;/**布局方向為按列布局**/

        flex-direction: column;
    }
    .topdiv {
        width: 100%;
        height: 10%;
        background-color: #fad10a;/**啟用flex布局**/
        display: flex;/**水平居中**/
        justify-content: center;/**垂直居中**/
        align-items: center;
        flex-direction: column;
    }
    .middlediv {
        width: 100%;
        height: 30%;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;/**自動換行**/
        flex-wrap: wrap;
    }
    .box {
        width: 31%;
        height: 100px;
        background-color: #0373fc;
        border: 3px solid black;
        border-radius: 20px;
        margin: 5px;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .textdiv {
        font-size: 30px;
        color: black;
        font-weight: bold;
    }
    .boxtxt {
        font-size: 45px;
        color: black;
        font-weight: bold;
    }
    .button_dj {
        background-color: #0373fc;
        text-color: white;
        height: 100px;
        width: 200px;
    }
    .bottomdiv{
        background-color: black;
        border: 2px solid black;
        width: 100;
        height: 400px;
        justify-content: center;
      

    }
    .div_dati {

        width: 90%;
        height: 300px;
        background-color: #0612f1;
        margin-top: 150px;
        margin-left: 40px;
        border:2px solid black;
        opacity: 1;
        display: flex;
        justify-content: center;

    }
    .text_style{
        color: white;
        font-size: 36px;
        opacity: 1;
        margin-left:10px;
        text-align: left;
    }
    .button_study {
        width: 100%;
        height: 150px;
        justify-content: center;
        margin-top: 40px;
    }
    .button_style_study {
        width: 35%;
        height: 70px;
        text-align: center;
        font-size: 22px;
        border-radius: 45px;
        background-color: yellow;
        color:black;
        font-weight: 400;
    }
}

復制

js:

export default {
    data: {
        title:["點擊按鈕","解鎖術語解釋與學習"],
        arrs:[
            {
                'id':'Ability',
                'value':'應用的重要組成部分，是應用所具備能力的抽象。Ability分為兩種類型，Feature Ability和Particle Ability。'
            },
            {
                'id':'AbilitySlice',
                'value':'切片，是單個可視化界面及其交互邏輯的總和，是Feature Ability的組成單元。一個Feature Ability可以包含一組業務關系密切的可視化界面，每一個可視化界面對應一個AbilitySlice。'
            },
            {
                'id':'ANS',
                'value':'Advanced Notification Service，通知增強服務，是HarmonyOS中負責處理通知的訂閱、發布和更新等操作的系統服務。'
            },
            {
                'id':'CES',
                'value':'Common Event Service，是HarmonyOS中負責處理公共事件的訂閱、發布和退訂的系統服務。'
            },
            {
                'id':'DV',
                'value':'Device Virtualization，設備虛擬化，通過虛擬化技術可以實現不同設備的能力和資源融合。'
            },
            {
                'id':'FA',
                'value':'Feature Ability，元程序，代表有界面的Ability，用于與用戶進行交互。'
            },
            {
                'id':'HAP',
                'value':'HarmonyOS Ability Package，一個HAP文件包含應用的所有內容，由代碼、資源、三方庫及應用配置文件組成，其文件后綴名為.hap。'
            },
            {
                'id':'HDF',
                'value':'Hardware Driver Foundation，硬件驅動框架，用于提供統一外設訪問能力和驅動開發、管理框架。'
            },
            {
                'id':'IDN',
                'value':'Intelligent Distributed Networking，是HarmonyOS特有的分布式組網能力單元。開發者可以通過IDN獲取分布式網絡內的設備列表和設備狀態信息，以及注冊分布式網絡內設備的在網狀態變化信息。'
            },
            {
                'id':'MSDP',
                'value':'Mobile Sensing Development Platform，移動感知平臺。MSDP子系統提供兩類核心能力：分布式融合感知和分布式設備虛擬化。'
            },
            {
                'id':'PA',
                'value':'Particle Ability，元服務，代表無界面的Ability，主要為Feature Ability提供支持，例如作為后臺服務提供計算能力，或作為數據倉庫提供數據訪問能力。'
            },
            {
                'id':'Supervirtualdevice',
                'value':'超級虛擬終端亦稱超級終端，通過分布式技術將多個終端的能力進行整合，存放在一個虛擬的硬件資源池里，根據業務需要統一管理和調度終端能力，來對外提供服務。'
            }
        ],
        show_text:'',
        know_study:"了解更多"
    },
    show(e){
        console.info(e)
        var list = this;
        this.arrs.forEach(element => {
            console.info(element.id)
            if (element.id==e) {
                list.show_text = element.value
            }
        });
        console.info(list.show_text);
    },
    page_four(){
        router.push({
            uri:'pages/harmonyos/harmonyos'
        })
    }
}

復制

效果如下：

6.編寫第五個頁面

新建一個頁面，用于介紹harmongy官方網站。代碼如下

hml：

復制

css：

/* 說明設備類型 */
@media screen and (device-type: phone) {
    /*樣式*/
    .container {
        flex-direction: column;
        height: 100%;
        width: 100%;
        background-image: url("/images/end.jpg");
    }
}

審核編輯：符乾江