使用 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; }

须要注意的是支付宝小程序自定义导航栏和微信小程序有差别，能够经过uni-app提供的条件编译解决

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

参考： http://www.javashuo.com/article/p-awwbaxhk-gm.html

 

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

• 原生的 scroll-view 组件不支持 flex 布局
• 导航栏小于五项时居中显示

解决

• 暂无较好的办法，只能在scroll-view组件里面再加一层view实现flex布局
• scroll-view + justify-content: space-around；判断总项数是否小于五，小于五动态添加class

 

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

• 在使用抽屉组件的时候出现了样式问题，由于使用了自定义导航，因此抽屉组件占满了全屏，在其它组件修改抽屉组件的class不起做用。

解决

• 方法一：在app.vue中修改class，此方法能够全局修改样式
• 方法二：修改组件源码，由于组件考虑的不是特别周全，能够修改组件的源码来实现本身想要的效果
• 方法三： /deep/ .class { }  使用 uni-app 的 css 深度选择器

问题四：修饰符失效

解决

• uni-app 虽然是vue语法，可是并无使用vue的修饰符，而是选择小程序的修饰符

 

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

解决

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

 

问题六：在不一样平台显示不一样样式

解决

• uni-app 中提供了条件编译，完美解决了这个问题

 

 

问题七：动态传值监听数据改变

解决

• 使用 vue 中的 watch 能够知足需求

watch: { downtime: { handler(newVal,oldVal) { this.date = newVal; }, immediate: true // 监听第一次数据绑定
 } }