電子產(chǎn)業(yè)一站式賦能平臺

PCB聯(lián)盟網(wǎng)

搜索
查看： 712|回復(fù)： 0
收起左側(cè)

HarmonyOS北向應(yīng)用開發(fā)者 極速入門教程（一）

[復(fù)制鏈接]

2607

主題

2607

帖子

7472

積分

高級會員

Rank: 5Rank: 5

積分
7472
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2021-1-12 15:56:57 | 只看該作者 回帖獎勵 |倒序?yàn)g覽 |閱讀模式
HarmonyOS北向應(yīng)用開發(fā)者 極速入門教程（一）, 說明：一個完整優(yōu)秀的應(yīng)用服務(wù)需要產(chǎn)品經(jīng)理、UIUE、前端工程師、后端工程師、測試工程師等團(tuán)隊協(xié)作才能完成，本教程適合有JAVA與JS知識基礎(chǔ)的開發(fā)者使用，按照本教程練習(xí)完成，即可以初步進(jìn)行鴻蒙操作系統(tǒng)基于
Dev
E
co Studio 應(yīng)用服務(wù)代碼開發(fā)工作。 本教程中如發(fā)現(xiàn)有錯誤請留言勘正，有更好的完善想法者，布置的作業(yè)與心得等愿意上交者，請跟貼留言。本教程為本公司團(tuán)隊實(shí)踐工作中原創(chuàng)，歡迎引用，但是引用中請注明來源：蛟龍騰飛。 目錄 一、 注冊華為賬戶 二、 安裝 DevEco Studio 1.系統(tǒng)要求 2.DevEco Studio 下載安裝 三、 實(shí)戰(zhàn)練習(xí) 1.練習(xí)題一 圖片文字代碼，照搬照抄我們給的七個案例。 2.練習(xí)題二 按照提示，自由發(fā)揮，大膽嘗試。 2.練習(xí)題三 全面體驗(yàn)，不要怕弄壞DevEco Studio ！
一、注冊華為賬戶 我們首先需要一個華為的賬號 并進(jìn)行實(shí)名認(rèn)證 ， 考注冊華為賬號鏈接：
https://developer.huawei.com/consumer/cn/doc/20300
。 如果已經(jīng)有賬戶并認(rèn)證過的，本步驟忽略。
二、安裝
Dev
E
co Studio
1.系統(tǒng)要求

圖片1.png （19.87 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

23 分鐘前 上傳

圖片2.png （20.24 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

23 分鐘前 上傳 2.
Dev
E
co Studio
下載安裝 我們可以進(jìn)入官方地址下載
Dev
E
co Studio
。 下載地址 ：https://developer.HarmonyOS.com/cn/develop/deveco-studio#download 點(diǎn)擊鏈接進(jìn)入官網(wǎng)我們可以看到兩個版本的操作系統(tǒng)下載，這里可以根據(jù)自己的操作系統(tǒng)進(jìn)行下載，這里我用的是Windows的，這里我就演示W(wǎng)indows的下載過程。

圖片3.png （96.61 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

22 分鐘前 上傳 這里我們點(diǎn)擊Windows版的進(jìn)行下載，這里會彈到一個登陸界面，這里就用我們剛剛注冊號的華為賬號進(jìn)行登陸即可下載。

圖片4.png （30 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

22 分鐘前 上傳 下載完成后我們在對應(yīng)的路徑中找到下載的安裝包，解壓。

圖片5.png （21.96 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

22 分鐘前 上傳 打開解壓的文件然后進(jìn)行安裝。

圖片6.png （19.33 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

21 分鐘前 上傳 安裝歡迎界面，點(diǎn)擊next進(jìn)行下一步。

圖片7.png （34.76 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

21 分鐘前 上傳 這里可以自主選擇安裝的路徑，路徑盡量別使用漢字，然后點(diǎn)擊next進(jìn)行下一步。

圖片8.png （23.64 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

