前言（有點長慢慢看）

移動應用開發的方式，目前主要有三種：

Native App：本地應用程序（原生App）
Web App：網頁應用程序（移動web）
Hybrid App：混合應用程序（混合App）

圖1：三種移動應用開發方式

如圖1所示，三種移動應用開發方式具體比較如表2所示：

再來一個表補充一下對比：

	Native App	Hybrid App	WebApp
概述	傳統的原生App開發模式，有iOS和aOS兩大系統，需要各自語言開發各自App。	混合模式移動應用，介於Web App、Native App這兩者之間的App開發技術，兼具“Native App良好交互體驗的優勢”和“Web App跨平臺開發的優勢”（百度百科解釋）	移動端的網站，常被稱爲H5應用，說白了就是特定運行在移動端瀏覽器上的網站應用。一般泛指 SPA(Single Page Application)模式開發出的網站，與MPA（Multi-page Application）對應。開發和發佈成本最低
優點	性能和體驗都是最好的	開發和發佈都比較方便，效率介於Native App、Web App之間	開發和發佈成本最低
缺點	開發和發佈成本高	學習範圍較廣，需要原生配合	性能和體驗不能講是最差的，但也受到瀏覽器處理能力的限制，多次下載同樣會佔用用戶一定的流量
案例	網易管家App （Tab1，Tab2）	FanReact，我愛我家App，東方航空App，富國基金-富國錢包App	網易管家APP（Tab3）
應用技術	Swift，OC，Java	PhoneGap、Titanium、Salama、WeX5、APICloud、Kerkee和國內的AppCan（正益無線(北京)）、weex（阿里），項目各有各的實現方式，大致的原理基本相同。	ReactJS，RegularJS，VueJS等等

Hybrid App主要以JS+Native兩者相互調用爲主，從開發層面實現“一次開發，多處運行”的機制，成爲真正適合跨平臺的開發。Hybrid App兼具了Native App良好用戶體驗的優勢，也兼具了Web App使用HTML5跨平臺開發低成本的優勢。

目前已經有衆多Hybrid App開發成功應用，比如美團、愛奇藝、微信等知名移動應用，都是採用Hybrid App開發模式。

混合開發應用場景：

（1）折中考慮——如果企業使用 Hybrid 開發方法，就能集Native 和web兩者之所長。一方面，Native 讓開發者可以充分利用現代移動設備所提供的全部不同的特性和功能。另一方面，使用 Web 語言編寫的所有代碼都可以在不同的移動平臺之間共享，使得開發和日常維護過程變得集中式、更簡短、更經濟高效。

（2）內部技能——許多企業都擁有Web 開發技能。如果選擇 Hybrid 開發方法，在合適解決方案的支持下，Web 開發者只要僅僅運用 HTML、CSS 和 JavaScript 等 Web 技能，就能構建 App，同時提供 Native 用戶體驗。

（3）考慮未來——HTML5的可用性和功能都在迅速改進。許多分析師預測，它可能會成爲開發前端 App 的默認技術。如果用 HTML 來編寫 App 的大部分代碼，並且只有在需要時才使用 Native 代碼，公司就能確保他們今天的投入在明天不會變得過時，因爲 HTML 功能變得更豐富，可以滿足現代企業一系列更廣泛的移動要求。

幾種混合開發技術框架概述：

混合開發的終極目的：混合開發的編程思路是一樣的，React Native 或者 Hybrid 主要目的很多時候是爲了突破客戶端審覈限制和達到代碼複用的目的，避免一個相同的業務寫三份代碼（Android，iOS，Web）。

Hybrid （混合模式移動應用）混合開發述：

Hybrid是 HTML 和原生代碼混合實現app。開發是指介於Web-app、Native-App這兩者之間的一種開發模式，兼具「Native App 良好用戶交互體驗的優勢」和「Web App 跨平臺開發的優勢」

