基础
<h3>前言</h3>
<ul>
<li>2019年8月9日： HarmonyOS 1.0</li>
<li>2020年9月10日： HarmonyOS 2.0</li>
<li>2022年11月4日： HarmonyOS 3.0 DeveloperPreview</li>
<li>2023年8月4日： HarmonyOS 4.0 = AOSP + HMS + OpenHarmony</li>
<li>2024年： HarmonyOS Next = HMS + OpenHarmony</li>
</ul>
<p>> 名称解释
> OpenHarmony：内核，已开源
> HarmonyOs：操作系统，华为商用系统</p>
<ul>
<li>ArkTs：基于TypeScript基础上扩展声明式UI、状态管理等相应能力的一门编程语言</li>
<li>ArkUI：是一套构建分布式应用界面的声明式UI开发框架</li>
</ul>
<h3>环境搭建</h3>
<ul>
<li>安装编辑器
-- node.js
-- ohpm
-- HarmonyOS SDK</li>
</ul>
<h3>创建项目</h3>
<ul>
<li>开发模型
-- Stage(推荐): Compile SDK版本大于9，主推该模式开发，并且使用ArkTS语言
-- FA</li>
<li>低代码开发（Enable Super Visual）：拖拽进行页面布局，默认关闭</li>
<li>预览页面功能介绍1
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=902c0f6e22925f338191e5fb388b2f4a&amp;file=file.png" alt="" /></li>
<li>预览页面功能介绍2
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a6da97ab69644ac214e2ebdd8e57b9fa&amp;file=file.png" alt="" /></li>
<li>真机运行
--> 开启开发者模式，与android手机雷同
--> 项目签名</li>
</ul>
<h3>基础知识</h3>
<ul>
<li>布局
<pre><code>@Entry //声明这个组件可作为页面入口，即在 UIAbility 中加载或进行页面跳转
@Component //声明这是一个UI组件
struct MainPage{
/*@State代表**/
@State title: string = &quot;&quot;
build(){//声明布局
//如果被@Entry修饰的组件内部必须有一个根容器组件
}
}</code></pre></li>
<li>资源访问：$r('app.media.{filename}')、 $rawfile('{filename}.png')</li>
<li>属性方法：设置控件大小尺寸、字体大小颜色等</li>
<li>事件方法：点击事件、长按事件等
<pre><code>Buttion(&quot;确定&quot;)
.onClick(() =&gt; {})
.onClick(function(){}.bind(this))</code></pre></li>
<li>容器组件
<pre><code>Row(space: 10){ //横向布局
}
Column(space: 10){ //竖向布局
}</code></pre></li>
<li>基础组件
<pre><code>Text('文本组件')
.decoration(type: TextDecorationType.LineThrough) //设置横穿线</code></pre></li>
<li>样式
<pre><code>*********************重用基础样式*********************
方式一：内部(优先级更高)，只能设置通用样式，且不能传参
@Styles commonStyle(){
.width(&quot;100%&quot;)
.height(&quot;100%&quot;)
.backgroundColor(Color.Gray)
}
方式二：外部，只能设置通用样式
@Styles function commonStyle(){
.width(&quot;100%&quot;)
.height(&quot;100%&quot;)
.backgroundColor(Color.Gray)
}
使用
Column(){
...
}.commonStyle()
*********************扩展组件样式*********************
@Extend(Text) function textSytle(size: number, color: Color|string){
//内部还可以调用其他扩展组件样式函数
.fontSize(size)
.fontColor(color)
}
使用
Text().textSytle(14, Color.Pink)
Text().textSytle(14, &quot;#333333&quot;)</code></pre></li>
<li>自定义构建函数
<pre><code>@Component
struct ListView{
name: string = &quot;&quot;
build(){
Column(){
this.itemView1(name)
this.itemView2(name)
}
}
//方式一：只能被当前ListView这个组件调用
@Builder itemView1(context: string){
Text(content)
}
}
//方式二：可被多组件共同调用
@Builder function itemView2(context: string){
Text(content)
}</code></pre></li>
<li><strong>状态修饰符(数据驱动UI更新)</strong>
<pre><code>@Entry
@Component
struct MainPage{
@State title: string = &quot;原生标题&quot;
build(){
TitleBar(this.title)
.onClick(() =&gt; {
this.title = &quot;改变的标题&quot;
})
}
}
@Component
struct TitleBar{
title: String = &quot;&quot;
build(){
Text(this.title).setPadding(12)
.width(&quot;100%&quot;)
}
}</code></pre></li>
<li>页面路由跳转
<pre><code>//路由跳转
router.pushUrl({
url: &quot;路由地址&quot;, //最好到main.pages.json中去复制
parmas: {
key: value
}
})
//路由返回
router.back()
//路由获取参数
router.getParmas()[key]</code></pre></li>
<li>权限申请
-- 在module.json5文件中配置如下
<pre><code>{
&quot;module&quot;:{
...
&quot;requestPermissions&quot;: [
&quot;name&quot; : &quot;ohos.permission.INTERENT&quot;
]
}
}</code></pre></li>
<li><strong>存储</strong></li>
</ul>