21 分鐘前 上傳 我們勾選第一個，可以在桌面上創(chuàng)建一個快捷鍵，方便打開應(yīng)用，然后點(diǎn)擊next進(jìn)行下一步。

圖片9.png （22.2 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

21 分鐘前 上傳 這里默認(rèn)就好了，然后點(diǎn)擊install進(jìn)行安裝 。

圖片10.png （25.46 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

20 分鐘前 上傳 這里靜靜等待安裝好，點(diǎn)擊next進(jìn)行下一步。

圖片11.png （18.4 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

20 分鐘前 上傳 這里就安裝好了，我們可以在桌面上看到按照的Studio，這里我們可以雙擊打開看看 。

圖片12.png （14.83 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

20 分鐘前 上傳 點(diǎn)開我們這里不需要導(dǎo)入什么東西，直接選擇ok就好了，然后會彈出一個協(xié)議，這里的協(xié)議我們把√打上，然后點(diǎn)擊Agree進(jìn)入APP 。

圖片13.png （13.47 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

20 分鐘前 上傳 創(chuàng)建項目

圖片14.png （39.81 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

19 分鐘前 上傳
三、實(shí)戰(zhàn)練習(xí) 截圖另外做文檔答題。文檔要求，文件名：某某研究日志日期。文件內(nèi)容，題目和答題，截圖代碼和文字等綜合展示。 1.練習(xí)題一 以 下是基于DevEco Studio 蛟龍騰飛北向應(yīng)用開發(fā)工程師已經(jīng)實(shí)現(xiàn)的布局、功能、代碼及路徑，請安裝要求一模一樣的流程和效果，在自己的DevEco Studio 實(shí)現(xiàn)。 這里我們可以自行選擇自己想開發(fā)的設(shè)備和模板，這里我們以Phone為例，開發(fā)模板選擇空特性java的開發(fā)模板，點(diǎn)擊next進(jìn)行下一步 。 開發(fā)的設(shè)備有七種： Phone Tablet Car Tv Wearable Lite wearable smart vision Phone 設(shè)備 中有很多種不同的模板，主要是java和js進(jìn)行開發(fā)以及不同的模板樣式，不同樣式之間布局不一樣，不同的布局所展示的效果代碼已經(jīng)寫入其中，只需要加入想加入的元素即可。

圖片15.png （45.81 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

19 分鐘前 上傳 選擇好了之后點(diǎn)擊next進(jìn)行下一步。 這里是創(chuàng)建項目的一些項目配置，配置完成點(diǎn)擊Finish完成創(chuàng)建。

圖片16.png （43.89 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

19 分鐘前 上傳 完成創(chuàng)建后，我們進(jìn)入了主界面，這里需要等待一小會，因?yàn)橐恍┡渲脰|西在進(jìn)行下載配置 。

圖片7.png （34.76 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

19 分鐘前 上傳

P
hone模擬器上的代碼案例

圖片18.png （518.03 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

18 分鐘前 上傳 顯示效果：

圖片19.png （95.36 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

17 分鐘前 上傳

圖片20.png （36.88 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

17 分鐘前 上傳

圖片21.png （223.42 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

17 分鐘前 上傳

圖片22.png （227.35 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

16 分鐘前 上傳 雙擊圖中選中的設(shè)備就可以運(yùn)行了 顯示如下：

圖片23.png （266.46 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

16 分鐘前 上傳

圖片24.png （377.15 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

16 分鐘前 上傳
運(yùn)行效果：

圖片25.png （68.55 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

16 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片26.png （63.65 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

16 分鐘前 上傳 代碼如下： 第一個布局中 <?xml version=“1.0“ encoding=“utf-8“?>

<Directionallayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“80px“

             ohos:top_margin=“280px“

             ohos:left_margin=“50px“/>

     </DirectionalLayout>

     <DirectionalLayout

         ohos:weight=“1“

         ohos:width=“match_parent“>

         <Image

             ohos:width=“1080px“

             ohos:height=“468px“

             ohos:image_src=“$media:index12.jpg“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“3“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:text=“ 帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 跳轉(zhuǎn)到萬物互聯(lián)的智能世界!“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 馬上創(chuàng)建體驗(yàn)個人、公司或組織的鴻蒙應(yīng)用吧！“/>

         <Button

             ohos:id=“$+id:jltfbutton“

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 點(diǎn)擊了解更多“

             ohos:text_color=“red“

             ohos:text_size=“100px“

             ohos:top_margin=“400px“

             ohos:left_margin=“420px“/>

     </DirectionalLayout>



</DirectionalLayout> 第二個布局中 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“80px“

             ohos:top_margin=“280px“

             ohos:left_margin=“50px“/>

     </DirectionalLayout>

     <DirectionalLayout

         ohos:weight=“1“

         ohos:width=“match_parent“>

         <Image

             ohos:width=“1080px“

             ohos:height=“468px“

             ohos:image_src=“$media:index13.jpg“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“3“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:text=“ 你好，歡迎來到鴻蒙時代！“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 蛟龍騰飛，鴻蒙先行者，全心全意為你“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“10px“

             ohos:top_margin=“10px“

             ohos:text=“ 提供鴻蒙各項服務(wù)！ 馬上咨詢：李先生 13725519713 或 18138827525“/>

     </DirectionalLayout>



</DirectionalLayout> 在slice文件的類中 添加點(diǎn)擊事件進(jìn)行跳轉(zhuǎn)

圖片27.png （372.1 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

15 分鐘前 上傳 Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;

button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {

         present（new JltfAbilitySlice（）,new Intent（））;

     }

}）;
TV模擬器上的代碼案例 新建項目選擇模板進(jìn)行下一步。

圖片28.png （45.16 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

15 分鐘前 上傳 顯示效果：

圖片29.png （216.39 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

15 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片30.png （188.8 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

15 分鐘前 上傳 代碼如下： 第一個頁面中的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



    <DirectionalLayout

        ohos:width=“match_parent“

        ohos:height=“160px“

        >

        <Text

            ohos:width=“match_content“

            ohos:height=“match_content“

            ohos:text=“ 蛟龍騰飛“

            ohos:text_size=“25fp“

            ohos:top_margin=“40px“

            ohos:left_margin=“40px“/>



    </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“920px“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“820px“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index6“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“1100px“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代

                                跳轉(zhuǎn)到萬物互聯(lián)的智能世界!

                                      馬上創(chuàng)建體驗(yàn)個人、公司或組織的鴻蒙應(yīng)用吧！“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 點(diǎn)擊了解更多“

                 ohos:text_size=“30fp“

                 ohos:top_margin=“290px“

                ohos:left_margin=“680px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二個頁面中的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“160px“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“25fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“40px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“920px“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:id=“$+id:direction1“

             ohos:height=“match_parent“

             ohos:width=“820px“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index7“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“1100px“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，歡迎來到鴻蒙時代！

                                      蛟龍騰飛，鴻蒙先行者，全心全意為你提供鴻蒙各項服務(wù)！   馬上咨詢：

                                               李先生:13725519713 或 18138827525“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后再第一個頁面中加入點(diǎn)擊事件進(jìn)行跳轉(zhuǎn) Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



   button.setClickedListener（new Component.ClickedListener（） {

         @Override

         public void onClick（Component component） {



             present（new JltfAbilitySlice（）,new Intent（））;

         }





     }）;
S
mart
vision模擬器上的代碼案例 新建項目選擇模板進(jìn)行下一步。

圖片31.png （39.96 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

14 分鐘前 上傳 這里選擇的是js開發(fā)的模板就需要下載node.js文件在編輯器中進(jìn)行配置（node.js）網(wǎng)上有下載教程。

圖片32.png （274.96 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

14 分鐘前 上傳 顯示效果：

圖片33.png （63.31 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

14 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片34.png （64.09 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

