webapp結合Dcloud平臺打包圖文教程

前言

最近一直有BUI Webapp的開發者在問, webapp如何打包? 這自己是屬於第三方平臺的事, 既然有開發者在問, 那咱們針對這個問題, 也想對Webapp的打包作個總結, 本文適用於任何的H5打包, 若是你是使用BUI開發的Webapp, 那會更加簡單. 最後會有不一樣平臺的打包效果對比, 能夠下載安裝測試.

BUI Webapp的特色. 想了解更多,能夠去BUI官網看.

關於Cordova的打包教程,能夠看另一位羣友@伊何底止丶的文章.
Cordova項目中使用BUI框架打包及常看法答

建立一個Webapp工程

buijs 是BUI用來快速構建工程及模板的工具. 若是不想安裝,能夠直接下載BUI demo工程

建立BUI Dcloud 單頁工程

下面以建立BUI Dcloud工程爲例.

buijs create -p dcloud

-p 以後能夠加不一樣平臺, 目前有 bingtouch, dcloud, apicloud, appcan, 加上不一樣平臺之後,工程會有對應打包平臺須要的文件.

安裝依賴

npm install

若是較慢,也可使用 cnpm.

壓縮混淆工程

生成dist目錄,這個目錄就是咱們要拿來打包的,會對源碼作壓縮混淆.

npm run build

複製dist目錄裏面的全部文件

使用Dcloud打包Webapp

新建一個空白應用

打開Hbuilder編輯器

複製的dist工程覆蓋空白應用工程

在Dcloud工程上右鍵粘貼, 選擇全覆蓋.

在線打包

在工程上 右鍵-->發行-->發行爲原生安裝包

安卓默認使用Dcloud提供的證書測試就能夠了,直接點打包就能夠排隊.

點肯定查看打包狀態, 稍做等待.

最終效果預覽

下載官網demo打包後的預覽, 若是是建立的工程,是一個只有簡單頁面的效果.

物理後退及退出提醒

注意: 若是你要綁定物理後退按鍵, 在執行 npm run build打包以前,先打開 index.js 裏面有個註釋, 去掉註釋就行(直接下載的demo爲webapp,沒有這塊的處理).

打包平臺總結

每一個平臺的打包方式都是相似,都有本身的對應工具, 只要按這個過程來就能夠的.

Dcloud

目前免費打包須要排隊,功能沒有限制,已經很不錯 強烈推薦

APICloud

免費用戶的應用有數量限制,其它整個操做的流程及體驗都還能夠.

Appcan

打包有測試的啓動頁字樣

下載體驗總結

BUI Dcloud	BUI APICloud	BUI Appcan

基於相同工程在不一樣平臺上的打包體驗. 如下是我在魅藍 note6 的測試體驗. 你們能夠試試大家的結果是否是也這樣?

打開速度方面: Dcloud > Apicloud > Appcan
明顯打開的啓動頁都不用停留好久,這個都是默認配置打包,不知道是否有時間配置的緣故.

頁面切換方面: Dcloud >= Apicloud >= Appcan
因爲都是採用的同樣的路由,頁面切換速度基本保持一致的速度,在個人機型裏,感受Dcloud會略勝一籌.

效果體驗方面: Dcloud == Apicloud == Appcan 不一樣平臺的打包結果在不一樣機型的適配,都是保持一致的交互,一致的效果.