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'判断
// message
if (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:string
data: 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的参数
