記下uniapp開發一個次過程。
概念
Uniapp 從官方的意思是基於vue語法 一套代碼能編譯出多端 h5 app端 小程序端. 嗯看起來很美好 但建議如果做什么產品就選定對應技術為好 從官方代碼那邊只能通過#if #end 之類強制分離 寫個h5就用自家的腳手架 小程序也有官方的demo 當然app的話 apicloud也用過 weex rn也體驗過 在眾多hybird技術中也是一流的技術 畢竟學習還是比較簡單 效果也不錯 打包也容易嘛
為了配合下面的安裝環境理解這里還是要介紹下 個人理解的uniapp 它其實大概就是公版的小程序(公版顯卡) .
微信小程序 支付寶小程序等等是基於公版加上自己獨有的一些特性而變成的 所以語法非常類似. 從app角度說就是一個支持小程序功能但沒有什么任何頁面顯示的空的App (官方統稱 標准基座) 可以理解 微信里只有小程序這一個功能 我們做的所有頁面 功能都是讓這個小程序越來越充實 壯大 換句話說做得好 確實連微信也能模仿出來 但用戶角度是感知不到的 還是感覺就是一個app
前面提到標准基座 那是官方提供的 官方也提供了測試證書供體驗 但官方可不會好到給每個app都配置不一樣的基座 所有一般新人開發看到的都是一樣的app圖標 一樣的啟動界面 只有里面頁面才是開發者能修改的 除此之外 一些app核心 如 推送 版本升級 定位 支付 在官方送的版本上很難體驗出來. 官方也提供了解決方案 那就是自定義基座 . 在自己基座上就可以開展高級功能 定制化功能. 相應的你必須擁有更多的開發條件 比如ios 安卓證書 xcode模擬器 安卓x86模擬器 等等 傳送門
說了那么多大概就是 如果你只是想看看uniapp性能之類的 做個demo看下效果 或者純page頁面開發 用官方的足矣 但是如果要真實上架的 一定要用自定義基座基礎上開發 特別適合前端開發同學們 對原生不是很懂的 官方也提供了插件市場 提供一些實用的插件 可直接類似vue插件一樣用 不過有些要花錢
開發環境
基本
- Hbuiler：打包工具。配置打包參數（這點我喜歡apicloud可以雲打包 這個有點太捆綁了...用他們家產品就要裝他們家軟件 還要注冊他們家的號）
- 真機 最好iOS 安卓都有：插上去運行就可以跑了
- ios發布證書: 最低個人688rmb 之前有免費證書但不能用了 記得綁定uuid
- 安卓證書: 這個可以免費網上申請
- Chrome: 在寫頁面布局時候大可不用真機
標准app (基本還是原生那一套該有的)
- Xcode 主要用他的模擬器
- as模擬器 或者夜神模擬器 genymotion 之類的(官方的基座好像可以兼容所有內核 但自定義不知道為什么x86就不能在as模擬器上跑起來)
- ios開發證書: 自定義基座需要 記得是開發證書不是發布
- ios推送證書: 推送用
- 安卓證書: 這個可以免費網上申請
- Charis fiddler抓包工具: 配合模擬器調試
- 各個對應尺寸的啟動圖 啟動logo
- 個推 短信 支付 定位 各個appid appsercet
技術棧 (偏向前端)
- Vue全家桶 route Vuex 路由跳轉 事件存儲 分發 props slot emit 父子組件傳遞
- EventBus 事件監聽 分發 取消監聽
- Es6 知道import export this作用域 prototype promise 能寫遞歸 去重 函數 能封裝自己util 如時間 加解密
- 版本號概念 wgt升級(熱更新) 和 整包升級
- 最好了解小程序 有全局的變量 和局部變量的概念
- 有能編寫中等項目的less scss維護文件的能力 因為大部分ui還是自己畫 不能直接用第三方vue ui .也可以基於官方給的ui改造
- Iconfont 圖標集 不用真的很浪費 還是矢量的
- Webview (知道原生和h5是如何交互信息的)
- 如果業務采用部分利用h5去實現 必須掌握各種移動端ui和適配
- 了解一些基本app生命周期 如onLaunch onShow onHide處理的事務 也了解頁面的push pop 堆棧
- 最好還是有個app前輩帶一帶 能少很多坑
c端架構
C端大致主要都是由各個page(基本單位)組成 也就是用戶所以看到的界面元素。而編寫page頁面時候有3種方案
- .vue 基本和h5的vue沒有太大區別 div換成 view span換成text 多了些特殊鈎子 小程序寫法 支持絕大部分css3 內置plus+對象
- .nvue 和.vue差不多 但是渲染引擎是weex 所以更嚴謹 比如不能用background 而是background-color css3偽類 只能靜態,絕對或彈性布局 當然體驗會更加接近原生 內置plus+對象
- webview里的h5 這個如字面意思 和一般的html無任何差別 需要手動plus+對象
什么是plus+對象 簡單來說就是類似wx-jsk一樣 必須要在頁面注入對象后才能調用些特有的api 如plus.runtime.version 獲取當前版本號 plus.storage 本地存儲 plus.nativeUI原生界面等 具體參考 這里
Uniapp內置plus對象但在再此基礎上有封裝層uni開頭的api接口 是為了兼容小程序和app。所以底層還是一個東西
Webview
頁面直接展示 url 或者本地頁面的內容 . 可以通過plus對象和殼子通信 如獲取app的用戶信息 發起原生功能等
在uniapp里webview有些特性
- App傳遞數據給h5 主要通過 獲取webview對象 然后對象的
evalJS方法 如果想做事件驅動 需要使用 EventBus - h5傳遞數據給App 主要通過 獲取webview標簽里
@message傳遞
-
默認采用 官方標題欄(根據web里的title)+web頁面 在 pages.json 設置titleNView對象
如需自定義標題欄 設置"navigationStyle": "custom", 然后獲取webview對象 手動設置
wv.setStyle({titleNView:{"titleText": "自定義標題,}) -
App的storage和h5的plus的storage 互通
那么大致了解了基本單位 和特性 就開始要想下 如果要開發一款app 有多少頁面用原生vue寫 多少頁面用webview去寫 當然也可以采用100%原生vue去寫.但如果維護迭代很麻煩 (以后部分業務需要添加新頁面就要更新版本) 或者100% webview頁面(wap2App 體驗不好) 多多少少會影響用戶體驗
為了達到一個很好的APP體驗 就要在初期合理分配 比如 一級頁面Tabbar 冷數據頁面等用原生vue.h5去承擔熱數據 活動 或着某塊業務 但要保證服務器h5頁面不能訪問時 App也能友好的訪問 另外App 版本升級 推送 登錄 最好原生處理 具體還是看App屬於什么行業 業務需求
建議工程項目最好分成2個 1個uniapp 1個h5 可以通過技術手段 如一個scss類 一個request.js 讓開發體驗一致化.最好再封裝一個native.js工具類 通過plus對象和原生進行交互 比如 在h5里發起一個掃碼直接調用 app.scan(callback) 方法即可 對於新手來說專注功能開發就行 對於老手可以進一步提升利用uniapp特性和一些插件 編寫優質方法類 提高用戶體驗
s端設計
因為畢竟是前端 而且業務都在服務端 這里就簡單說下后台設計思路 因為真實項目坐下來 和后台交流也蠻多
首先就是用戶信息獲取 數據安全方面 采用的是App統一登錄 rsa加密敏感信息 獲取 token 然后本地緩存token 注入plus對象 並且h5如果發起請求直接從plus取 對第三方工具打開h5網頁因為沒有plus對象的token 則直接提示非法進入 這套即簡單又實用 如果后台想設計token合法 有效性 用戶唯一性可以繼續擴展
本地緩存 因為uniapp也提供db模塊 如果一些次要信息 如歷史記錄 文件 圖片位置信息 可不必麻煩后台存儲 但要注意用戶換手機后 一定不能影響用戶使用 不然還是雲端
版本檢測升級 uniApp升級有2種 整包和熱補丁. 不管哪種都不提供檢測升級方法 需自己實現 一般類似拿 plus.runtime.version 和服務端發布的version做比對 如果需要升級就返回下載url 這里要注意 升級有強制升級和非強制升級 在我的真實項目犯了個錯 做升級的時候因為疏忽了跳版本升級問題導致部分用戶無法正常更新 所以簡單點 一個master主分支 就是不存在熱補丁升級 強制換包升級 做得好點就是版本里面還分版本 可以存在多個分支 但該版本只能獲取自己版本的熱補丁 如果要跨版本就要強制升級 在設計接口時候一定要注意 最好分4位版本號並且和前端說好邏輯
消息推送 這里主要講的是透傳 因為有些頁面沒有固定的url 建議后端只返回業務code+id code 如 {code:'10001',id:'1'} 讓前端去解析業務code 假設 10001代表的是 跳轉商品詳情 id是商品id 那么用戶點擊消息就會自動跳轉該商品 不用管這個頁面是app頁面還是h5頁面
后台統計 uniapp的話自帶統計后台 來統計用戶日常的統計信息 和app崩潰日志 當然也可以埋點去做 或者第三方友盟_cmzz.push 去做自己的業務統計 一定要去異步實現 不要影響App體驗
開發心得
-
onLaunch只在App.vue 聲明 其他頁面用onShowonLoad其中onLoad只觸發一次onShow能無限 -
插件市場的原生插件只針對自定義基座 如打開office文件 並且插件和包名綁定 要注意確定證書是不是有效
-
如頁面布局 接口對接可以用chrome模式搞定 sdk功能測試用模擬器調試 開發完后在用真機去跑 可以提高效率
-
布局前先考慮他們家的 uni-ui
-
mescroll 是個很好的上拉滾動下拉刷新插件 建議不要手動在寫了個了
-
webvieiw setStyle時候要setTimeout 一會 並且在h5里 要
document.addEventListener('plusready',plusReady,false);因為初始化要點時間 在部分安卓機里可能找不到plus對象 而報錯
-
還是初始化問題 建立在onLaunch開個隱藏webvieiw打開h5 已達到預加載效果 如果還慢需要做loading
-
在web-view頁面里通過
webviews = this.$scope.$getAppWebview()獲取webview集合 然后再通過wv = currentWebview.children()[0]獲取當前webview -
如果想實現web-view自定義頭部按鈕 比如點擊右上角按鈕跳轉頁面 使用
wv.setStyle({titleNView: {buttons:[btn1,btn2,...})buttons配置
不過在安卓機里 button的 onclick好像只能接受 string 類型 所以要做個類似兼容處理
//$h5 首先你需要定一個掛在對象 把EventBus掛在進去
if (plus.os.name=="Android"){
return "javascript:window.$h5.EventBus.dispatch('"+cbName+"','haha');"
}else{
return function(){
var jsString='window.$h5.EventBus.dispatch("'+cbName+'","haha");'
wv.evalJS(jsString);
}
}
-
uniapp是支持spa 單頁面應用的 但push pop這種動畫你要自己處理
-
盡量用原生vue+h5模式搭建項目將 比例大概 3-4 7-6開 方便升級
-
打包時候有可能黑邊問題 請准備好對應尺寸的啟動圖
-
版本檢測時候要分被動和主動 有些場景就是要強制讓用戶更新
-
圖標統一建議用 iconfont 矢量圖標 質量高 方便 h5 uniapp都可以用 畢竟每個圖標路徑很麻煩
-
有效利用
plus.storage和plus.sqlite本地存儲 分清楚用什么存比較好 如詳情 冷數據 歷史數據 當然做得好 可以在每次關鍵提交服務器份 使app更友好 提高用戶體驗 -
uniapp是個大技術棧 絕對不要學官方多合一 至少 如果做App就app 小程序要么換一個 要么就針對小程序 一開始是很簡陋的版本 但經過迭代 作出市面級app 絕對沒問題 前提是要精各類api sdk
-
官方也推薦wap2app 實際效果還過得去 但這個還不如自己用webview實現 親測
-
待定...