uniApp的踩坑之旅

項目背景：

因爲公司領導想要尋找一個能一套代碼開發多端程序的框架，在團隊開了一頓「肯得雞」會議後，決定要用uni-app來搞，目標是用uni-app重構線上微信小程序「皆電社區」，生成各端小程序、h五、安卓app、ios app，而後給出的時間是兩週多點的時間，包含各端上線的了，這個時間一聽仍是有點鴨力阿。

項目配置：

項目的配置人員是3個前端(兩男一女，女的已婚已育，55555) + 1個ios + 項目組長，人員技術方面，前端都是有vue的經驗和小程序經驗，而後項目組長是負責協調各端帳號和資源的調配，而後我是負責搭項目結構和編寫公共插組件以及負責社區發帖流程相關頁面，女生負責我的中心頁相關，另外一男前端負責登陸和分享相關，ios負責瞭解打包app相關。而後代碼託管是git，master下分出了dev，而後各我的再從dev分出各我的的分支，到時就合併到dev這個分支

項目需求：

項目啓動：

啓動時你們首先都先去看了下原微信小程序版本的源碼和uni-app的文檔，熟悉了下大概交互和頁面邏輯，而後負責各自模塊開發。因爲uni-app是背靠vue的，而後我這邊是把項目結構搭出來是綜合了vue項目和小程序項目的結構，初步給出瞭如下結構：

這些目錄和vuecli的差很少，大概講下

static目錄是放置一些webpack打包時不用處理的文件，打包時直接copy就行的

public是放置一些公共的文件或者api，封裝的插件

config是放置項目的接口配置文件

store是vuex相關，gitignore裏配置了免除unpackage文件的上傳，vue.config.js做用是增長一些對webpack打包時的控制

項目過程：

...............此處省略幾萬個字，因爲uni-app的代碼風格是跟vue如出一轍的，因此一頓擼代碼就好了，業務邏輯和交互什麼的，沒啥特別。

項目過程遇到的坑：

• 首先vue的一些語法在uni-app這框架下是不適用的，具體要上uni-app官網看下對比，還有就是vue的表現不同，例如我在for一個數組時，拿了item.id做爲key，可是因爲id是生成的無規則的長字符串，我向一個數組新增內容時，發現視圖表現錯亂，根本和數組的順序不一致，用了vue.set也沒生效。。。後來把key的值用index來填，視圖正常了
• 各端小程序的差別化，最多異樣的就是字節跳動和百度的小程序了，支付寶和qq小程序和微信小程序是比較少的異樣

1. 百度小程序裏面遇到的坑有canvas畫圖功能，canvasToTempFilePath的方法畫出來的圖保存報錯，報"解析失敗，須要檢查調起協議是否合法"，
2. 百度小程序中request接口返回的數據是已經parse的了，後端接口返回的對象是值是對象字符串都會自動幫你格式成對象
3. 支付寶端的坑是若是後端設了兩個cookie，只能拿到最後一個cookie，向支付寶反映後，支付寶這邊說會在11月底fix
4. ios端使用navback是會觸發上級頁面的onshow生命週期，其餘端是不會觸發的
5. uniapp中h5端的cookie問題，uni-app的request方法是不能帶cookie的，解決方法有兩種，一是引入axios，而是使用xhr來請求
6. 在抖音裏的頭條小程序使用uniapp的彈窗api若是涉及蒙層，蒙層變成抖音logo。。解決方法是手寫彈窗和蒙層
7. uniapp獲取節點信息uni.createSelectorQuery()的坑，支付寶和頭條小程序是獲取不許的，支付寶直接連節點信息爲undefined了，頭條獲取到都是屏幕高度，最後使用了selectAll來解決

最後總結：

    uni-app其實用起來是不難的，難就難在怎麼兼容各端各平臺的，爲了兼容在代碼加了很多#ifdef，還有一個難的點就是app打包了，因爲前端不太熟悉安卓或者ios這些打包機制，只能按照uni-app的打包教程來配，但教程又寫得很粗糙和不及時更新，像安卓開發工具androidStudio早就更新了，可是uniapp但教程仍是沒更新，只能靠本身摸索了，雖然此次項目咱們有個ios的在旁邊，可是仍是遇到不少坑。而後我本身也摸了很久，終於打包出一個安卓的apk了(爲了想學習和體驗下這個app端)，ios同窗打包安卓出來的是14.5M，而後我打包出來的是18M，這就是專業和我這些不專業搞的差異了，不過我仍是很滿意了，畢竟第一次弄和接觸安卓開發，後面我會發一個android的打包過程給你們。