13 分鐘前 上傳 代碼如下： Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龍騰飛

     </text>

     <div class=“container1“>

         <image src=“/common/index27.jpg“ class=“jltfimg“/>

         <div class=“container2“>

             <text class=“jltftxt1“>

                 帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互

             </text>

             <text class=“jltftxt2“>

                 聯(lián)網(wǎng)時代. 跳轉(zhuǎn)到萬物互聯(lián)的智

             </text>

             <text class=“jltftxt3“>

                 能世界! 。馬上創(chuàng)建體驗(yàn)個人、

             </text>

             <text class=“jltftxt4“>

                 公司或組織的鴻蒙應(yīng)用吧！

             </text>

             <input class=“jltfbtn“type=“button“ value=“ 點(diǎn)擊了解更多“/>

         </div>



     </div>



</div> Index.css .
container {

     flex-direction: column;

     width: 960px;

     height: 480px;

     justify-content: center;

     align-items: center;

}

.container1 {

     flex-direction: row;

     width: 960px;

     height: 400px;

}

.
container2 {

     margin-left: 30px;

     flex-direction: column;

     width: 600px;

     height: 400px;

}

.jltftxt {

      margin-left: -700px;

      margin-bottom: 10px;

     font-size: 45px;

}

.jltftxt1 {

     margin-top: 45px;

}

.jltftxt4 {

     margin-left: 5px;

}

.jltfimg {

     margin-top: 40px;

     width: 300px;

     height: 282px;

     margin-left: 40px;

}

.jltfbtn {

     height: 60px;

     width: 280px;

     margin-left: 260px;

     margin-top: 50px;

}

.
jltftxt1,.jltftxt2,.
jltftxt3,.jltftxt4{

     font-size: 40px;

     margin-left: 20px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} jltfIndex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龍騰飛

     </text>

      <div class=“container1“>

     <image src=“/common/index28.jpg“ class=“jltfimg“/>

          <div class=“container2“>

              <text class=“jltftxt1“>

                   你好，歡迎來到鴻蒙時代！

              </text>

              <text class=“jltftxt2“>

                   蛟龍騰飛，鴻蒙先行者，全

              </text>

              <text class=“jltftxt3“>

                   心全意為你提供鴻蒙各項服

              </text>

              <text class=“jltftxt4“>

                   務(wù)！

              </text>

          </div>

      </div>

</div> jltfIndex.css .
container {

     flex-direction: column;

     width: 960px;

     height: 480px;

     justify-content: center;

     align-items: center;

}

.container1 {

     flex-direction: row;

     width: 960px;

     height: 400px;

}

.container2 {

     margin-left: 5px;

     flex-direction: column;

     width: 600px;

     height: 400px;

}

.jltftxt {

     margin-left: -700px;

     margin-bottom: 10px;

     font-size: 45px;

}

.jltftxt1 {

     margin-top: 50px;

}

.jltfimg {

     margin-top: 20px;

     width: 357px;

     height: 321px;

     margin-left: 20px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 45px;

     margin-left: 20px;

} jltfIndex.js
export default {

     data: {

     }

} 在第一個頁面js文件中加入跳轉(zhuǎn)的代碼 jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

還得在配置文件中配置相關(guān)下一個頁面的位置 config.json 找到圖中js的位置 “js“: [

   {

     “pages“: [

       “pages/index/index“,

       “pages/jltfindex/jltfindex“

     ],

     “name“: “default“

   }

] 加入“pages/jltfindex/jltfindex“ 下一個頁面位置即可
wearable模擬器上的代碼案例

圖片35.png （454.82 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

13 分鐘前 上傳 新建項目選擇模板進(jìn)行下一步。

圖片36.png （43.27 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

13 分鐘前 上傳 顯示效果：

圖片37.png （79.06 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

13 分鐘前 上傳
點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片38.png （66.6 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

13 分鐘前 上傳 代碼如下： 第一個頁面 Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龍騰飛

     </text>

     <image src=“/common/index22.png“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互

     </text>

     <text class=“jltftxt2“>

          聯(lián)網(wǎng)時代. 跳轉(zhuǎn)到萬物互聯(lián)的智

     </text>

     <text class=“jltftxt3“>

           能世界! 。馬上創(chuàng)建體驗(yàn)個人、

     </text>

     <text class=“jltftxt4“>

          公司或組織的鴻蒙應(yīng)用吧！

     </text>

     <input class=“jltfbtn“type=“button“ value=“點(diǎn)擊了解更多“/>

