OpenHarmony/HarmonyOS的ArkUI的类Web范式开发详解
文章目录
一.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变量，所以我们这里可以将两个不同的输入框设置不同的框类型。
6.运行效果如下，和之前使用ets写的样式与功能相同：
