【鸿蒙征文】关于鸿蒙折叠屏（宽屏设备）适配的一些分享

随着鸿蒙系统的不断发展以及uni-app x 对鸿蒙的全面支持，相信使用 uni-app X 进行鸿蒙应用及跨平台应用开发，是前端开发的最优选择。近期完成了对公司的已有应用进行鸿蒙平台适配的适配工作，有了 uni-app X 为基础，整个过程变得“轻松、高效”！

在折叠屏的适配过程中获得了一些经验，分享给大家（仅是自己的一些想法，欢迎大家指正~）。

适配目标效果

原理分享

1 在页面初始化时获取屏幕宽度，识别运行屏幕环境是否为宽屏；
2 在屏幕宽度变化时，重新判处屏幕运行环境；
3 创建对应的 flex 布局样式，使用 :class="" 进行动态样式切换，达到宽屏及折叠屏幕折叠、展开的适配；

源码分享

<template>  
    <view :class="['flex', isTable?'rows':'column', isTable?'flex-wrap':'']">  
        <view   
        v-for="(item, idx) in 10" :key="idx"  
        :class="['item', isTable ? 'w-half':'w-full']" >  
            <text class="text">{{idx}}</text>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            title: 'Hello',  
            windowWidth : 350, // 保留变量，可以记录屏幕宽度，单位 px  
            isTable : false,  
        }  
    },  
    onReady() {  
        //  
        let info = uni.getWindowInfo();  
        this.isTable = info.windowWidth > 400;  
        console.log(this.isTable);  
    },  
    methods: {  

    },  
    onResize : function(e){  
        this.isTable = e.size.windowWidth > 400;  
        console.log(this.isTable);  
    }  
}  
</script>  
<style>  
.flex{display:flex;}  
.rows{flex-direction:row;}  
.column{flex-direction:column;}  
.flex-wrap{flex-wrap:wrap;}  

.item{background-color:#FF0036;}  
.w-full{width:700rpx; height:300rpx; margin:25rpx;}  
.w-half{width:48%; height:200rpx; margin:20rpx 1%;}  
.text{font-size:20px;}  
</style>

总结

1 演示代码通过监听屏幕尺寸变化，使用 isTable 变量记录了屏幕是否为宽屏，然后通过 flex 布局切换，实现了布局目标；
2 演示代码虽然简单，经过自己的布局设计，完全可以适配 宽屏、折叠屏（动态监听折叠事件）；
3 如果您在宽屏应用中遇到字体尺寸问题，可以以 text 组件为基础封装一个自己的文本组件，针对不同屏幕尺寸设置不同的字体大小（可以将 isTable 作为属性传递到组件内，通过 watch 观察屏幕变化，动态切换字体尺寸）；
4 如果担心 onResize 监听多次触发引起的效率问题，可以使用 setTimeout 函数实现防抖，仅执行短时间内的一次变化即可；

左右功能不同的布局

如果您开发的应用在宽屏模式下，左侧为列表，右侧为详情：
您可以以 isTable 为核心，使用 if 进行右侧功能的条件渲染，如 : 宽屏模式

<view v-if="isTable">右侧功能区</view>

当我们点击列表项目时调用对应函数，同样判断是否宽屏模式，如果是再右侧详情区域展示详情，反之，打开一个新的页面展示详情即可。

一个很基础的原理分享，希望对大家的鸿蒙之旅有所帮助，谢谢阅读。