一.前言
最近在看uni-app的跨平臺開發(fā)方案, 一項新技術(shù)的誕生總會或多或少有點毛病, 所以這篇文章就用來記錄一下uni-app的毛病, 看這篇文章之前, 你需要知道的官方文檔鏈接
uni-app的官方文檔
https://uniapp.dcloud.io
weex的官方文檔
https://weex.apache.org/zh/docs/api/weex-variable.html
二.毛病
uni-app有兩種模式, 一種是vue基于前端h5渲染方式+部分原生(導(dǎo)航欄 tabbar這些), 另一方案為weex渲染引擎, 使用第一種方式創(chuàng)建的文件叫做.vue, 另一種方式的文件叫做.nvue, 我們就從這兩種開發(fā)方式中分別統(tǒng)計出來他們的"毛病", 或許有些沒有解決方案, 但至少記錄一下
1.vue
使用自定義導(dǎo)航欄在微信小程序中會閃一下, 代碼如下
<template>
<view class="zy-content">
<u-navbar title="劍未配妥，出門已是江湖" :background="{'background': '#007AFF'}" backIconColor="#FFFFFF" titleColor="#FFFFFF" backText=" "></u-navbar>
</view>
</template>
<style>
@import url("@/css/global.css");
</style>
這種方法在微信小程序中渲染會導(dǎo)致導(dǎo)航欄閃一下, app端并不明顯也存在, 懷疑是html的渲染過程比較慢造成的
之后有人提出uview官方demo實驗沒有問題, 對此我也進行了測試, 在微信小程序官方發(fā)布版的demo上確實沒有問題, 但是我使用官方demo的源碼編譯到小程序和真機上仍然會有問題
這種情況在真機調(diào)試的時候會好很多, 不是那么卡, 但是也是有卡頓的, 所以我暫且只能認(rèn)為有可能是發(fā)布后會恢復(fù)正常的展示效果, 由于我并不會小程序的打包, 所以這個期待以后會測試
自定義導(dǎo)航欄可能會被頂上去
這個問題也是個長期的問題, 我看早在18年就有人提出來了, 自定義導(dǎo)航欄因為是h5的一部分, 所以當(dāng)焦點為輸入框時為了不讓鍵盤擋住輸入框, 整個屏幕都會被頂飛
如果忍無可忍可以嘗試使用原生導(dǎo)航欄, 暫無其他解決方案
2.nvue
參考文檔:
nvue中沒有百分比布局
這可能不算是一個毛病, 但算是一個坑, 這里說一下, 由于nvue是基于weex引擎渲染的, 所以我們必須按照weex的規(guī)范來做, 在weex中不支持百分比布局, 所以導(dǎo)致了uni-app的nvue模式沿用了這一設(shè)計, 那么怎么布局呢?
在weex中把屏幕換算成了750px, 那么我們的百分之百就是750px, 你沒聽錯是所有屏幕都是750px, 慶幸的是他們已經(jīng)把比例適配好了, 我們可以直接拿來使用, 但是在uni-app中不是很相同, 因為uni-app中的px是固定的不是比例, 所以官方使用了rpx來代替weex模式下的px
所以100% 就是 750rpx
四等分就是 187.5rpx
nvue和vue頁面中的$store不是同一個對象的問題
這是一個非常大的問題, 我已經(jīng)官方提出了此問題, 但是官方懶于回復(fù), 帖子在
https://ask.dcloud.net.cn/question/99507
里面有demo 你可以自己去看
這里簡單的說一下, 首先我假設(shè)你已經(jīng)掌握了基礎(chǔ)的vuex, 沒掌握也沒關(guān)系, 他就是個全局變量, vuex只是一個庫的名字, 實際上存儲全局變量的對象叫做store, 下文中都用這個來稱呼vuex, 你用變量的時候就是store.state.isLogin這樣
之后呢會存在這樣一個問題, store是全局變量對吧, 那它必然是一個單例, 單例就是你在程序中任何地方都能獲取到, 隨時使用上面的變量和方法, 但是vue和nvue會有些區(qū)別, 正常情況下store是在.vue .nvue文件中使用的, 但是也有另外一種情況, 你需要在js中使用, 比如封裝一個網(wǎng)絡(luò)請求, 你要獲取用戶的token, 而token是存放在store中的, 那么你就需要在js中引入store, 代碼如下
import store from '@/store'
然后使用的時候是
// 通過store獲取userInfo
let userInfo = store.state.userInfo;
// 構(gòu)造請求token
let header = {
"token": userInfo.token
}
// 進行請求
post(xxxxxx, header, data)
這種使用方式在.vue文件中是完全沒有問題的, 但是在.nvue引入js文件, 并在js內(nèi)部封裝上述方法, 就會出現(xiàn)store會重新創(chuàng)建一個對象的問題, 這會造成什么呢, 會造成改變這個store后對全局的變量沒有任何影響, 這很致命, 目前我并沒有什么好的解決方案, 但是我們可以規(guī)避一些問題
1.不要在nvue引入的store中修改變量, 也就是只讀, 這樣不會出現(xiàn)任何問題
2.可以借助storage等存儲來代替store, 這種方法也是不錯的, 但是風(fēng)格跟vuex就不會統(tǒng)一了
nvue多行布局毛病
這個我也已經(jīng)跟官方反饋了, 由于nvue的布局邏輯不太相同, 會造成一個問題, 在flex布局中, 容器如果不設(shè)置高度的話, 它默認(rèn)是可以包容里面的所有東西的, 但是有一種情況就不行, 就是nvue里如果包含了多行文本, 這可能就不適用了, 代碼如下
<view style="flex-direction: row; width: 100%; background-color: green;">
<view style="flex-direction: column; flex: 1; background-color: purple;">
<text style="lines: 2;text-overflow: ellipsis;">朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾朝花夕拾</text>
<text style="lines: 2;text-overflow: ellipsis;">原生開發(fā)者支持原生開發(fā)者支持原生開發(fā)者支持原生開發(fā)者支持</text>
<text style="lines: 2;text-overflow: ellipsis;">插件市場插件市場插件市場插件市場插件市場插件市場插件市場插件市場插件市場</text>
</view>
</view>
效果是這樣的
本應(yīng)該容納的文本卻沒有容納, 經(jīng)過了幾個小時的調(diào)試排查, 終于找到了問題的解決方案
在最外層增加align-items: center, 說實話我真不知道這是什么狗屁邏輯
pages.json
無法修改導(dǎo)航欄文字大小
幾乎是開發(fā)中必備的功能, 奇葩的uni-app竟然沒有, 唯一的解決方案就是自定義導(dǎo)航欄, 然而自定義由于是h5的一部分所以存在諸多毛病, 與諸多不方便, 前面已經(jīng)說過了, 自己在文章里找吧
無法修改返回按鈕的圖標(biāo)
非常常用的功能, 但是無法實現(xiàn), 只能使用自定義方案, 然而其定義存在諸多毛病, 我不想廢話了 - -
easycom毛病
https://uniapp.dcloud.io/collocation/pages?id=easycom
說白了就是快速引用組件的配置項
"easycom": {
"^uni-(.*)": "@/components/uview-ui/components/uni-$1/uni-$1.vue"
},
在pages中這么引用后, 你就可以使用所有以uni開頭的組件, 而不需要導(dǎo)入和注冊了, 下面兩個步驟都能省略掉
導(dǎo)入
注冊
但是它存在一個問題, 當(dāng)你通配的組件其中一個不符合規(guī)則的時候, 他會因為找不到組件而報錯
比如uni官方的一些組件是不符合這個規(guī)范的 舉個例子
這個通訊錄組件就不符合規(guī)范
規(guī)范的是把它變?yōu)橄旅孢@個樣子
這將導(dǎo)致你項目中的組件報錯, 所以這個毛病告訴我們, easycom目前還不是很完善, 除非你確定你的組件都符合規(guī)范, 常見的都符合規(guī)范的組件是uView, 官方推薦使用easycom導(dǎo)入的
全局配置titleNView后, 隱藏導(dǎo)航欄的代碼會失效
非常大的一個問題, 我已經(jīng)向官方反饋了
https://ask.dcloud.net.cn/question/99698?column=log&rf=false
官方一直不予回復(fù), 全局修改導(dǎo)航欄標(biāo)題文字是一個非常常用的功能, 但是一旦配置pages里的titleNView屬性后, 導(dǎo)航欄會變成永遠(yuǎn)都出現(xiàn)的狀態(tài)
三.缺失的必要性功能
1.動態(tài)修改導(dǎo)航欄返回按鈕樣式
很基礎(chǔ)的問題, 導(dǎo)航欄返回按鈕修改頻率非常高, 這個功能可以說是重中之重, 但就是沒有, 你說氣不氣人 - - , 現(xiàn)在想實現(xiàn)就要自定義導(dǎo)航欄, 非常非常的麻煩, 而且有諸多毛病, 比如層級問題, 常見的就是鍵盤假如擋住輸入框會把自定義導(dǎo)航欄頂出屏幕, 所以還是希望官方盡快修復(fù)完善此功能
2.動態(tài)修改導(dǎo)航欄上按鈕的樣式
官方提供的修改導(dǎo)航欄樣式的api一共就五個
在圖上可以看的清清楚楚, 并不能實現(xiàn)動態(tài)修改導(dǎo)航欄上按鈕的圖案, 比如我是一個收藏, 收藏后上面的星星變成黃色的, 這個就無法實現(xiàn), 所以還是希望官方盡快修復(fù)完善此功能
3.動態(tài)定義tabbar
非常非常常見的功能, 此問題在08年就已經(jīng)提出來了, 假如你有兩個角色, 然后想登陸之后根據(jù)后臺返回的角色代碼來動態(tài)顯示前端tabbar的樣式, 這個目前來說在uni-app上是無法實現(xiàn)的, 雖然說可以根據(jù)api修改tabbar的文字和圖標(biāo), 但是沒有增加減少tabbar欄目的api, 所以用起來還是不靈活的, 廢話不多說了, 還是希望官方盡快修復(fù)完善此功能, 沒有看懂或不知道的人說明這一部分暫時不需要你們了解, 年輕人路還很長.
結(jié)尾
從我反饋問題的程度來看, 官方現(xiàn)在狀態(tài)就是懶于回復(fù)的狀態(tài), 由于該技術(shù)為免費開源技術(shù), 所以我也不能像商業(yè)框架一樣看待它, 只能期待它越來越好吧
Demo
Demo是本人根據(jù)自己的技術(shù)棧搭建的, 目前還處于開發(fā)階段現(xiàn)學(xué)現(xiàn)賣, 有可能有錯誤, 但我覺得用起來還是比較舒適的, 錯誤在后續(xù)學(xué)習(xí)中會改進
https://github.com/objcat/uni_demo
注: 因為本人仍在學(xué)習(xí)階段, 所以此項目僅供參考, Demo在項目中使用發(fā)生任何問題與本人無關(guān), 但如果有相關(guān)問題你可以提出給我, 我會嘗試解決修正滴.
