1、热情的开始

申明本文章都是个人的看法，不黑也不吹！！！同时也乐于跟大家交流鸿蒙的开发。前段时间新闻爆出各大厂有计划适配鸿蒙系统计划，作为一个客户端开发很显然也对此引发兴趣。抱着对鸿蒙未来持乐观的态度的我，于是热情的进入官网进入学习状态。

2、进入鸿蒙开发-黑布林大李子有点甜的开始

别的不说ArkUI申明式写法确实用起来挺舒服，语法跟swiftUI以及flutter写法基本一致，支持热加载预览让UI开发速度嘎嘎快，更重要的是支持一套代码多端部署在华为全家桶设备上，甚至也是支持跨平台在iOS和安卓上面跑的，这么想是不是特别的香呀？

参考官网的开发例子，写了一个简单的ToDoDeme项目。

学习的内容如下：

ArkUI的基本语法结构，其实就是TS语法的基础上封装了一套声明式UI
ArkUI页面的生命周期
UI基本的元素构造
数据的状态管理【单双向数据流绑定、父子页面的传值】
页面跳转

虽然没有学习过TS语言，但是并不妨碍理解，整个学习的过程大概3天就能理解以上基础内容，无非就是语法上的差异让习惯于面向对象语言开发的我写的有点难受。

于是将掌握的基础知识进行了一番输出，话不多说，进入demo演示吧

怎么样？鸿蒙这颗黑布林大李子是不是很甜的...熟悉的声明式UI写法，状态管理跟swiftUI也很类似，学习的成本相对而言比较低，还不快入手试试？

因为是简易的demo，所以在代码命名上没有注重命名规则，相关代码如下：

主页面代码如下：

typescript 复制代码

import router from '@ohos.router'
import call from '@ohos.telephony.call'
import ToDoItem from './ToDoItem'

@Entry  //页面入口装饰器
@Component  ///组建装饰器
struct Index{   ///结构体
  @State private dataSource:Array<string> = []
  @State backMsg:string = ""
  @State isChangeA:boolean = false

  ///页面显示时
  aboutToAppear(){
    this.dataSource = [
      "我最帅我最帅",
      '来一瓶肥仔快乐水',
      '黑布林大李子甜不甜',
      '你个扑盖仔'
    ]
  }

  onPageShow(){
    this.backMsg = (router.getParams() as Record<string,string>)["backMsg"]
  }

  ///页面渲染
  build() {
    ///纵向布局
    Column() {
      ///文本
      Text("待办事项")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .lineHeight(35)
        .margin({ top: 40, bottom: 20})
        .textAlign(TextAlign.Start)

      ///ForEach列表
      ForEach(this.dataSource, (item,index) => {
        ToDoItem({content:item,isChangeA:this.isChangeA})
      })
      Divider()
      Button("点击按钮跳转到第二个页面",{type:ButtonType.Capsule})
        .width('80%')
        .height(50)
        .backgroundColor(Color.Red)
        .margin({top:50})
        .onClick(()=>{
          this.isChangeA = !this.isChangeA
          router.pushUrl({url:'pages/SecondPage',params:{msg:'第一个页面传递的值'}})
        })

      Button("点击按钮改变list的状态",{type:ButtonType.Capsule})
        .width('80%')
        .height(50)
        .backgroundColor(Color.Red)
        .margin({top:50})
        .onClick(()=>{
          this.isChangeA = !this.isChangeA
        })

      Text(this.backMsg)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({top:40})
    }
  }
}

单个ToDoitem的实现

typescript 复制代码

@Preview({
  title:"ToDoItem"
})

@Component
export default struct ToDoItem{
  private content:string = "123"
  @State isChange:boolean = false
  @Prop isChangeA:boolean = false

  aboutToAppear(){
    console.log("ToDoItem aboutToAppear Component的生命周期")
  }

  onPageShow(){
    console.log("ToDoItem onPageShow Entry的生命周期")
  }

  onPageHide(){
    console.log("ToDoItem onPageHide Entry的生命周期")
  }

  aboutToDisappear(){
    console.log("ToDoItem aboutToDisappear Component的生命周期")
  }

