大家好我是伊凡,这是第四篇,我感觉我们有必要加快一下进度了,目前我预计想要在20篇幅内创造好第一个bate测试版,本节内容我们直接把写页面的所有基本代码都过一遍,然后在项目中灵活运用,本文为伊凡原创撰写仅仅代表伊凡个人观点,不代表优雅草科技的观点与其立场,谢谢,有问题欢迎来找伊凡聊。

前言,有html基础知识甚至有vue的基础知识的朋友这里看起来是非常快的。

A页面跳转B页面

首先我们的思路是建立a页面,建立b页面,a页面做按钮跳转b页面,b页面做按钮回跳转A页面

XML编写方式:

上篇我们在xml里写了一句代码并且展示,xml里代码基本格式为:

<Text> 文字

<Image> 图像

<Button> 按钮

JAVA编写方式:

每个对象表示要展示的内容,

Text对象 文字

Image对象 图像

Button对象 按钮

写第一个页面

我们以xml编写方式来,第一我们把昨天这个子页面ability_main.xml作为首页,下方在加入一个跳转按钮,

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(1)

这里

<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="这是首页-优雅草科技"ohos:text_size="20vp"/><Buttonohos:id="$ id:botton_sns" 给个button的id 这个可以自定义,图文板块像个社交因此设置为snsohos:height="match_content" 高ohos:width="match_content" 宽ohos:background_element="#FF00DFF3" 背景色 以及色号ohos:text_size="20fp" button 按钮的文字尺寸ohos:text="跳转图文页面" button按钮的 文字/>

这里有两个点,一个 ohos:height="match_content" 宽高这里的match_content属性意思为包住这块内容的尺寸跟随,使用match_parent属性,表示该控件的宽、高占剩下的所有区域,相当于除了文字就全屏了,大家可以测试,当然不适合。

第二个点 fp这个单位

fp,font-size pixels,字体像素单位,其大小规范默认情况下与vp相同,但如果开发者在设置中修改了字体显示大小,就会在vp的基础上乘以scale系数。即默认情况下 1 fp = 1vp,如果设置了字体显示大小,则会根据实际情况自动设置 1fp = 1vp * scale。

写第二个页面

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(2)

第二个页面因为是图文社区,所以我命名sns新建成功,

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(3)

第二个页面我们需要以java方式编写(先熟悉一下),正常按道理写我们依然用xml,因此我进入sns java进行编写,后续其他页面 我们依然已xml来写。

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(4)

多出来的 ability_xml 我们可以删掉,sns对应上面的子页面snsSlice,进入snsSlice.java后开始以下代码:

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(5)

我们新建了一个布局对象d,下面是新建了文字对象i,参考这个写法对应有提示对文字对象的各种属性,图文也就也是这样参考了。

DirectionalLayout d = new DirectionalLayout(this) //创建布局Text i = new Text(this); //创建文字对象i.setText("第二个以java方式编写的子页面"); //创建文字对象内容i.setTextColor(Color.MAGENTA); //创建文字对象颜色i.setTextSize(30);//文字对象大小d.addComponent(i); //把文字对象添加到 布局中

(制作一个鸿蒙应用-先写一下最基本的前端代码-优雅草伊凡)(6)

本部分完结,下部分跟伊凡一起开始做页面的点击跳转,新建这几个页面并且开始对首页开始写大布局,我们将一步步的完成一个应用,最后举一反三我们可以做出无数个有用的应用。

,