• 歡迎加入前端交流群來獲取視頻資料以及前端學(xué)習(xí)資料：749539640 *

本文會詳細(xì)的介紹如何使用cordova來打包vue項目桑滩，生成app（android）

你將學(xué)會：

• 基于cordova構(gòu)建vue項目app
• 自定義app名字/圖標(biāo)/啟頁圖片
• 自動構(gòu)建腳本

Cordova(中文官網(wǎng)詳細(xì)介紹)是一個開源的移動開發(fā)框架懂更。允許你用標(biāo)準(zhǔn)的web技術(shù)-HTML5,CSS3和JavaScript做跨平臺開發(fā),應(yīng)用的實現(xiàn)是通過web頁面憔购，默認(rèn)的本地文件名稱是index.html
大體思路就是把打包好的vue項目放在cordova的Web App中來啟動诚隙；我們開始吧

1.環(huán)境準(zhǔn)備

• Java SDK 8(cordova最高支持到8)下載地址
  • window環(huán)境配置
  • linux環(huán)境配置
  • mac Os環(huán)境配置
• Gradle
• Cordova 8.0
• Node
• vue-cli
• Android Studio /Android SDK
  • Android Studio
  • Android SDK

2.驗證環(huán)境

image

• 項目目錄

cordova
│   cordova-project
│   my-app   

這里把cordova項目和vue項目平級存放格带，也可以嵌套（自行看情況）

3.新建cordova項目

• 3.1新建cordova目錄

• 3.2在cordova文件夾下新建cordova項目

mkdir cordova
cd cordova
cordova create cordova-project

• 3.3添加Android平臺

cd cordova-project
cordova platform add android --save

要構(gòu)建和運行App邪媳，你需要安裝每個你需要平臺的SDK。另外檬洞，當(dāng)你使用瀏覽器開發(fā)你可以添加 browser平臺狸膏，它不需要任何平臺SDK。

• 3.4 檢測你是否滿足構(gòu)建平臺的要求:

cordova requirements

image

• 3.5打包app安裝到手機上（前提是手機連上電腦并開啟USB調(diào)試模式）

cordova run android

• 或者只是打包apk

cordova build android

apk生成目錄：cordova-project/platforms/android/app/build/outputs/apk/debug/app-debug.apk

默認(rèn)生成的cordova app 圖標(biāo)：

image

運行界面：

image

進行到這里的時候添怔，cordova部分先告一段落湾戳，下面開始第二部分

4.新建vue項目（vue-cli）

cd cordova
vue create my-app
//配置里我們選擇默認(rèn)項就行default (babel, eslint)
cd my-app
npm install 
npm run serve

• 4.1瀏覽器運行vue項目界面：

image

• 4.2打包vue項目

• 配置vue.config.js
• my-app目錄下新建vue.config.js（這里只做路徑配置，其他配置項可詳情vue.config.js）

默認(rèn)情況下广料，cordova create命令生成基于web的應(yīng)用程序的骨骼砾脑，項目的主頁是 www/index.html 文件。

'use strict'

module.exports = {
  publicPath: './',
//這個值也可以被設(shè)置為空字符串 ('') 或是相對路徑 ('./')艾杏，這樣所有的資源都會被鏈接為相對路徑韧衣，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中糜颠。
  outputDir: '../cordova-project/www',
//將打包目錄指向/cordova-projec下的www
  productionSourceMap: false,
//如果你不需要生產(chǎn)環(huán)境的 source map汹族，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。

}

• 配置好之后我們進行打包

npm run build 

• 4.3打包apk安裝到手機上

cd cordova-project
cordova run android 

或者是打包apk

cd cordova-project 
cordova build android 

運行至手機界面：

image

5.瀏覽器調(diào)試app

運行cordova run android后其兴，app會裝到手機上
谷歌瀏覽器輸入：chrome://inspect/#devices
看到如下界面：

image

image

6.更換app圖標(biāo)以及app名字以及app啟動頁

先隨便準(zhǔn)備2張圖片（圖標(biāo)以及啟動頁圖片）

• 6.1更改圖標(biāo)：

image

image

image

• 6.2更改啟動頁圖片：

image

安裝splashscreen插件：

cd cordova-project
cordova plugin add cordova-plugin-splashscreen

進入文件夾：/cordova/cordova-project/res/screen/android
將圖片進行替換即可,這里只替換了豎屏的（名字/圖片格式推薦png）