目前市面上最爲流行的一種框架就是混合開發框架，它可以用最少的人來做更多的多的事，是一些中小公司所欣賞的框架。大多數混合APP都使用Apache Cordova

React Native App：
Facebook開源的一套新的APP開發方案,使用JS+部分原生語法來實現功能。初次學習成本較高,但是在入門後,經過良好的封裝也能夠實現大部分的跨平臺。

React Native 的缺點，Android 體驗太差了，非常卡。

React Native不屬於Hybrid 開發。雖然同樣是一處編寫，處處運行，但是 Hybrid是 HTML 和原生代碼混合實現，而React Native只不過是以 JavaScript 的形式告訴 Objective-C 該執行什麼代碼。

打包Vue項目目前流行的就是使用weex和cordova

一、cordova 簡介

Apache Cordova是一個開源的移動開發框架。允許使用標準的web技術-HTML5,CSS3和JavaScript做跨平臺開發。應用在每個平臺的具體執行被封裝了起來，並依靠符合標準的API綁定去訪問每個設備的功能，比如說：傳感器、數據、網絡狀態等。
使用Apache Cordova的人羣:
1.移動應用開發者，想擴展一個應用的使用平臺，而不通過每個平臺的語言和工具集重新實現。
2.web開發者，想包裝部署自己的web App將其分發到各個應用商店門戶。
3.移動應用開發者，有興趣混合原生應用組建和一個WebView(一個特別的瀏覽器窗口) 可以接觸設備A級PI，或者你想開發一個原生和WebView組件之間的插件接口。—— 摘自《Cordova官網》

Cordova雖然可以用來開發APP，但cordova並不能把H5代碼變成IOS或者Android的原生代碼。cordova只是將我們的Html文件通過相應的API，顯示在HTML Rendering Engine(即WebView)中，同時 Cordova支持豐富的插件，這些插件提供了Cordova和原生組件相互通信的接口並綁定到了標準的設備API上。這就使開發者可以通過JS去調用原生代碼，比如：照相機、聯繫人、熱更新和打開第三方APP應用等。

原理圖如下

二、Cordova使用

使用Cordova的基本要求

a.首先要會基本的HTML + CSS + JS（否則的話你開發個毛線的app）

b.不需要太高深的Android開發經驗，但起碼的開發流程要了解

c.需要自行搭建Android開發環境：比如SDK

d.需要下載安裝Node（自行百度）

e.需要安裝Cordova（npm install -g cordova）

2.1 環境安裝

這裏提供的爲這些工具的官網或下載地址：

安裝Node.js
https://nodejs.org/en

安裝Cordova
http://cordova.apache.org

安裝Java JDK
http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

安裝Android SDK
http://www.android-studio.org/

安裝Ant
http://ant.apache.org/bindownload.cgi

jdk、sdk安裝略

2.1.1 Node.js安裝

安裝完後打開控制檯，輸入 node -v ，顯示當前版本號，安裝成功

2.1.2 Cordova安裝

cordova使用npm安裝，輸入 npm install -g cordova 進行全局安裝，安裝完後如果出現下面提示，使用 npm install minimatch@"3.0.2" 升級一下minimatch

2.1.3 Ant安裝

下載第一個zip的格式，解壓即可，比較方便

1823172-c1c6448319ebfc98.png-11.5kB

環境配置：

新建 ANT_HOME 環境變量，變量值爲ant的存放路徑；
系統變量 Path 裏面加入ant的bin目錄 %ANT_HOME%\bin;；
系統變量 CLASSPATH 裏面加入ant的lib目錄 %ANT_HOME%\lib;

cmd中輸入ant，如果出現如下內容，說明安裝成功：

Buildfile: build.xml does not exist!
Build failed

如果沒有配合成功，環境變量都配置未絕對路徑（方法可以百度）

2.2 創建Cordova app

2.2.1 命令創建Cordova app項目

新建一個目錄，Shift+鼠標右鍵，在此處打開命令窗口