</div> Index.css .container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

      margin-left: -180px;

      margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltftxt4 {

     margin-left: 5px;

}

.jltfimg {

     width: 138px;

     height: 103px;

     margin-left: 5px;

}

.jltfbtn {

     height: 60px;

     width: 280px;

     margin-bottom: -60px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 30px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} Jltfidnex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龍騰飛

     </text>

     <image src=“/common/index16.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          你好，歡迎來到鴻蒙時代！

     </text>

     <text class=“jltftxt2“>

          蛟龍騰飛，鴻蒙先行者，全心全

     </text>

     <text class=“jltftxt3“>

          意為你提供鴻蒙各項服務(wù)！

     </text>



</div> Jltfindex.css .container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

     margin-left: -180px;

     margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;

     margin-left: 30px;

}

.jltfimg {

     width: 413px;

     height: 103px;

     margin-left: 8px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 30px;

} Jltfindex.js
export default {

     data: {

     }

} 然后進(jìn)行頁面跳轉(zhuǎn)的配置 在一個頁面index.js 中進(jìn)行配置 jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

這樣了還不能跳轉(zhuǎn)，“wearable”和“l(fā)itewearable”有不同，在litewearable中這樣就可以進(jìn)行跳轉(zhuǎn)了，但是在wearable中還需要在config.json 中進(jìn)行配置，添加跳轉(zhuǎn)的頁面的地址 “js“: [

   {

     “pages“: [

       “pages/index/index“,

       “pages/jltfindex/jltfindex“

     ],

     “name“: “default“,

     “window“: {

       “designWidth“: 454,

       “autoDesignWidth“: false

     }

   }

] 找到圖中位置添加 “pages/jltfindex/jltfindex“ 就可以了
car模擬器上的代碼案例 新建項目選擇模板進(jìn)行下一步。

圖片39.png （40.65 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

12 分鐘前 上傳
顯示效果：

圖片40.png （50.33 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

12 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片41.png （45.6 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

12 分鐘前 上傳 代碼如下： 第一個頁面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“20fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“526px“

                 ohos:height=“504px“

                 ohos:top_margin=“-50px“

                 ohos:left_margin=“20px“

                 ohos:image_src=“$media:index20“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代

                                跳轉(zhuǎn)到萬物互聯(lián)的智能世界!

                                            馬上創(chuàng)建體驗(yàn)個人、公司或組織的鴻蒙應(yīng)用吧！“

                 ohos:text_size=“20fp“

                 ohos:top_margin=“20px“

                 ohos:left_margin=“60px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 點(diǎn)擊了解更多“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“650px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二個頁面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

        ohos:weight=“1“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“20fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“357px“

                 ohos:height=“360px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index4“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，歡迎來到鴻蒙時代！

                                      蛟龍騰飛，鴻蒙先行者，全心全意為你提供鴻蒙各項服務(wù)!“

                 ohos:text_size=“20fp“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后綁定布局進(jìn)行跳轉(zhuǎn) Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {



         present（new jltftabletSlice（）,new Intent（））;

     }





}）;
T
ablet
模擬器上的代碼案例 新建項目選擇模板進(jìn)行下一步。

圖片42.png （41.46 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

11 分鐘前 上傳 顯示效果：

圖片43.png （65.29 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

11 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片44.png （48.63 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

