Cordova+Vue構建Hybrid APP簡易實操

當下APP市場，由於Native APP開發成本高，Web APP不穩定，混合開發APP大行其道，成爲愈來愈多開發者的首選。Hybrid APP開發框架也比較多，Weex、Ionic、PhoneGap、WeX5……今天嘗試一下用Cordova+Vue來構建。

1. Cordova是什麼？

Apache Cordova 的前身是PhoneGap，是從PhoneGap中抽出來的核心代碼。

Cordova是一個開源的移動開發框架。容許你用標準的web技術-HTML5,CSS3和JavaScript作跨平臺開發。 應用在每一個平臺的具體執行被封裝了起來，並依靠符合標準的API綁定去訪問每一個設備的功能，好比說：傳感器、數據、網絡狀態等。（摘自Cordova中文文檔）

下面是Cordova中文文檔中的cordova應用架構的高級視圖：

說簡單點，Cordova就是把咱們的web頁面用原生代碼進行包裝，並提供給咱們js能夠調用的訪問原生設備功能的接口，最後生成一個能夠在原生設備上進行安裝的安裝包。

2. Vue項目

Vue你們應該都很熟悉了，下面新建一個Vue項目。

# 初始化新建項目
vue init webpack vue-app

# 安裝依賴
cd vue-app
npm install

# 啓動服務
npm run dev

# 打包項目
npm run build

修改config/index.js文件：

assetsSubDirectory：static這個二級目錄不須要，改成空；
assetsPublicPath：默認爲根路徑，改成當前相對路徑；
productionSourceMap：用於支持打包後的調試，改成false，能夠加快打包速度；

build生成的文件位於dist目錄下，先放着備用。

3. 構建Cordova項目

# 安裝6.0.0版本的cordova
npm install -g cordova@6.0.0

# 建立一個cordova項目，項目名爲cordova-vue-app，包名（Boundle ID）爲com.kw.cvtest，APP名稱爲cvapp
cordova create cordova-vue-app com.kw.cvtest cvapp

將剛剛建立的Vue項目dist目錄下的文件所有拷貝到cordova項目www目錄下，

而後添加android平臺：

cd cordova-vue-app
cordova platform add android --save

上面步驟完成以後，cordova-vue-app/platforms目錄下會生成android文件夾，這就是安卓平臺代碼了。

4. as打包APK

cordova有打包apk的命令，可是打包速度實在太慢，咱們通常把生成的原生代碼用eclipse或者android studio打包，IOS須要在Mac環境下用XCode打包，這裏沒有Mac，先看安卓。

沒有用過android studio的先去下載安裝，包括Android SDK。

安裝完成打開android studio，導入項目時選擇import from gradle，選擇build.gradle點擊肯定等待gradle編譯，這裏若是編譯失敗，大可能是由於gradle插件版本和gradle版本之間的對應問題，能夠參考《Android Studio中因爲gradle插件版本和gradle版本對應關係致使的編譯失敗的問題》。

編譯完成以後，菜單欄選擇build apk就能夠打包apk包了。

5. Cordova-Android項目主要目錄簡介

/assets/www：web頁面文件
/res：不一樣尺寸APP啓動頁，logo圖片，APP名稱等配置
/src：APP主Activity，以及咱們自定義的插件等放在這裏
AndroidManifest.xml：Android項目必需的也是最重要的一個文件，包名、版本號、應用所須要的權限都在這裏配置，項目中用到的全部四大組件都須要在這裏註冊。

以上，將打包出來的apk安裝在手機上看看效果吧~這裏只是混合開發APP的一個簡單實現，還未達到生產要求，在項目架構上對於web頁面和cordova插件的結合以後還須要深刻研究，歡迎評論區留言討論。