cordova create hello com.example.hello HelloWorld

創建一個HelloWorld的應用，hello文件夾名，com.example.hello包名，HelloWorld應用名

在創建的時候有可能會報錯：

解決方法：

https://blog.csdn.net/txl910514/article/details/81235825

如果這個不行就這個：https://segmentfault.com/a/1190000014201573

還是不行自行百度。

創建成功目錄如下：

說明：

hooks	包含爲個性化應用編譯系統所需的腳本，存放自定義Cordova命令的腳本文件。每個project命令都可以定義before和after的Hook，比如：before_build、after_build
platforms	包含應用運行平臺如 Android 和 iOS 上對應的 Cordova 庫，各個平臺的項目，不要手動修改，因爲在build的時候會被覆蓋。
plugins	包含應用所需插件的 Cordova 庫，使得應用能夠訪問例如照相機和電池狀態相關的事項。插件目錄（Cordova提供的原生API也是以插件的形式提供的）
www	源代碼目錄，例如 HTML, JavaScript 和 CSS 文件。在Cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中。其中index.html爲應用的入口文件。
config.xml	包含應用相關信息，使用到的插件以及面向的平臺

2.2.2 創建Android項目

通過上述步驟，已生成Cordova app，但是platforms下是空的，需要創建Android或ios項目；

Android項目創建使用命令

cordova platform add android

來生成Android平臺的cordova庫，這時platforms文件夾中會生成一個android文件夾。
到這裏，cordova項目就已經建好了。

注意：得在platform 文件夾下運行

2.2.3 導入到Android studio

File --> Open --> 選擇platforms-android下的build.gradle，確定（這裏不是import工程）

等待IDE自動構建...

構建完成後的目錄結構如下：（切換到Android視圖模式）

這裏導入一般都會需要重新下載配置Gradle版本，如果本地你有匹配的版本了，那就略過了；

目錄內容解釋：

AndroidManifest.xml：Android應用的入口文件，負責配置applaction和activity等

java：Java文件，當前主要爲Cordova項目默認的啓動類（一般不需要關心，除非涉及到使用原生代碼開發功能）

assets：資源文件（H5應用的html、js、css等文件），需要注意的是，www中的cordova開頭的文件或文件夾（如果使用到了自定義插件，會有個plugins文件目錄），切記不可刪除！切記不可刪除！切記不可刪除！

res：app的配置：啓動圖標、應用圖標、應用名稱等。注意：xml中的config.xml是app打包用的配置文件，可配置如：啓動主頁面、權限、白名單等

2.2.4 vue項目創建與導入

創建vue項目略，創建完成後，打包你的h5項目形成部署包，如下：

把打包好的vue項目部署包放到，cordova app項目下的www下（把原來示例的項目清空掉）

開發中爲了方便，不需要每次編譯都拷貝文件，可直接在cordova項目根目錄中創建vue項目（即上圖中的目錄）。

2.2.5 打包APP

方法一、使用cordova命令打包

xx\platforms\android>cordova build android
Android Studio project detected
ANDROID_HOME=F:\AndroidSDK
JAVA_HOME=D:\server\Java\jdk1.8\jdk1.8.151
studio
Subproject Path: CordovaLib
Subproject Path: app
Starting a Gradle Daemon, 1 busy and 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
publishNonDefault is deprecated and has no effect anymore. All variants are now published.
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
        at build_dm9mufthcbtehnxb8j3px6xr.run(xx\platforms\android\app\build.gradle:143)
:CordovaLib:preBuild UP-TO-DATE
中間省略......
:app:cdvBuildDebug

BUILD SUCCESSFUL in 1m 1s
47 actionable tasks: 47 executed
Built the following apk(s):
        xx\platforms\android\app\build\outputs\apk\debug\app-debug.apk

提示BUILD SUCCESSFUL則表示打包完成，根據指定路徑，獲取apk後安裝即可。

