HarmonyOS鸿蒙开发 应用开发常见问题总结(持续更新…)

在学习鸿蒙开发过程中，也是遇到了不少问题，在代码编写过程中，遇到了一些问题，由于是学习阶段，需要时刻记录一下。

If a component attribute supports local initialization, a valid, runtime-independent default value should be set for it.

意思：如果组件属性支持本地初始化，则应为其设置有效的、独立于运行时的默认值。

• 解决需要为属性设置默认值

原代码：

@ComponentV2
export struct CustomErrorComp {@Param @Require dataSetConfig: CustomDataSetConfig;build() {Column() {// 设置icon、title、message等元素CustomDataSetBuilder(this.dataSetConfig)}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor($r('app.color.white'))}
}

由于传入的参数dataSetConfig，未设置默认值，这里CustomDataSetConfig是一个interface，
传入默认值代码更改后：

@Param @Require dataSetConfig: CustomDataSetConfig = {title: "",message: "",btnTitle: "",}
...
其他不变

E [ArkRuntime Log] TypeError: is not callable

由于自定义类的interface中有onCallback?: () => void处理点击回调

源代码中的判断有问题，源代码：

    .onClick(()=> {if (this.dataSetConfig.onCallback !== null) {this.dataSetConfig.onCallback!();}})

一开始以为和flutter判断一样!== null，结果这样判断不对
将代码修改如下就正常了：

    .onClick(()=> {if (this.dataSetConfig.onCallback) {this.dataSetConfig.onCallback!();}})

E [ArkRuntime Log] TypeError: Cannot read property length of undefined

无法读取未定义的属性长度

这里未判断，获取了string的length

所以在使用length前需要做一下typeof this.message !== 'undefined'判断

// messageif (this.message !== null && typeof this.message !== 'undefined') {Text(this.message).fontSize(12).fontColor(Color.red).margin({bottom: this.message.length > 0 ? 10 : 0})}

Navigation push之后底部Tabbar 没有隐藏问题

参考https://developer.huawei.com/consumer/cn/doc/architecture-guides/develop-arkui-67-0000002122758974
这里希望可以使用自定义导航栏，根据页面index去切换不同的导航栏，或者隐藏导航栏，思路如下：

修改
通过Navigation嵌套tab，将其隐藏的方式，代码如下

@Entry
@ComponentV2
struct Index {@Local message: string = 'Hello World';@Provider('tabCurrentIndex') tabCurrentIndex: number = 0;// 初始化NavPathStack@Provider('pageInfos') pageInfos: NavPathStack = new NavPathStack()

使用Navigation嵌套tab

Navigation(this.pageInfos){Tabs({index: this.tabCurrentIndex, barPosition:BarPosition.End}){TabContent(){NewsTabsView()}.tabBar(this.TabBuilder({title: "首页",targetIndex: 0,normalImg: $r('app.media.ic_tab_shouye'),selectedImg: $r('app.media.ic_tab_shouye_filled')}))}.barMode(BarMode.Fixed) // 默认值.scrollable(false)  // 限制滑动.onAnimationStart((_index: number, targetIndex: number, _event: TabsAnimationEvent) => {this.tabCurrentIndex = targetIndex;})}.hideTitleBar(true)

跳转使用代码

.onClick(() => {this.pageInfos.pushPathByName("setting", null, true);})

The buildFunction ‘PageSettingBuilder’ configured in the routerMap json file does not exist.

配置route_map时候，指定了buildFunction，
route_map如下

{"routerMap": [{"name": "setting","pageSourceFile": "src/main/ets/pages/pages/SettingIndexPage.ets","buildFunction": "PageSettingBuilder","data": {"description": "this is setting page"}}]
}

所以如果没有在SettingIndexPage.ets页面中创建PageSettingBuilder，则会出现报错

所以在页面增加一个

/// 设置页面
/// 跳转页面入口函数
@Builder
export function PageSettingBuilder() {SettingIndexPage()
}@ComponentV2
export struct SettingIndexPage {// 其他代码
}

Error message:is not callable

在我的代码中，为navigation添加
我的代码如下

  @Consumer('pageInfos') pageInfos: NavPathStack = new NavPathStack()NavDestination() {List({ space: 12 }) {ForEach(this.data, (item: PageInfo) => {ListItem() {Text("Page" + item.title).onClick(() => {this.pageInfos.pushPathByName("setting", null, true);})}}, (item: PageInfo) => item.url.toString())}.width("90%").margin({ top: 12 })}.title("我的").mode(NavDestinationMode.STANDARD).onReady((context: NavDestinationContext) => {this.pageInfos = context.pathStack})

将onReady去掉即可，没有报错了，暂时有点奇怪，还不清楚原因，学习中

  @Consumer('pageInfos') pageInfos: NavPathStack = new NavPathStack()NavDestination() {List({ space: 12 }) {ForEach(this.data, (item: PageInfo) => {ListItem() {Text("Page" + item.title).onClick(() => {this.pageInfos.pushPathByName("setting", null, true);})}}, (item: PageInfo) => item.url.toString())}.width("90%").margin({ top: 12 })}.title("我的")

Navigation页面跳转如何传参数

Navigation中，可以使用this.pageInfos.pushPathByName("setting", param, true);进行页面跳转，
当然在开发中，跳转页面很多时候需要传递参数，传递参数，可以定义interface
我的使用方式如下

export interface SettingPageParam<T> {from:string,tag:stringdata: T
}// 进行跳转let param: SettingPageParam<string> = {from: "my",tag: "mytag",data: "来自我的tab的参数"};this.pageInfos.pushPathByName("setting", param, true);

接收参数，需要通过NavPathStack的getParamByName

  aboutToAppear(): void {let param:SettingPageParam<string> = this.pageInfos.getParamByName('setting')[0] as SettingPageParam<string>;console.info("SettingIndexPage aboutToAppear param.from:"+ param.from + ", param.tag:"+ param.tag + ", param.data:"+ param.data);}// 打印的结果
01-02 16:38:03.633   25140-25140   A03d00/JSAPP                    com.example.myhmapp   I     SettingIndexPage aboutToAppear param.from:my, param.tag:mytag, param.data:来自我的tab的参数