OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

时间:2022-10-07 07:20:07

一.OpenHarmony/HarmonyOS的ArkUI的类Web范式开发

1.1 类Web范式~三件套开发

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

基于JS扩展的类****Web开发范****式的方舟开发框架包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)、平台适配层(Porting Layer)

JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。

1.我们首先新建一个项目,将语言选择为Js而不是eTS,配置如下图:

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

2.新建完成之后,项目文件结构图如下:

主要运用了web三件套:Html,Css,JavaScript。与MUI的开发方式及其相似。

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

3.先在index.html文件夹下写一下简单的登录->用户名输入框->密码输入框->登录按钮。

<text class="title" >
    <span>登录</span>
</text>
<input placeholder="输入用户名"></input>
<input placeholder="输入密码"></input>
<button style="padding: 12fp;">进入App</button>

4.给text写一个id,然后在index.css里进行配置:

#login-text{
    font-size: 40fp;
}

5.写一些公共样式,我们到MainAbilty里新建一个common文件夹,然后在下面新建一个css文件夹,作用于存放我们的公共样式。名为:mystyle.css。

然后在我们的主要的css文件内引用我们的公共样式。

引用格式如下:

@import "../../common/css/mystyle.css";

6.结果样式如下:

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

二.ArkUI的web范式的组件封装和父对子组件传值

1.首先在MainAbilty文件夹下新建一个components文件夹,然后新建一个组件文件夹,myinput,在其下新建三个文件,Html,Css,JavaScript,目前的目录结构如下:

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

2.然后把index.html里的input属性删除掉,因为我们在myinput文件下写了:

<input placeholder="{{placeholder}}" 
        type="{{inputtype}}"
        ></input>

3.然后在组件里js里写一下控制变量函数:然后我们在html

export default{
    props:{
        placeholder:"",
        lable:"",
        inputtype:""
}
}

4.对其样式进行美化:

因为我们需要美化的属于组件,我们直接可以到myinput.css对其进行样式美化。

因为我们的myinput.html采用了树形结构,划分了若干个div容器:

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解

对row进行美化,控制其用户名和后面的input输入框进行一个对齐。

.row{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

对input输入框进行美化控制,例如调整其圆角等等:

.my-input{
    margin-top: 5fp;
}

.input input{
    border: 2px solid #000;
}

5.上面我们设置了inputtype变量,所以我们这里可以将两个不同的输入框设置不同的框类型。

<Myinput placeholder="输入用户名"
         lable="用户名"
         inputtype="text"
        ></Myinput>
<Myinput placeholder="输入密码"
         lable="密码"
         inputtype="password"
        ></Myinput>

6.运行效果如下,和之前使用ets写的样式与功能相同:

OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解