更新记录
1.0.0(2025-06-26)
下载此版本
鸿蒙app: 控制屏幕方向,控制底部及顶部安全区的显示隐藏
平台兼容性
uni-app(4.45)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
√ |
- |
- |
√ |
√ |
× |
× |
√ |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
× |
× |
× |
× |
× |
× |
- |
× |
× |
× |
× |
uni-app x(4.45)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
× |
× |
√ |
× |
其他
1. 绘制表格
api |
传参 |
必填 |
描述 |
setOrientation |
OrientationType: number, options: {success: () => {}, fail: () => {}, complete: () => {}} |
OrientationType为必填 |
控制屏幕方向 |
setLandscape |
options: {success: () => {}, fail: () => {}, complete: () => {}} |
否 |
横屏 |
setPortrait |
options: {success: () => {}, fail: () => {}, complete: () => {}} |
否 |
竖屏 |
hideSafeArea |
options: {success: () => {}, fail: () => {}, complete: () => {}} |
否 |
隐藏底部和顶部安全区 |
showSafeArea |
options: {success: () => {}, fail: () => {}, complete: () => {}} |
否 |
显示底部和顶部安全区 |
2. 语法说明
注意:此方法会更改全更改屏幕方向,在返回或进入其他页面时,需要把屏幕方向回正
控制屏幕方向:OrientationType的值可以参考鸿蒙官网,默认为0:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-e#orientation9
应用场景:制作沉浸式页面比如,视频全屏
3.代码示例
vue3
import { setOrientation, hideSafeArea} from '@/uni_modules/f-pageOrientation'
onShow(() => {
// 控制屏幕方向
setOrientation(1, {
success: () => {},
fail: () => {},
complite: () => {}
});
// 隐藏底部和顶部安全区
hideSafeArea({
success: () => {},
fail: () => {},
complite: () => {}
});
})