一.前言
最近在看uni-app的跨平台开发方案, 一项新技术的诞生总会或多或少有点毛病, 所以这篇文章就用来记录一下uni-app的毛病, 看这篇文章之前, 你需要知道的官方文档链接
uni-app的官方文档
https://uniapp.dcloud.io
weex的官方文档
https://weex.apache.org/zh/docs/api/weex-variable.html
二.毛病
uni-app有两种模式, 一种是vue基于前端h5渲染方式+部分原生(导航栏 tabbar这些), 另一方案为weex渲染引擎, 使用第一种方式创建的文件叫做.vue, 另一种方式的文件叫做.nvue, 我们就从这两种开发方式中分别统计出来他们的"毛病", 或许有些没有解决方案, 但至少记录一下
1.vue
使用自定义导航栏在微信小程序中会闪一下, 代码如下
这种方法在微信小程序中渲染会导致导航栏闪一下, app端并不明显也存在, 怀疑是html的渲染过程比较慢造成的
之后有人提出uview官方demo实验没有问题, 对此我也进行了测试, 在微信小程序官方发布版的demo上确实没有问题, 但是我使用官方demo的源码编译到小程序和真机上仍然会有问题
这种情况在真机调试的时候会好很多, 不是那么卡, 但是也是有卡顿的, 所以我暂且只能认为有可能是发布后会恢复正常的展示效果, 由于我并不会小程序的打包, 所以这个期待以后会测试
自定义导航栏可能会被顶上去
这个问题也是个长期的问题, 我看早在18年就有人提出来了, 自定义导航栏因为是h5的一部分, 所以当焦点为输入框时为了不让键盘挡住输入框, 整个屏幕都会被顶飞
如果忍无可忍可以尝试使用原生导航栏, 暂无其他解决方案
2.nvue
参考文档:
nvue开发注意事项
nvue中没有百分比布局
这可能不算是一个毛病, 但算是一个坑, 这里说一下, 由于nvue是基于weex引擎渲染的, 所以我们必须按照weex的规范来做, 在weex中不支持百分比布局, 所以导致了uni-app的nvue模式沿用了这一设计, 那么怎么布局呢?
在weex中把屏幕换算成了750px, 那么我们的百分之百就是750px, 你没听错是所有屏幕都是750px, 庆幸的是他们已经把比例适配好了, 我们可以直接拿来使用, 但是在uni-app中不是很相同, 因为uni-app中的px是固定的不是比例, 所以官方使用了rpx来代替weex模式下的px
所以100% 就是 750rpx
四等分就是 187.5rpx
nvue和vue页面中的$store不是同一个对象的问题
这是一个非常大的问题, 我已经官方提出了此问题, 但是官方懒于回复, 帖子在
https://ask.dcloud.net.cn/question/99507
里面有demo 你可以自己去看
这里简单的说一下, 首先我假设你已经掌握了基础的vuex, 没掌握也没关系, 他就是个全局变量, vuex只是一个库的名字, 实际上存储全局变量的对象叫做store, 下文中都用这个来称呼vuex, 你用变量的时候就是store.state.isLogin这样
之后呢会存在这样一个问题, store是全局变量对吧, 那它必然是一个单例, 单例就是你在程序中任何地方都能获取到, 随时使用上面的变量和方法, 但是vue和nvue会有些区别, 正常情况下store是在.vue .nvue文件中使用的, 但是也有另外一种情况, 你需要在js中使用, 比如封装一个网络请求, 你要获取用户的token, 而token是存放在store中的, 那么你就需要在js中引入store, 代码如下
import store from '@/store'
然后使用的时候是
// 通过store获取userInfo
let userInfo = store.state.userInfo;
// 构造请求token
let header = {
"token": userInfo.token
}
// 进行请求
post(xxxxxx, header, data)
这种使用方式在.vue文件中是完全没有问题的, 但是在.nvue引入js文件, 并在js内部封装上述方法, 就会出现store会重新创建一个对象的问题, 这会造成什么呢, 会造成改变这个store后对全局的变量没有任何影响, 这很致命, 目前我并没有什么好的解决方案, 但是我们可以规避一些问题
1.不要在nvue引入的store中修改变量, 也就是只读, 这样不会出现任何问题
2.可以借助storage等存储来代替store, 这种方法也是不错的, 但是风格跟vuex就不会统一了
nvue多行布局毛病
这个我也已经跟官方反馈了, 由于nvue的布局逻辑不太相同, 会造成一个问题, 在flex布局中, 容器如果不设置高度的话, 它默认是可以包容里面的所有东西的, 但是有一种情况就不行, 就是nvue里如果包含了多行文本, 这可能就不适用了, 代码如下
朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾
原生开发者支持原生开发者支持原生开发者支持原生开发者支持
插件市场插件市场插件市场插件市场插件市场插件市场插件市场插件市场插件市场
效果是这样的
本应该容纳的文本却没有容纳, 经过了几个小时的调试排查, 终于找到了问题的解决方案
在最外层增加align-items: center, 说实话我真不知道这是什么狗屁逻辑
pages.json
无法修改导航栏文字大小
几乎是开发中必备的功能, 奇葩的uni-app竟然没有, 唯一的解决方案就是自定义导航栏, 然而自定义由于是h5的一部分所以存在诸多毛病, 与诸多不方便, 前面已经说过了, 自己在文章里找吧
无法修改返回按钮的图标
非常常用的功能, 但是无法实现, 只能使用自定义方案, 然而其定义存在诸多毛病, 我不想废话了 - -
easycom毛病
https://uniapp.dcloud.io/collocation/pages?id=easycom
说白了就是快速引用组件的配置项
"easycom": {
"^uni-(.*)": "@/components/uview-ui/components/uni-$1/uni-$1.vue"
},
在pages中这么引用后, 你就可以使用所有以uni开头的组件, 而不需要导入和注册了, 下面两个步骤都能省略掉
导入
注册
但是它存在一个问题, 当你通配的组件其中一个不符合规则的时候, 他会因为找不到组件而报错
比如uni官方的一些组件是不符合这个规范的 举个例子
这个通讯录组件就不符合规范
规范的是把它变为下面这个样子
这将导致你项目中的组件报错, 所以这个毛病告诉我们, easycom目前还不是很完善, 除非你确定你的组件都符合规范, 常见的都符合规范的组件是uView, 官方推荐使用easycom导入的
全局配置titleNView后, 隐藏导航栏的代码会失效
非常大的一个问题, 我已经向官方反馈了
https://ask.dcloud.net.cn/question/99698?column=log&rf=false
官方一直不予回复, 全局修改导航栏标题文字是一个非常常用的功能, 但是一旦配置pages里的titleNView属性后, 导航栏会变成永远都出现的状态
三.缺失的必要性功能
1.动态修改导航栏返回按钮样式
很基础的问题, 导航栏返回按钮修改频率非常高, 这个功能可以说是重中之重, 但就是没有, 你说气不气人 - - , 现在想实现就要自定义导航栏, 非常非常的麻烦, 而且有诸多毛病, 比如层级问题, 常见的就是键盘假如挡住输入框会把自定义导航栏顶出屏幕, 所以还是希望官方尽快修复完善此功能
2.动态修改导航栏上按钮的样式
官方提供的修改导航栏样式的api一共就五个
在图上可以看的清清楚楚, 并不能实现动态修改导航栏上按钮的图案, 比如我是一个收藏, 收藏后上面的星星变成黄色的, 这个就无法实现, 所以还是希望官方尽快修复完善此功能
3.动态定义tabbar
非常非常常见的功能, 此问题在08年就已经提出来了, 假如你有两个角色, 然后想登陆之后根据后台返回的角色代码来动态显示前端tabbar的样式, 这个目前来说在uni-app上是无法实现的, 虽然说可以根据api修改tabbar的文字和图标, 但是没有增加减少tabbar栏目的api, 所以用起来还是不灵活的, 废话不多说了, 还是希望官方尽快修复完善此功能, 没有看懂或不知道的人说明这一部分暂时不需要你们了解, 年轻人路还很长.
结尾
从我反馈问题的程度来看, 官方现在状态就是懒于回复的状态, 由于该技术为免费开源技术, 所以我也不能像商业框架一样看待它, 只能期待它越来越好吧
Demo
Demo是本人根据自己的技术栈搭建的, 目前还处于开发阶段现学现卖, 有可能有错误, 但我觉得用起来还是比较舒适的, 错误在后续学习中会改进
https://github.com/objcat/uni_demo
注: 因为本人仍在学习阶段, 所以此项目仅供参考, Demo在项目中使用发生任何问题与本人无关, 但如果有相关问题你可以提出给我, 我会尝试解决修正滴.