uniApp 小程序項目總結-10-23

總括:

由于公司戰(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)插件樣式修改
  • 全局通訊使用on\off$once ,注意使用on時 在頁面銷毀或組件銷毀是使用off釋放監(jiān)聽
  • creat中處理頁面script中對組件prop賦值數(shù)據(jù)時需要使用setTimeout,否則可能獲取不到數(shù)據(jù)
  • onlaunch 不可以重定向加載頁面
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抓半,一起剝皮案震驚了整個濱河市喂急,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌笛求,老刑警劉巖廊移,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異探入,居然都是意外死亡狡孔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門蜂嗽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苗膝,“玉大人,你說我怎么就攤上這事植旧∪杞遥” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵病附,是天一觀的道長问窃。 經(jīng)常有香客問我,道長完沪,這世上最難降的妖魔是什么域庇? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任嵌戈,我火速辦了婚禮,結果婚禮上听皿,老公的妹妹穿的比我還像新娘熟呛。我一直安慰自己,他們只是感情好尉姨,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布庵朝。 她就那樣靜靜地躺著,像睡著了一般啊送。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上欣孤,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天馋没,我揣著相機與錄音,去河邊找鬼降传。 笑死篷朵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的婆排。 我是一名探鬼主播声旺,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼段只!你這毒婦竟也來了腮猖?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤赞枕,失蹤者是張志新(化名)和其女友劉穎澈缺,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炕婶,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡姐赡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了柠掂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片项滑。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖涯贞,靈堂內(nèi)的尸體忽然破棺而出枪狂,到底是詐尸還是另有隱情,我是刑警寧澤宋渔,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布摘完,位于F島的核電站,受9級特大地震影響傻谁,放射性物質(zhì)發(fā)生泄漏孝治。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望谈飒。 院中可真熱鬧岂座,春花似錦、人聲如沸杭措。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽手素。三九已至鸳址,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泉懦,已是汗流浹背稿黍。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留崩哩,地道東北人巡球。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像邓嘹,于是被迫代替她去往敵國和親酣栈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344