  @Builder imageView(){
    Image((this.isChange || this.isChangeA) ? $r('app.media.ic_ok') : $r('app.media.ic_default'))
      .objectFit(ImageFit.Contain)
      .width(28)
      .height(28)
      .margin({left:20,right:10})
  }

  build(){
    Row(){
      this.imageView()
      Text(this.content)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .decoration({type:(this.isChange || this.isChangeA) ? TextDecorationType.LineThrough:TextDecorationType.None})
    }
    .height('64vp')
    .width('100%')
    .onClick(()=>{
        this.isChange = !this.isChange
    })
  }

3、鸿蒙跨平台的了解-黑布林大李子有点酸的开始

相信各位看官看到了这里，都有点而兴趣了吧？那么我再告诉大家ArkUI-X是跨平台的，支持android和iOS 于是满怀的期待打开了ArkUI-X的介绍

官方gitee：gitee.com/arkui-x
官方demo：gitee.com/arkui-x/sam...

支持跨平台对于任何一位客户端和前端开发人员来说都是绝对的打分项，毕竟谁不想一套代码在多个平台运行呀。于是我看了下在iOS跨平台的运行原理进行了一番基础研究，通过使用ArkUI-X跨平台库支持打出iOS和安卓的包，我这里是直接从官方demo下载的项目。

首先文件是如何在iOS上面映射过程，以下个人站在iOS客户端角度为大家简单分析下：

映射文件过程跟上述图片基本一致

所有的ArkUI主页面都会继承自StageViewController，而StageViewController继承自UIViewController 上述代码图中的EntryEntryAbilityViewController就是继承自StageViewController。

那么StageViewController如此重要，里面都干了啥呢？于是找到StageViewController.m文件在viewDidLoad主要干了两件事情initWindowView和initPlatformPlugin，

咱们主要关心initWindowView的干了啥，怎么样让ArkUI渲染生成iOS的UI的，于是找到WindowView.h文件 WindowView继承自UIView并提供了页面生命周期管理协议

WindowView的初始化方法也仅仅是做了简单的配置，还是没有看到渲染UI元素的过程呀，WindowView只不过是创建了一个view然后添加到Controller而已，这个ArkUI的组件元素如何渲染出来呢？

于是继续往下面翻看源代码，看了不该看见的东西，等等这个触摸事件怎么是用的flutter的东西进行包装的,what fuck?

难道ArkUI的底层渲染UI也是用的flutter？于是赶紧在项目里面搜索一番，结果发现...猝

这个AceViewController对应的应该就是iOS的FlutterViewController。好吧，至此应该是印证我的猜想，我也就没有必要再去看flutter渲染UI的过程了...自此我也接受里面引用flutter的事实，但是令我没有想到的是，后面还有更加让我感到这个黑布林大李子太酸了事情...

4、真机运行-黑布林大李子太酸啦...

我拿了一台华为鸿蒙的测试机运行自己的写的demo用真机跑起来崩啦...纳尼，后面发现是上述demo中部分代码有问题。

typescript 复制代码

onPageShow(){
   this.backMsg = (router.getParams() as Record<string,string>)["backMsg"]
}

于是暂时注释了这段代码，终于在真机上看到了demo界面，心想这下可以了吧，手指激动在屏幕上点，不停的点...咋没有反应呀...再次猝!!!

5、一些个人看法

虽然现在的鸿蒙系统在跨平台上的支持不太行，甚至当前根本跨平台的用，但是对于企业的一个成熟项目来说，应该暂时不会考虑用鸿蒙跨平台去开发Android和iOS的应用，但是去适配鸿蒙系统应该是必然的。如果官方能尽快解决性能问题，个人还是愿意保持开放的态度去学习鸿蒙相关技术。各位看官你怎么看？要不要来一口黑布林大李子？

鸿蒙开发黑布林大李子有点酸...

1、热情的开始

2、进入鸿蒙开发-黑布林大李子有点甜的开始

3、鸿蒙跨平台的了解-黑布林大李子有点酸的开始

4、真机运行-黑布林大李子太酸啦...

5、一些个人看法