【每日学点HarmonyOS Next知识】路由单例模式、路由报警告、验证码弹窗、自定义路由表实现、查询横竖屏

79 阅读2分钟

1、HarmonyOS Navigation是否有办法类似Router中的RouterMode实现单例模式?

参考demo

pushPathsingleTask(info: NavPathInfo, animated?: boolean): void {
  this.pageArray =[]
  this.pageArray = this.pageInfos.getIndexByName(info.name)
  if(this.pageArray.length == 0){
  this.pageInfos.pushPath(info, animated)return;
}
this.pageInfos.popToIndex(this.pageArray.pop(), animated)
}

2、HarmonyOS 使用routeName报警告,是否有替代方法?

@Entry({ routeName: ‘JLShowPrivacyPage’ }) alert : It’s not a recommended way to export struct with @Entry decorator, which may cause ACE Engine error in component preview mode

使用routeName报有警告,实际使用是否会报异常问题?如果有是否有替代方法?

此告警可以忽略,这个仅会在预览模式下才可能出现异常,真机上可正常使用

3、HarmonyOS 需要获取短信验证码需要有一个图片验证码或者滑块验证的,防止别人刷短信验证码的demo?

需要获取短信验证码需要有一个图片验证码或者滑块验证的,防止别人刷短信验证码的demo

请参考:

import promptAction from '@ohos.promptAction'
let customDialogId: number = 0;
let sliderValue = 0;
@Builder
function customDialogBuilder() {
Column() {
Row({space:20}){
Text('安全验证').fontSize(26)
.width('80%')
.height(60)
.textAlign(TextAlign.Center)
.lineHeight(60)
Image($r('app.media.error'))
.width(26)
.height(26)
.onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
}
.margin({bottom:16})
Stack() {
Text("请滑到最右端")
.fontSize(20)
.onClick(() => {
promptAction.closeCustomDialog(customDialogId)
})
Slider({ style: SliderStyle.InSet, value: sliderValue })
.trackColor('rgba(40,40,40,0.5)')
.selectedColor('rgba(200,200,200,1)')
.trackThickness(66)
.blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.arrow') })
.onChange((value: number, mode: SliderChangeMode) => {
if(value == 100) {
promptAction.closeCustomDialog(customDialogId)
}
})
}
.height(90)
.width('80%')
}.height(220).padding(5)
}
@Entry
@Component
struct Index {
@State message: string = '获取验证码'
build() {
Row() {
Column() {
Button(this.message)
.fontSize(50)
.padding(16)
.onClick(() => {
promptAction.openCustomDialog({
builder: customDialogBuilder.bind(this)
}).then((dialogId: number) => {
customDialogId = dialogId
})
})
}
.width('100%')
}
.height('100%')
}
}

4、HarmonyOS 是否有完整的自定义路由表和动态路由demo可以提供一下?

参考demo应用导航设计:developer.huawei.com/consumer/cn…

5、HarmonyOS 查询当前状态是横屏还是竖屏?

通过下面代码可以监听横屏竖屏切换事件:

let listener = mediaquery.matchMediaSync(’(orientation: landscape)’); //监听横屏事件那么初始化时怎样主动查询当前是横屏还是竖屏呢?

  1. 可以通过diplay.on可以监听屏幕状态改变。其中可以在module.json5中设置EntryAbility为orientation,或者使用window.setPreFerredOrientation动态设置窗口横竖屏。
  2. 屏幕横竖屏监听:当监听到变化时,可以通过发布订阅的方式全局通知。module.json5里面配置 “orientation”: “auto_rotation”,让屏幕自动旋转。win.setPreferredOrientation(window.Orientation.PORTRAIT) ,设置横屏或者竖屏。win.on(“windowSizeChange”, (data) => {}),监听横竖屏变化。onConfigurationUpdate生命周期中监听屏幕变化。

对于窗口的横竖屏可以借助display.getDefaultDisplaySync().orientation这个属性来判断屏幕目前所处的横竖屏状态。参考文档:developer.huawei.com/consumer/cn…

示例代码:

let oritation:number=display.getDefaultDisplaySync().orientation;
switch (oritation){
case display.Orientation.PORTRAIT:this.status=‘竖屏’;break;
case display.Orientation.LANDSCAPE:this.status=‘横屏’;break;
case display.Orientation.PORTRAIT_INVERTED:this.status=‘反向竖屏’;break;
case display.Orientation.LANDSCAPE_INVERTED:this.status=‘反向横屏’;break;
default:this.status=‘不知道’;
}

##鸿蒙核心技术##鸿蒙开发工具##DevEco Studio## ##社交##