11 分鐘前 上傳 代碼如下 第一個頁面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“40fp“

             ohos:top_margin=“180px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“160px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index6“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代

                                跳轉(zhuǎn)到萬物互聯(lián)的智能世界!

                                            馬上創(chuàng)建體驗(yàn)個人、公司或組織的鴻蒙應(yīng)用吧！“

                 ohos:text_size=“35fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“60px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 點(diǎn)擊了解更多“

                 ohos:text_size=“40fp“

                 ohos:top_margin=“380px“

                 ohos:left_margin=“1000px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二個頁面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

        ohos:weight=“1“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龍騰飛“

             ohos:text_size=“40fp“

             ohos:top_margin=“180px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index7“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，歡迎來到鴻蒙時代！

                                      蛟龍騰飛，鴻蒙先行者，全心全意為你提供鴻蒙各項服務(wù)!“

                 ohos:text_size=“35fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后再第一個頁面中添加點(diǎn)擊事件進(jìn)行跳轉(zhuǎn) Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {



         present（new jltftabletSlice（）,new Intent（））;

     }





}）;
L
ite
wearable模擬器上的代碼案例 新建項目選擇模板進(jìn)行下一步。

圖片45.png （40.01 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

11 分鐘前 上傳 顯示效果：

圖片46.png （78.42 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

10 分鐘前 上傳 點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個頁面

圖片47.png （68.52 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

10 分鐘前 上傳 代碼如下： Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龍騰飛

     </text>

     <image src=“/common/index22.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互

     </text>

     <text class=“jltftxt2“>

          聯(lián)網(wǎng)時代. 跳轉(zhuǎn)到萬物互聯(lián)的智

     </text>

     <text class=“jltftxt3“>

           能世界! 。馬上創(chuàng)建體驗(yàn)個人、

     </text>

     <text class=“jltftxt4“>

          公司或組織的鴻蒙應(yīng)用吧！

     </text>

     <input class=“jltfbtn“type=“button“ value=“ 點(diǎn)擊了解更多“/>

</div> Index.css .
container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

      margin-left: -180px;

      margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltfimg {

     width: 138px;

     height:103px;

     margin-left: 5px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} Jltfindex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龍騰飛

     </text>

     <image src=“/common/index16.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          你好，歡迎來到鴻蒙時代！

     </text>

     <text class=“jltftxt2“>

          蛟龍騰飛，鴻蒙先行者，全心全

     </text>

     <text class=“jltftxt3“>

          意為你提供鴻蒙各項服務(wù)！       </div> Jltfindex.css .
container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

     margin-left: -180px;

     margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltfimg {

     width: 413px;

     height:103px;

     margin-left: 8px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

} Jltfindex.js
export default {

     data: {

     }

} 在第一個頁面中添加跳轉(zhuǎn)的代碼 在第一個頁面js文件中加入如下代碼即可 jltfclick（） {

     router.replace（{

         uri:\“pages/jltfindex/jltfindex\“

     }）;

} 2. 練習(xí)題二 還是基于“練習(xí)一”題目中的圖片和文字內(nèi)容，7種設(shè)備中用其他不同的模板樣式嘗試實(shí)現(xiàn)一下和“練習(xí)一”模板樣式不一樣的效果，盡可能每種設(shè)備實(shí)現(xiàn)一種不同的布局和效果呈現(xiàn)，作業(yè)要求，樣式截圖與全部代碼。 3. 點(diǎn)擊和嘗試DevEco Studio 里的每個菜單欄,概覽這個DevEco Studio 的各項功能結(jié)構(gòu)。結(jié)合前面的練習(xí)，寫一個100字以上的Deveco Studio 體驗(yàn)心得。 具體編輯器使用的細(xì)節(jié)可以參考如下鏈接和內(nèi)容。
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

圖片48.png （17.06 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

10 分鐘前 上傳 HarmonyOS北向應(yīng)用開發(fā)者極速入門教程（一）.pdf
（2.12 MB, 下載次數(shù): 0） 8 分鐘前 上傳 點(diǎn)擊文件名下載附件

下載積分: 積分 -1 分



本教程為深圳市蛟龍騰飛網(wǎng)絡(luò)科技有限公司版權(quán)所有，引用者請注明來源：蛟龍騰飛。
回復(fù)

使用道具 舉報

發(fā)表回復(fù)

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規(guī)則


聯(lián)系客服 關(guān)注微信 下載APP 返回頂部 返回列表