Cordova封裝打包vue H5項目到Android平臺詳解

安裝Cordova

npm install -g cordova

復制安裝完成之后終端輸入cordova顯示下圖即表示安裝成功在這里插入圖片描述創建Cordova項目

進入你要創建項目的目錄執行：

cordova create helloWorld

復制

helloWorld即為你的項目名

成功創建之后文件夾如下：

在這里插入圖片描述創建平臺(這里是Android)

進入剛才創建的Cordova項目helloWorld中

在這里插入圖片描述

cordova platform add android

復制

如果需要添加指定版本的android則在后面加上版本號

cordova platform add android@6.2.3

復制

成功之后如下：

在這里插入圖片描述

輸入cordova platform ls可查看已安裝的平臺情況

在這里插入圖片描述

此時項目文件夾已經有了platform文件夾了

在這里插入圖片描述整合vue H5項目和Cordova

vue項目npm run build生成dist文件夾這里就不多說了！

在這里插入圖片描述

==這里要注意兩點==

1.將vue的路由模式改為hash

在這里插入圖片描述

2.將配置文件中的路徑修改如下：

在這里插入圖片描述將dist文件夾中的static 和index文件復制到cordova項目的www文件夾中在這里插入圖片描述

這里面很多教程都說直接復制粘貼其實不是的！一定要注意！

要在index.html中引入cordova.js，不然后續所有的插件都不能使用！

在這里插入圖片描述

接下來檢測cordova編譯環境

cordova requirements

復制

運行結果：

在這里插入圖片描述

這里面的環境缺一不可，如果沒有安裝會有提示，直接百度逐一安裝就可以了否則無法編譯成功的

所有需要的環境我放在這大家自行下載即可

運行項目生成apk包

cordova build android

復制

首次編譯需要一段時間，如果報網絡錯誤請切換網絡重試

在這里插入圖片描述

這里生成的debug包就可以直接安裝到手機進行測試了

連接手機直接測試

cordova run android

復制

手機連接電腦，打開開發者模式，然后運行上述命令即可在真機進行安裝包測試了

生成正式包

當測試好了之后我們就要生成正式的包了

cordova build --release android

復制

執行成功后就會生成正式的apk包了

在這里插入圖片描述

此時生成的包是沒有簽名的正式包

生成簽名證書并簽名apk包

生成證書就不說了網上百度一堆

接下來就是把生成的證書和上一步生成的未簽名的正式的apk包放同一個文件夾

然后再該文件夾下執行

jarsigner -verbose -keystore XXX.keystore -signedjar XXX.apk app-release-unsigned.apk XXX.keystore

復制在這里插入圖片描述

執行成功后就可以看到生成的簽名了的apk的包了，這個包就可以手機直接安裝使用了

總結

這些都是最基本的封裝，實際過程中我們還需要使用很多Cordova插件來滿足我們的項目需求

后面再慢慢豐富這個專題，今天時間有限就寫這么多了

還有ios的封裝包括打包申請證書pp文件生成ipa并上傳上架AppStore