码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-09-18 10:47:32      阅读:2211      评论:0      收藏:0      [点我收藏+]

标签:nav   cdc   size   status   pack   保存   data-   class   失效   

想法:
  • 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;
}

需要注意的是支付宝小程序自定义导航栏和微信小程序有差异,可以通过uni-app提供的条件编译解决

由此方案可以比较完美解决自定义导航栏适配问题。
 

问题二:原生 scroll-view 组件布局

  • 原生的 scroll-view 组件不支持 flex 布局
  • 导航栏小于五项时居中显示
解决
  • 暂无较好的办法,只能在scroll-view组件里面再加一层view实现flex布局
  • scroll-view + justify-content: space-around;判断总项数是否小于五,小于五动态添加class
 

问题三:uni-ui 组件不能修改样式

  • 在使用抽屉组件的时候出现了样式问题,因为使用了自定义导航,所以抽屉组件占满了全屏,在其它组件修改抽屉组件的class不起作用。
解决
  • 方法一:在app.vue中修改class,此方法可以全局修改样式
  • 方法二:修改组件源码,因为组件考虑的不是特别周全,可以修改组件的源码来实现自己想要的效果
 

问题四:修饰符失效

解决
  • uni-app 虽然是vue语法,但是并没有使用vue的修饰符,而是选择小程序的修饰符
 

问题五:使用支付宝开发工具无法识别项目

解决
  • 等待支付宝小程序开发者工具启动后,在支付宝小程序开发者工具中打开:uniapp/unpackage/dist/dev/mp-alipay,然后在HBuilderX中修改文件并保存,会自动刷新支付宝小程序开发者工具
 

问题六:在不同平台显示不同样式

解决
  • uni-app 中提供了条件编译,完美解决了这个问题
技术图片
 技术图片

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

标签:nav   cdc   size   status   pack   保存   data-   class   失效   

原文地址:https://www.cnblogs.com/bfc0517/p/11539988.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!