使用 uni-app 开发遇到的问题

Posted 2022-11-09 bfc0517

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 uni-app 开发遇到的问题相关的知识，希望对你有一定的参考价值。

想法：

uni-app 给我的感觉就像是把微信小程序的API，组件和vue的语法揉捏在一起所组成框架，没有原生小程序和vue那种流畅感，官方的 uni-ui 组件库不够成熟，坑比较多。

问题一：自定义导航栏适配

使用自定义导航栏以后手机顶部状态栏区域会被页面内容覆盖，这是因为窗体是沉浸式的原因，即全屏可写内容。官方给出了一个 --status-bar-height 的css变量,此时可以使用一个高度为 --status-bar-height 的 view 放在页面顶部，避免页面内容出现在状态栏。虽然解决了状态栏的适配，但是没有解决小程序里面胶囊高度的问题。

解决：

在网上查找发现，android跟ios在导航栏与胶囊上有差异，可以通过uni.getSystemInfoSync()来获取手动获取状态栏的高度（微信小程序对应wx.getSystemInfoSync()），测试以后发现iOS胶囊按钮与状态栏之间距离为：6px， Android为8px，由于胶囊是原生组件，必须使用px才能适配。

引用方案：

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2

Android导航栏高度 = 32px + 8px * 2 = 48px

iOS导航栏高度 = 32px + 6px * 2 = 44px

template:

<view class="nav">
    <view class="status" :style=" height: statusHeight + ‘px‘ "></view>
    <view class="bar":style=" height: navHeight + ‘px‘ "></view>
</view>

javascript:

setNavSize: function() 
    var sysinfo = uni.getSystemInfoSync(),// 这里最好调用异步 getSystemInfo
        statusHeight = sysinfo.statusBarHeight,
        isiOS = sysinfo.system.indexOf(‘iOS‘) > -1,
        navHeight;
    if (!isiOS) 
        navHeight = 48;
     else 
        navHeight = 44;
    
    this.statusHeight = statusHeight;
    this.navHeight = navHeight;