說明：

? ? 最近在做H5的開發(fā)，雖然只是做頁面，但也想學習一下整個流程的開發(fā)，也想自己弄個APP玩兒一下然后就搜羅了一下文檔。

?APP的開發(fā)模式：

1、原生APP ?2、網(wǎng)頁APP（webapp） ?3、H5 app（混合APP）

前兩者就不多說了，我們要弄的就是H5，以前我一直以為H5開發(fā)就是HTML5開發(fā)，其實不然，這里引用阮一峰老師的文章：

“H5 這個詞，可以理解成就是混合 App 模型，只不過它特指混合 App 的前端部分。?因為混合 App 的前端就是 HTML5 網(wǎng)頁，所以簡稱 H5。這個詞是國內(nèi)獨有的，基本上都是前端程序員在用，國外不用這個詞，就直接叫混合 App。

真正理解 H5 開發(fā)，需要先搞清楚什么是原生 App、什么是 Web App，因為混合 App 是在它們的基礎上誕生的。”

具體可以查看?阮一峰老師的文章：H5 手機 App 開發(fā)入門：概念篇

原理：

? ? ? ? 可以這么說，將webAPP包在原生APP內(nèi)，我們先在網(wǎng)頁上開發(fā)移動端APP，然后使用打包工具打包為移動端APP（其實就是使用APP的殼子內(nèi)部的瀏覽器，調(diào)用網(wǎng)頁和手機API）
? ? ? ? 然后H5在我看來又分為兩個開發(fā)方式：

? ? 1、內(nèi)置：將所有JS/CSS/圖片等靜態(tài)資源全部放在包內(nèi)調(diào)用，除了動態(tài)元素，全走本地靜態(tài)
?? ?2、引用：只打包一個門戶地址（例如百度，相當于就是一個瀏覽器 只不過里面只能訪問我們封裝的地址罷了）

開發(fā)工具：

webstorm，Android studio

環(huán)境配置（準備工作網(wǎng)上隨便查一大堆）：

JDK1.8 ?Android sdk gradle? node.js

JDK ?Android sdk ?gradle 環(huán)境配置網(wǎng)上一找一大堆，也都需要配置環(huán)境變量

需要注意的是 安裝Android sdk的時候，需要accepted license
打開CMD窗口移動到SDK/tools/bin/目錄下
運行sdkmanager.bat --licenses ?
然后會出現(xiàn) y/n?的提示，一路y下去就行了
完成后 在SDK目錄下會生成一個licenses的目錄

安裝說明：

1、安裝Cordova CLI

npm install -g cordova

?完成之后

?cordova -v? ?查看版本

2、創(chuàng)建打包項目

?cordova create myApp org.apache.cordova.myApp myApp

?格式 cordova create 項目名 ?項目域名 ?項目名

3、設置打包平臺

切換到創(chuàng)建的項目目錄 安裝平臺版本這里我們使用安卓（買不起IOS）

cordova platform add android --save

檢查設置平臺情況

cordova platform ls

4、打包檢查

cordova requirements

?? ?這里需要說明的是JAVA JDK Android SDK 和Gradle 是必須安裝完成才行，Android target可以先不用管，target在第一次打包的時候會自動安裝

5、執(zhí)行打包

打包前可以先修改一下項目內(nèi)的config.xml文件

<content src="https://zbox.ink/#/profile/dnf" />

或者? ??

<content src="./index.html" />

這個標簽可以是相對路徑，也可以是網(wǎng)頁路徑這就是打包好后運行的首頁

cordova build android

執(zhí)行命令等待打包就行了，如果你已經(jīng)安裝了環(huán)境變量，還是提示環(huán)境變量找不到，可能需要重啟電腦（我就是，找了半天沒發(fā)現(xiàn)問題，重啟大法）
?? ?然后在執(zhí)行的時候我還報錯，說是accepted license沒有找到，這就是上面說的 需要去執(zhí)行以下accepted license

6、打包配置圖標和啟動圖

可以參考 ?https://blog.csdn.net/qq_40014350/article/details/80326509

?

聲明：以上內(nèi)容若有錯誤，歡迎批評指正。若侵犯他人版權，請聯(lián)系我。

總結

以上是生活随笔為你收集整理的H5开发，打包成APK的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。