1、HarmonyOS 如何与Web页面进行交互（JS的使用）？
可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-1-V5
通过对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，并在回调中获取脚本执行结果。具体调用流程如下图所示：
2、HarmonyOS 如何实现Listitem的拖拽排序？
List可以通过拖拽事件onItemDragMove和onItemDrop实现。
Demo如下：
@Entry
@Component
struct ListExample {
@State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
@State dragItem: number = -1
// 拖动的元素，注意不是index
@Builder
dragFloatView(item: number) {
Column() {
Text('' + item)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.White)
.fontSize(16)
.width('100%')
.height(100)
}
}
build() {
Column() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.visibility(item == this.dragItem ? Visibility.Hidden : Visibility.Visible)
.id(item.toString())
}, (item: string) => item)
}
.listDirection(Axis.Vertical)
.width('100%')
.onItemMove((from: number, to: number) => {
return true
})
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
// 开始拖拽列表元素时触发。
this.dragItem = this.arr[itemIndex]
return this.dragFloatView(this.arr[itemIndex])
})
.onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
// 拖拽在列表元素范围内移动时触发。
animateTo({ duration: 200, curve: Curve.Linear }, () => {
let deleteIndex = this.arr.indexOf(Number(this.dragItem))
this.arr.splice(deleteIndex, 1)
this.arr.splice(insertIndex, 0, Number(this.dragItem))
})
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
// 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发。
this.dragItem = -1
})
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
}
}
3、HarmonyOS 横屏后布局问题？
使用window.setPreferredOrientation设置强制横屏后，Navigation宽度正常，但其中内容组件的宽度不对
可以使用 onPageShow onPageHide来设置页面级别的横屏
onPageShow(): void {
// window.getLastWindow(getContext(this), (err, win) => {
// win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
// })
}
onPageHide(): void {
window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.PORTRAIT)
})
或者在上一个界面跳转第二个界面的时候调用横屏，demo以下
Button('界面跳转')
.onClick(()=>{
window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
})
router.pushUrl({
url:"pages/Index2"
})
})
setPreferredOrientation的使用请详细参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setpreferredorientation9
4、HarmonyOS 这个eventId只能是number 很容易重复？
自定义枚举类型常量
export const enum EventID{
CHAT = 1,
CLICK = 2,
TOUCH = 3
}
export const showCaptchaEvent: emitter.InnerEvent = {
eventId: EventID.CHAT
}
结合时间戳
为每个事件记录其发生的时间戳，并将事件ID和时间戳结合使用。这样可以通过时间戳来区分不同时间段内发生的事件，从而避免事件ID重复的问题。
使用自增ID
为每个事件分配一个唯一的自增ID，这样可以确保事件ID的唯一性。在存储事件信息时，使用自增ID代替原始的事件ID。
使用数据库索引
在存储事件信息时，为事件ID创建索引，这样可以快速查询和过滤事件ID。需要确保索引的正确性和效率。
5、HarmonyOS Scroll嵌套Web，Web内容高度自适应，整体页面一起滚动？
可以使用.layoutMode(WebLayoutMode.FIT_CONTENT)自适应网页布局，如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式。