image

image

• 打開config.xml

• 6.3更改名字(name標(biāo)簽內(nèi)的內(nèi)容進行更改即可)

 <name>vueApp</name>

• 6.4更改配置項

添加圖標(biāo)以及啟動頁元旬，在<platform name="android"> </platform>添加如下代碼

   <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="res/icon/android/icon-36-ldpi.jpg" />
        <icon density="mdpi" src="res/icon/android/icon-48-mdpi.jpg" />
        <icon density="hdpi" src="res/icon/android/icon-72-hdpi.jpg" />
        <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.jpg" />
        <splash density="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
        <splash density="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
        <splash density="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
        <splash density="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
        <preference name="ShowSplashScreenSpinner" value="false" /><!-- 啟動頁面淡入淡出的效果 -->
    </platform>

• 打包查看
  圖標(biāo)以及名字：

  
  
  image
  
  

  啟動頁：

  
  
  image

7.自動構(gòu)建腳本（shell）

每次打包需要執(zhí)行如下命令榴徐，很麻煩

cd cordova/my-app
npm install
npm run build
cd ../cordova-project
cordova build android /cordova run android

我們可以在cordova目錄下新建build.sh文件

#!/usr/bin/env bash



PLATFORM=android
#!1(not clean)   0(clean)
TYPE=build
#!(-d)debug   build
TYPE=$1

 
function echo_action() {
    INFO_START='\033[1;36m'
    INFO_END='\033[0m'
    echo -e "\xF0\x9F\x90\xB6 ${INFO_START}$1${INFO_END}"
}

function echo_info() {
    INFO_START='\033[1;32m'
    INFO_END='\033[0m'
    echo -e "\xF0\x9F\x92\x9A ${INFO_START}$1${INFO_END}"
}

function echo_warn() {
    INFO_START='\033[1;33m'
    INFO_END='\033[0m'
    echo -e "\xF0\x9F\x92\x9B ${INFO_START}$1${INFO_END}"
}

function echo_err() {
    INFO_START='\033[1;31m'
    INFO_END='\033[0m'
    echo -e "\xF0\x9F\x92\x94 ${INFO_START}$1${INFO_END}"
}


function addAndroidPlatform() {
    echo_action "Start add android platform ..."
     cordova platform add android
    if [ "$?" != "0" ]; then
        return 1
    fi
    return 0
}



function installDependencesCordova() {
    echo_action "Installing Cordova dependences ..."
    npm install
    echo_info " Cordova Dependences installed"
}


function installDependences() {
    echo_action "Installing dependences ..."
    echo_action "cd ./my-app"
    cd ./my-app
    npm install
    echo_info "Dependences installed"
}


function buildWebapp() {
    echo_action "Start building my-app..."
    npm run build
    echo_info "Build Command:  npm run build"

}

function installPlugins() {
    addAndroidPlatform
    echo_info "Install App Updater plugin finished"
}

function buildApk() {
    echo_action "Start building ..."
    if [ "${TYPE}" == "debug" ]; then
          cordova run android
          echo_info "Build Command:  cordova run android"
    else
        cordova build android
         echo_info "Build Command:  cordova build android"
    fi
}


echo_info "Build for ${PLATFORM}"
if [ "${TYPE}" == "debug" ]; then
        echo_info "Build Command:  cordova run android"
else
        echo_info "Build Command:  cordova build android"
fi


installDependences
if [ "$?" == "0" ]; then
    echo_info "All dependences have been installed successfully."
else
    echo_err "Failed to install dependences."
fi

buildWebapp
if [ "$?" == "0" ]; then
    echo_info "All things done successfully."
else
    echo_err "Build failed."
fi

echo_action "cd ../cordova-project"
cd ../cordova-project

installPlugins
if [ "$?" == "0" ]; then
    echo_info "All plugins have been installed successfully."
else
    echo_err "Failed to install plugins."
fi

installDependencesCordova
if [ "$?" == "0" ]; then
    echo_info "All dependences have been installed successfully.."
else
    echo_err "Failed to install dependences."
fi


buildApk
if [ "$?" == "0" ]; then
    echo_info "All things done successfully."
else
    echo_err "Build failed."
fi

這樣我們下次就可以

cd cordova
./build.sh build //打包apk
./build.sh debug //調(diào)試至手機

8.vue中使用cordova,詳情vue-cordova