常用的命令：

cordova install android //將編譯好的應用程序安裝到模擬器上。
cordova emulate android //在模擬器上運行（前提是創建好AVD）
cordova serve android //在瀏覽器運行
cordova build android //打包cordova項目到android平臺。
cordova run android //通過USB直接安裝到真機（該語句已經包括了build命令）

打包過程可能會遇到報錯：

Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

解決辦法：

配置如下環境變量：

ANDROID_HOME=D:\Program Files\Android\android-sdk

PATH=%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

錯誤信息：

Error：Android SDK not found. Make aure that it is installed. If it is not at the default location,set the ANDROID_HOME
environment variable.
解決辦法：https://blog.csdn.net/qq_26744901/article/details/79043217

使用AndroidStudio打包：APP

調試：https://blog.csdn.net/bing103425/article/details/81362113

三、cordova app的熱更新

具體實現步驟：https://www.imooc.com/article/26119

1、更新類型

外殼更新：添加了cordova plugins，也就是說添加了native code，此時UI提示，重新下載安裝。
H5更新：添加了javascript、html、css等，可以在後臺下載，自動更新掉以前的代碼（熱更新）

可見，H5等使用熱更新，避免每次都要提交程序到應用市場，並重新下載安裝。

2、熱更新原理

www下生成chcp.json①和chcp.manifest，打包成的app會指向該chcp.json地址②，每次啓動App的時候都會去服務器比對chcp.json文件和chcp.manifest文件。
如果發現手機的上面的version小於服務器上面json文件裏面的min_native_version這個時候會有一個通知告訴你應該更新你的外殼了，就是native部分；
如果min_native_version和手機的version一致而通過release的時間戳發現服務器上面的是最新的包，那麼手機就會把服務器上面的代碼下載到手機本地，然後根據update那幾種更新方式更新。
① content_url：項目地址② config_file: chcp.json地址

3、更新方案
1). 使用cordova-hcp server服務：https://github.com/nordnet/co...

做了啥：啓動一個ngrok服務，www是服務的根目錄；在www下生成chcp.json和chcp.manifest。
侷限性：ngrok不穩定；重啓服務ngrok域名變更，那就必須重新打包了。
改進：修改content_url，但是每次重啓還是會覆蓋。 ==> 優化方案
本地開發使用，自動在platform/../config.xml中加入<chcp><local-development enabled="true" />...

cordova plugin add cordova-hot-code-push-local-dev-addon
線上測試可卸載掉，防止每次自動更新新版本
cordova plugin remove cordova-hot-code-push-local-dev-addon

2). 優化方案：

搭建自己的服務器，並上傳www到根路徑
創建cordova-hcp.json模板，並使用 cordova-hcp build，生成chcp.json和chcp.manifest
在config.xml中寫入默認的<chcp>
- 可選配置：創建chcpbuild.options，配置dev/prod等環境下的config-file，通過 cordova run android -- chcp-dev 可動態修改<chcp>

之後每次npm run build更新www內容，都需要手動執行 cordova-hcp build 來刷新chcp.manifest。然後上傳服務器。

Android、h5（vue）之cordova 混合開發

前言（有點長慢慢看）

一、cordova 簡介

二、Cordova使用

2.1 環境安裝

2.1.1 Node.js安裝

2.1.2 Cordova安裝

2.1.3 Ant安裝

2.2 創建Cordova app

2.2.1 命令創建Cordova app項目

2.2.2 創建Android項目

2.2.3 導入到Android studio

2.2.4 vue項目創建與導入

2.2.5 打包APP

三、cordova app的熱更新

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

Vue解決keepAlive緩存頁面，組件在其他界面重複使用問題

轉：【Vue】vue中img的src屬性綁定問題

前端vue+公衆號授權登錄開發

cordova+vue混合開發處理返回鍵問題(雙擊退出)

Android、h5（vue）之cordova 混合開發

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結