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

圖6 照片目錄

2.編寫第一個(gè)頁(yè)面。

hml:

復(fù)制

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;
   }
}

復(fù)制

點(diǎn)擊屏幕右方按鈕，打開預(yù)覽器查看效果。

效果如下所示:

3.編寫第二個(gè)頁(yè)面。

Index頁(yè)面在項(xiàng)目創(chuàng)建的時(shí)候，會(huì)自動(dòng)創(chuàng)建，若需要更多的頁(yè)面，需要進(jìn)行新建一個(gè)頁(yè)面目錄。方法如下：?jiǎn)螕魀ages目錄，選擇新建一個(gè)JS Page。

圖3 新建頁(yè)面

新建玩page目錄后，編寫相關(guān)頁(yè)面代碼即可。

hml:

復(fù)制

css:

/* 說明設(shè)備類型 */
@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%;
    }
}

復(fù)制

效果如下：

圖2 效果圖

在該頁(yè)面采用了監(jiān)聽路由跳轉(zhuǎn)的方式進(jìn)行跳轉(zhuǎn)到下一個(gè)頁(yè)面。

4.編寫第三個(gè)頁(yè)面

hml:

復(fù)制

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;
       
    }
}

復(fù)制

js：

import router from '@system.router';

export default {
    data: {
        know_interest:"點(diǎn)擊學(xué)習(xí)"
    },
    page_three(){
        router.push({
            uri:'pages/study/study'
        })
    }
}

復(fù)制

效果如下：

圖5 效果圖

5.編寫第四個(gè)頁(yè)面

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

hml:

復(fù)制

css:

/* phone */
@media screen and (device-type: phone) {
    .pagediv {
        width: 100%;
        height: 1500px;
        background-color: cornsilk;/**啟用flex布局**/
        display: flex;/**布局方向?yàn)榘戳胁季?*/

        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;/**自動(dòng)換行**/
        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;
    }
}

復(fù)制

js:

export default {
    data: {
        title:["點(diǎn)擊按鈕","解鎖術(shù)語解釋與學(xué)習(xí)"],
        arrs:[
            {
                'id':'Ability',
                'value':'應(yīng)用的重要組成部分，是應(yīng)用所具備能力的抽象。Ability分為兩種類型，F(xiàn)eature Ability和Particle Ability。'
            },
            {
                'id':'AbilitySlice',
                'value':'切片，是單個(gè)可視化界面及其交互邏輯的總和，是Feature Ability的組成單元。一個(gè)Feature Ability可以包含一組業(yè)務(wù)關(guān)系密切的可視化界面，每一個(gè)可視化界面對(duì)應(yīng)一個(gè)AbilitySlice。'
            },
            {
                'id':'ANS',
                'value':'Advanced Notification Service，通知增強(qiáng)服務(wù)，是HarmonyOS中負(fù)責(zé)處理通知的訂閱、發(fā)布和更新等操作的系統(tǒng)服務(wù)。'
            },
            {
                'id':'CES',
                'value':'Common Event Service，是HarmonyOS中負(fù)責(zé)處理公共事件的訂閱、發(fā)布和退訂的系統(tǒng)服務(wù)。'
            },
            {
                'id':'DV',
                'value':'Device Virtualization，設(shè)備虛擬化，通過虛擬化技術(shù)可以實(shí)現(xiàn)不同設(shè)備的能力和資源融合。'
            },
            {
                'id':'FA',
                'value':'Feature Ability，元程序，代表有界面的Ability，用于與用戶進(jìn)行交互。'
            },
            {
                'id':'HAP',
                'value':'HarmonyOS Ability Package，一個(gè)HAP文件包含應(yīng)用的所有內(nèi)容，由代碼、資源、三方庫(kù)及應(yīng)用配置文件組成，其文件后綴名為.hap。'
            },
            {
                'id':'HDF',
                'value':'Hardware Driver Foundation，硬件驅(qū)動(dòng)框架，用于提供統(tǒng)一外設(shè)訪問能力和驅(qū)動(dòng)開發(fā)、管理框架。'
            },
            {
                'id':'IDN',
                'value':'Intelligent Distributed Networking，是HarmonyOS特有的分布式組網(wǎng)能力單元。開發(fā)者可以通過IDN獲取分布式網(wǎng)絡(luò)內(nèi)的設(shè)備列表和設(shè)備狀態(tài)信息，以及注冊(cè)分布式網(wǎng)絡(luò)內(nèi)設(shè)備的在網(wǎng)狀態(tài)變化信息。'
            },
            {
                'id':'MSDP',
                'value':'Mobile Sensing Development Platform，移動(dòng)感知平臺(tái)。MSDP子系統(tǒng)提供兩類核心能力：分布式融合感知和分布式設(shè)備虛擬化。'
            },
            {
                'id':'PA',
                'value':'Particle Ability，元服務(wù)，代表無界面的Ability，主要為Feature Ability提供支持，例如作為后臺(tái)服務(wù)提供計(jì)算能力，或作為數(shù)據(jù)倉(cāng)庫(kù)提供數(shù)據(jù)訪問能力。'
            },
            {
                'id':'Supervirtualdevice',
                'value':'超級(jí)虛擬終端亦稱超級(jí)終端，通過分布式技術(shù)將多個(gè)終端的能力進(jìn)行整合，存放在一個(gè)虛擬的硬件資源池里，根據(jù)業(yè)務(wù)需要統(tǒng)一管理和調(diào)度終端能力，來對(duì)外提供服務(wù)。'
            }
        ],
        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'
        })
    }
}

復(fù)制

效果如下：

6.編寫第五個(gè)頁(yè)面

新建一個(gè)頁(yè)面，用于介紹harmongy官方網(wǎng)站。代碼如下

hml：

復(fù)制

css：

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

審核編輯：符乾江