【04】制作一个鸿蒙应用-【先写一下最基本的前端代码】-优雅草科技伊凡

大家好我是伊凡，这是第四篇，我感觉我们有必要加快一下进度了，目前我预计想要在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作为首页，下方在加入一个跳转按钮，

这里

    <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。

写第二个页面

编辑切换为居中

添加图片注释，不超过 140 字（可选）

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

编辑切换为居中

添加图片注释，不超过 140 字（可选）

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

编辑切换为居中

添加图片注释，不超过 140 字（可选）

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

编辑切换为居中

添加图片注释，不超过 140 字（可选）

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

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

【04】制作一个鸿蒙应用-【先写一下最基本的前端代码】-优雅草科技伊凡相关推荐

【02】从零开始跟我一起制作一个鸿蒙的应用-★运行项目测试测试★---优雅草科技伊凡
[02]从零开始跟我一起制作一个鸿蒙的应用-★运行项目测试测试★---优雅草科技伊凡上一篇我们已经完成了实名认证以及开发工具的准备,现在我们开始进入开发阶段,一样废话不多说开撸,有人问这个从零是怎么 ...
【01】从零开始跟我一起制作一个鸿蒙的应用-★注册开发者和准备工具★---优雅草科技伊凡
[01]从零开始跟我一起制作一个鸿蒙的应用-★注册开发者和准备工具★---优雅草科技伊凡目录 1,登录鸿蒙官网 1 2, 实名开发者认证 2 3, 选择开发语言 3 4, 下载工具 4 5, 安装工 ...
详细说明如何配置蜻蜓Q系统的直播功能完美实现直播和观赏直播，推拉流配置完整说明一颗优雅草科技伊凡写
详细说明如何配置蜻蜓Q系统的直播功能完美实现直播和观赏直播,推拉流配置完整说明一颗优雅草科技伊凡写一.登录后台找到直播配置依次在站点配置-直播配置编辑切换为居中添加图片注释,不超过 140 ...
【03】从零开始跟我一起制作一个鸿蒙的应用-★规划搭建鸿蒙应用版的蜻蜓短视频系页面★---优雅草科技伊凡
好这是第三篇,进度有点小慢,主要最近咱们挺忙碌更新产品的,预告一下优雅草科技将要推出一款酒吧点餐-运营-活动-供应商进销存erp的一款线下线上结合软件,已在成都地区酒吧稳定商用好几年,本文为伊凡原创撰 ...
matlab吉他效果器,我老师要我制作一个效果器，自己写代码的。。。
附录用MATLAB仿真 [Y,FS,BITS]=wavread('wei'): SIZ=wavread('wei','size'); Time=1:SIZ(1); Plot(time,Y);% ...
制作一个简单HTML+CSS个人网页设计（web前端大作业）
这是一个电影网页制作,非常简单,非常适合大学生网页制作 html <!doctype html> <html> <head> <meta charset=&q ...
用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...
【05】制作鸿蒙版蜻蜓短视频系统-事件原理及完成点击，长按，双击等操作实现跳转-优雅草伊凡
大家好我是伊凡,这是第五篇现在已经开始加快进度了,本次开始熟悉点击事件和各类写法,下一步开始写底部导航和顶部导航,本文为伊凡原创撰写仅仅代表伊凡个人观点,不代表优雅草科技的观点与其立场,谢谢. 点击事 ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...

【04】制作一个鸿蒙应用-【先写一下最基本的前端代码】-优雅草科技伊凡

【04】制作一个鸿蒙应用-【先写一下最基本的前端代码】-优雅草科技伊凡相关推荐

最新文章

热门文章