HarmonyOS开发的项目运行在ArkUI-X详解

HarmonyOS开发的项目如何运行在ArkUI-X，ArkUI-X和 HarmonyOS Next 都是使用 API Version 10+ 的OS版本，对语法要求更严格。主要分为以下两步来实现。更多HarmonyOS开发详解见： HarmonyOS HarmonyOS Next系列教程下载地址-IT营大地老师

一、同步代码

1 、复制 HarmonyOS entry\src\main\ets\pages 里面的所有文件到 ArkUI-X 项目的

entry\src\main\ets\pages 里面

2 、复制 HarmonyOS entry\src\main\resources 里面的所有文件到 ArkUI-X 项目的

entry\src\main\resources 目录里面，这里面包含了资源文件和路由配置文件

3 、修改 ArkUI-X entry/src/main/module.json5 , 如果 HarmonyOS 项目中配置了网络请求或者申请

权限的代码还需在 module.json5 中重新配置

二、让 HarmonyOS 代码能在 ArkUI-X 中运行

ArkUI-X 和 HarmonyOS Next 都是使用 API Version 10+ 的 OS 版本，对语法要求更严格。

如果以前写代码语法不规范还需要进行微调

1 、循环遍历数据必须指定类型

下面代码在 HarmonyOS 中可以运行，但是在 ArkUI-X 中会提示 item 错误

List({space:10}){
ForEach([1,3,4,5,6,7,87,8,8,9,23,34],(item)=>{
ListItem(){
Text(`${item}`)
.fontSize(34)
.width('100%')
.height(60)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor('#eee')
}
})
}
.padding(10)
.height('100%')

解决方法

循环遍历的时候指定数据类型

List({space:10}){
ForEach([1,3,4,5,6,7,87,8,8,9,23,34],(item:number)=>{
ListItem(){
Text(`${item}`)
.fontSize(34)
.width('100%')
.height(60)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor('#eee')
}
})
}
.padding(10)
.height('100%')

提示： 对应的 key 也需要配置类型

@Entry
@Component
struct Grid_1_View_Page {
arr: string[] =
[`1`,`2`,`3`,`4`,`5`,`6`,`7`,`8`,`9`,`10`,`11`,'12','13','14','15']
build() {
Column() {
Grid(){
ForEach(this.arr,(item:string)=>{
GridItem(){
Text(item)
.fontSize(26)
.fontColor(Color.White)
.backgroundColor("#007DFF")
.width('100%')
.height('160')
.textAlign(TextAlign.Center)
}
},(item:string)=>item)
}.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.padding(10)
}
.width('100%')
.height('100%')
}
}

2 、定义响应式数据需要指定初值

下面代码在 HarmonyOS 中可以运行，但是在 ArkUI-X 中会提示

Property 'cId' has no initializer and is not definitely assigned in the

constructor.

Property 'pId' has no initializer and is not definitely assigned in the

constructor.

private pId: number
private cId: number
aboutToAppear(){
let params:object = router.getParams()
console.log(params["pId"])
console.log(params["cId"])
this.pId=params["pId"];
this.cId=params["cId"];
}

解决方法 : 定义响应式数据需要指定初值

private pId: number=0
private cId: number=0
aboutToAppear(){
let params:object = router.getParams()
console.log(params["pId"])
console.log(params["cId"])
this.pId=params["pId"];
this.cId=params["cId"];
}

3 、定义变量需要指定类型

下面代码在 HarmonyOS 中可以运行，但是在 ArkUI-X 中会提示

Indexed access is not supported for fields

private pId: number=0
private cId: number=0
aboutToAppear(){
let params = router.getParams()
console.log(params["pId"])
console.log(params["cId"])
this.pId=params["pId"];
this.cId=params["cId"];
}

解决方法 : 定义变量需要指定类型

private pId: number=0
private cId: number=0
aboutToAppear(){
let params:object = router.getParams()
console.log(params["pId"])
console.log(params["cId"])
this.pId=params["pId"];
this.cId=params["cId"];
}

4 、 parseInt() 报错 使用 Number() 方法替换

Usage of standard library is restricted (arkts-limited-stdlib) <ArkTSCheck

import router from '@ohos.router'
@Component
export struct AppBar {
//在build方法执行之前执行
aboutToAppear(){
console.log(router.getLength())
}
//build方法执行完毕后才执行
onPageShow(){
}
title:string="首页"
build(){
Row(){
if(Number(router.getLength())>1) {
Row() {
Image($r("app.media.back")).height(22).padding({ left: 6 })
}.width(60)
.height('100%')
.onClick(() => {
router.back()
})
}
Row(){
Text(this.title)
.size({ width: '100%', height: "50vp" })
.fontColor("#ffffff")
.textAlign(TextAlign.Center)
.fontSize("18fp")
}.layoutWeight(1)
if(Number(router.getLength())>1) {
Row() {
}.width(60)
.height('100%')
}
}
.height(50)
.width('100%')
.backgroundColor("#d81e06")
}
}