大家好我是伊凡，這是第四篇，我感覺(jué)我們有必要加快一下進(jìn)度了，目前我預(yù)計(jì)想要在20篇幅內(nèi)創(chuàng)造好第一個(gè)bate測(cè)試版，本節(jié)內(nèi)容我們直接把寫(xiě)頁(yè)面的所有基本代碼都過(guò)一遍，然后在項(xiàng)目中靈活運(yùn)用，本文為伊凡原創(chuàng)撰寫(xiě)僅僅代表伊凡個(gè)人觀點(diǎn)，不代表優(yōu)雅草科技的觀點(diǎn)與其立場(chǎng)，謝謝，有問(wèn)題歡迎來(lái)找伊凡聊。

前言，有html基礎(chǔ)知識(shí)甚至有vue的基礎(chǔ)知識(shí)的朋友這里看起來(lái)是非常快的。

A頁(yè)面跳轉(zhuǎn)B頁(yè)面

首先我們的思路是建立a頁(yè)面，建立b頁(yè)面，a頁(yè)面做按鈕跳轉(zhuǎn)b頁(yè)面，b頁(yè)面做按鈕回跳轉(zhuǎn)A頁(yè)面

XML編寫(xiě)方式：

上篇我們?cè)趚ml里寫(xiě)了一句代碼并且展示，xml里代碼基本格式為：

<Text> 文字

<Image> 圖像

<Button> 按鈕

JAVA編寫(xiě)方式：

每個(gè)對(duì)象表示要展示的內(nèi)容，

Text對(duì)象 文字

Image對(duì)象 圖像

Button對(duì)象 按鈕

寫(xiě)第一個(gè)頁(yè)面

我們以xml編寫(xiě)方式來(lái)，第一我們把昨天這個(gè)子頁(yè)面ability_main.xml作為首頁(yè)，下方在加入一個(gè)跳轉(zhuǎn)按鈕，

?

這里

<Textohos:id="$+id:text_helloworld"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="這是首頁(yè)-優(yōu)雅草科技"ohos:text_size="20vp"/><Buttonohos:id="$+id:botton_sns" 給個(gè)button的id 這個(gè)可以自定義，圖文板塊像個(gè)社交因此設(shè)置為snsohos:height="match_content" 高ohos:width="match_content" 寬ohos:background_element="#FF00DFF3" 背景色 以及色號(hào)ohos:text_size="20fp" button 按鈕的文字尺寸ohos:text="跳轉(zhuǎn)圖文頁(yè)面" button按鈕的 文字 />

這里有兩個(gè)點(diǎn)，一個(gè) ohos:height="match_content" 寬高這里的match_content屬性意思為包住這塊內(nèi)容的尺寸跟隨，使用match_parent屬性,表示該控件的寬、高占剩下的所有區(qū)域，相當(dāng)于除了文字就全屏了，大家可以測(cè)試，當(dāng)然不適合。

第二個(gè)點(diǎn) fp這個(gè)單位

fp，font-size pixels，字體像素單位，其大小規(guī)范默認(rèn)情況下與vp相同，但如果開(kāi)發(fā)者在設(shè)置中修改了字體顯示大小，就會(huì)在vp的基礎(chǔ)上乘以scale系數(shù)。即默認(rèn)情況下 1 fp = 1vp，如果設(shè)置了字體顯示大小，則會(huì)根據(jù)實(shí)際情況自動(dòng)設(shè)置 1fp = 1vp * scale。

寫(xiě)第二個(gè)頁(yè)面

?

編輯切換為居中

添加圖片注釋，不超過(guò) 140 字（可選）

第二個(gè)頁(yè)面因?yàn)槭菆D文社區(qū)，所以我命名sns新建成功，

?

編輯切換為居中

添加圖片注釋，不超過(guò) 140 字（可選）

第二個(gè)頁(yè)面我們需要以java方式編寫(xiě)(先熟悉一下)，正常按道理寫(xiě)我們依然用xml，因此我進(jìn)入sns java進(jìn)行編寫(xiě),后續(xù)其他頁(yè)面 我們依然已xml來(lái)寫(xiě)。

?

編輯切換為居中

添加圖片注釋，不超過(guò) 140 字（可選）

多出來(lái)的 ability_xml 我們可以刪掉，sns對(duì)應(yīng)上面的子頁(yè)面snsSlice，進(jìn)入snsSlice.java后開(kāi)始以下代碼：

?

編輯切換為居中

添加圖片注釋，不超過(guò) 140 字（可選）

我們新建了一個(gè)布局對(duì)象d，下面是新建了文字對(duì)象i，參考這個(gè)寫(xiě)法對(duì)應(yīng)有提示對(duì)文字對(duì)象的各種屬性，圖文也就也是這樣參考了。

DirectionalLayout d = new DirectionalLayout(this) //創(chuàng)建布局 Text i = new Text(this); //創(chuàng)建文字對(duì)象 i.setText("第二個(gè)以java方式編寫(xiě)的子頁(yè)面"); //創(chuàng)建文字對(duì)象內(nèi)容 i.setTextColor(Color.MAGENTA); //創(chuàng)建文字對(duì)象顏色 i.setTextSize(30);//文字對(duì)象大小d.addComponent(i); //把文字對(duì)象添加到 布局中

?

本部分完結(jié)，下部分跟伊凡一起開(kāi)始做頁(yè)面的點(diǎn)擊跳轉(zhuǎn)，新建這幾個(gè)頁(yè)面并且開(kāi)始對(duì)首頁(yè)開(kāi)始寫(xiě)大布局，我們將一步步的完成一個(gè)應(yīng)用，最后舉一反三我們可以做出無(wú)數(shù)個(gè)有用的應(yīng)用。

總結(jié)

以上是生活随笔為你收集整理的【04】制作一个鸿蒙应用-【先写一下最基本的前端代码】-优雅草科技伊凡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。