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

Posted 2022-10-09

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

1.1 类Web范式~三件套开发

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

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

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

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

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

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

<text class="title" id="login-text">
    <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.结果样式如下：

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

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

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容器：

对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写的样式与功能相同：