使用cordova把h5應用打包成apk

因爲h5應用開發不是本例重點，所以直接提供一個最簡單的h5應用代碼，此應用使用vue-cli框架開發

 

此h5應用叫vue1，用webstrom打開vue1，進行npm install安裝引用

vue1代碼可從百度網盤下載：連接: https://pan.baidu.com/s/1eSq71IU 密碼: 1spk

 

PS：此套代碼npm install時會報錯

能夠運行如下命令解決：

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

 

而後run dev測試開發環境

看到> Listening at http://localhost:9000說明成功，而後在瀏覽器訪問http://localhost:9000

看到這樣子說明，這樣vue程序是正常的，而後準備用cordova打包成apk

 

首先打包vue應用

打包輸出的文件，dist文件夾下都是

 

而後從新回到capp1，capp1有www目錄

再打開一個webstrom（此webstrom命名爲www），打開的目錄就是這個www文件夾

PS：如下還會打開多個webstrom和as，以防搞混每一個都有單獨命名，注意不要搞錯

 

打開後，首先把www已有的文件除了index.html都刪掉

刪完後的樣子

 

把vue1打包的文件，除了index.html文件外，都拷到www文件夾下

拷完後效果

 

而後打開index.html，進行幾項修改

 

首先在head部分添加引用個css文件（就是剛纔拷的打包後文件，注意這些文件名都有一串隨機文字）

在meta加上<meta charset="utf-8">

PS：不然中文會亂碼

 

這個css文件引用刪掉

 

把這個div刪掉

添加個div，id叫app

刪掉此js文件引用

添加如下幾個js文件引用

到此index.html編輯結束

PS：以上全部的www文件夾的文件修改，都是爲了把h5程序（也就是vue1）拷到cordova的目錄，做爲cordova打包apk的文件

PS：www目錄原來的文件是cordova自帶的h5應用的demo，可做爲參考

PS：www目錄的index.html文件不覆蓋而是在原來的基礎上改，是由於這個用於cordova的頁面跟通常的html頁面格式與配置有不一樣

 

而後開始cordova打包apk，命令行進入capp1的目錄，運行命令cordova build android

成功後的樣子，能夠看到打包後的apk文件路徑，此文件能夠拷到手機安裝並運行，若是隻要打包apk就到此結束

 

cordova打包的程序還能用as調試，回到capp1的as，build一下

PS：必定要手動build一次

而後插上手機，開始調試，能夠看到跟vue1在瀏覽器打開一個樣子

 

對於通常的cordova應用開發者，作到這裏通常就能夠，如下展現更復雜的開發場景