總括:
由于公司戰(zhàn)略改變睡汹,uniApp 小程序項目暫時告于段落。這段時間開發(fā)uniApp小程序項目經(jīng)歷了很多內(nèi)容相嵌,因此進行一些總結。
總體來說况脆,使用uniApp 進行小程序開發(fā)的選擇還是很不錯的饭宾。使用vue語法的uniApp開發(fā)靈活度有很大的提升;條件編譯也使跨平臺開發(fā)有了不錯的體驗格了;當然開發(fā)過程中也遇到不少坑點看铆,有些搞定了,有些放棄了盛末。
具體來說
使用vue語法的uniApp開發(fā)靈活度有很大的提升弹惦;
vue的特性導致了它在小程序開發(fā)中極大的減少了開發(fā)難度否淤。基本語法的方便就不過多說了棠隐,主要提到兩點store和vue.mixin:
store: 剛開始使用全局變量石抡,全局方法的使用的是小程序的getApp() 和globalData,但是發(fā)現(xiàn)使用store也可以實現(xiàn)全局之后助泽,很多地方都同時使用了兩種方式啰扛。但是后來到了要將項目同時支持小程序版本和做成插件版本時,由于插件版本的限制嗡贺,getApp() 和globalData不可用了侠讯,這樣store 的優(yōu)點就突出出來了。后來干脆就直接使用了store 替換了項目中所有的getApp() 和globalData暑刃。
vue.mixin:但是此時store的使用依然有一些麻煩厢漩,很多地方需要各種引入和打點調(diào)用。最近才發(fā)現(xiàn)vue.mixin真是強大岩臣,通過它可以將很多內(nèi)容混入到所有vue對象中溜嗜。因此就可以將store中的全局內(nèi)容直接混入到頁面和組件的data中,頁面和組件就可以直接進行調(diào)用架谎,極大的簡化了代碼炸宵。當然vue.mixin還可以實現(xiàn)很多內(nèi)容,比如所有小程序頁面添加右上角分享功能等谷扣。
當然vue是基于js的土全,小程序也是基于js的,js的強大就不用多說会涎。另外很多內(nèi)容都可以抽成js單獨整理使代碼看的更整潔裹匙。還有一點就是js的弱語言特點可以使它極大的幫助開發(fā)過程中問題的處理,比如開發(fā)插件或者其它內(nèi)容時會遇到需要全局處理內(nèi)容此時有一種技巧思路是直接給uni/wx/my等這些對象添加屬性內(nèi)容末秃,直接在main.js或其它地方使用uni.xxx = xxx的方式給uni添加屬性或者方法概页,由于uni是個系統(tǒng)全局對象,因此就使得小程序中很多無法實現(xiàn)的功能得到實現(xiàn)练慕,比如插件調(diào)主程序方法的實現(xiàn)或者全局內(nèi)容等惰匙。
條件編譯也使跨平臺開發(fā)有了不錯的體驗;
uniApp有一個很不錯的特點就是條件編譯铃将,主要是實現(xiàn)不同平臺編譯成不同代碼项鬼,以便在各個平臺運行。
但是隨著項目的深入劲阎,項目可能要發(fā)布多個版本绘盟、適配多個平臺(微信、支付寶、企業(yè)微信奥此、淘寶等)、開發(fā)成插件等雁比,這樣的話在來回切換時系統(tǒng)的條件編譯可能就滿足不了業(yè)務需要了稚虎。這個時候往往需要一些新的自定義條件編譯方式。
起初剛開始是要開發(fā)插件偎捎,就學習到了uniapp2wxpack這個uniApp開發(fā)工具蠢终,其實通過研究后發(fā)現(xiàn)它也vue的內(nèi)容。它實現(xiàn)了uniApp編譯成小程序插件的功能茴她。通過它寻拂, 我們了解到了自定義條件編譯的方式,其實就是通過命令編譯各個文件丈牢,然后進行處理留下需要的去掉不需要的祭钉。
由此就想到了可以通過js遍歷全部項目文件,然后再根據(jù)特定標識去刪除或保留各個文件的每行代碼的方式去實現(xiàn)自定義條件編譯己沛。目前階段是基本實現(xiàn)了可以自己定義編譯條件的方式去進行項目編譯慌核,通過這樣極大減少了各種切換的處理。但是目前只做到了當前內(nèi)容申尼,其實再做一些界面操作或者和IDE結合的一些內(nèi)容從而更加簡化操作垮卓。
當然開發(fā)過程中也遇到不少坑點,有些搞定了师幕,有些放棄了粟按。
uniApp 開發(fā)的時間不長,但是遇到坑點也不少霹粥,有些解決了灭将,有些沒解決或放棄了。
首先uniApp開發(fā)微信小程序和支付寶小程序的感覺其實很奇妙后控。微信貌似兼容的更多一些宗侦,導致很多css寫的不規(guī)范或者不好的點,在微信運行依然很不錯忆蚀。而支付寶貌似更規(guī)范一點矾利,就導致很多css寫的不好在支付寶上運行就顯示不對了。所以總體感覺每次要適配支付寶小程序時總有一種改bug的感覺馋袜,支付寶適配好之后男旗,微信都基本還沒問題。
坑點:
- 微信授權登錄是兩個接口欣鳖,授權需要綁定按鈕事件(open-type="getUserInfo" @getuserinfo="getuserinfo”)察皇,支付寶授權登錄是一個接口。微信授權信息需要解密,支付寶是明文
- echarts uniApp使用時環(huán)形圖ios交互沒問題什荣,安卓交互有問題
- 分享給好友微信需要按鈕綁定open-type="share”事件
- 系統(tǒng)tabbar無法自定義矾缓,只能修改文字和圖標,無法修改地址
- canvas畫布層級高稻爬,到這需要用到彈框的地方不能用canvas嗜闻,否則canvas會遮擋彈框
- background-image不支持本地動態(tài)圖片地址
- props為單向數(shù)據(jù)流,無法實現(xiàn)雙向綁定桅锄,需要子組件中使用watch監(jiān)聽琉雳,而且使用自組件是使用了某個屬性則不會使用默認值,必須傳值
- 富文本數(shù)據(jù)中圖片需要手動代碼替換解決圖片適配大小問題
- data中生命對象類型變量友瘤,需要將對象中進行鍵值對進行初始化翠肘,如果想動態(tài)對象內(nèi)容,則需要data中不聲明為對象辫秧,再之后再進行對象值替換
- 微信小程序無法判斷開發(fā)環(huán)境束倍、生產(chǎn)環(huán)境最后使用ext解決
- 淘寶小程序需要手動加"navigationBarForceEnable":true,否則沒有二級導航欄
- uniApp 中可以通過page 設置css變量盟戏,但是由于沒有document概念肌幽,因此無法修改css變量
- uniApp 可以通過/deep/ 穿透實現(xiàn)插件樣式修改
- 全局通訊使用off$once ,注意使用off釋放監(jiān)聽
- creat中處理頁面script中對組件prop賦值數(shù)據(jù)時需要使用setTimeout,否則可能獲取不到數(shù)據(jù)
- onlaunch 不可以重定向加載頁面