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

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

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

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

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

<Text> 文字

<Image> 图像

<Button> 按钮

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

Text对象 文字

Image对象 图像

Button对象 按钮

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

这里

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

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

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

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

我们新建了一个布局对象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); //把文字对象添加到 布局中

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