cordova+vue-cli4構建app

  • 歡迎加入前端交流羣來獲取視頻資料以及前端學習資料:749539640 *

本文會詳細的介紹如何使用cordova來打包vue項目,生成app(android)

你將學會:html

  • 基於cordova構建vue項目app
  • 自定義app名字/圖標/啓頁圖片
  • 自動構建腳本

Cordova(中文官網詳細介紹)是一個開源的移動開發框架。容許你用標準的web技術-HTML5,CSS3和JavaScript作跨平臺開發,應用的實現是經過web頁面,默認的本地文件名稱是index.html 大致思路就是把打包好的vue項目放在cordova的Web App中來啓動;咱們開始吧前端

1.環境準備

2.驗證環境

  • 項目目錄
cordova
│   cordova-project
│   my-app

這裏把cordova項目和vue項目平級存放,也能夠嵌套(自行看狀況)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

要構建和運行App,你須要安裝每一個你須要平臺的SDK。另外,當你使用瀏覽器開發你能夠添加 browser平臺,它不須要任何平臺SDK。java

  • 3.4 檢測你是否知足構建平臺的要求:
cordova requirements

  • 3.5打包app安裝到手機上(前提是手機連上電腦並開啓USB調試模式)
cordova run android
  • 或者只是打包apk
cordova build android

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

默認生成的cordova app 圖標: 運行界面: linux

進行到這裏的時候,cordova部分先告一段落,下面開始第二部分android

4.新建vue項目(vue-cli

cd cordova
vue create my-app
//配置裏咱們選擇默認項就行default (babel, eslint)
cd my-app
npm install 
npm run serve
  • 4.1瀏覽器運行vue項目界面:

  • 4.2打包vue項目
  • 配置vue.config.js
  • my-app目錄下新建vue.config.js(這裏只作路徑配置,其餘配置項可詳情vue.config.js

默認狀況下,cordova create命令生成基於web的應用程序的骨骼,項目的主頁是 www/index.html 文件。git

'use strict'

module.exports = {
  publicPath: './',
//這個值也能夠被設置爲空字符串 ('') 或是相對路徑 ('./'),這樣全部的資源都會被連接爲相對路徑,這樣打出來的包能夠被部署在任意路徑,也能夠用在相似 Cordova hybrid 應用的文件系統中。
  outputDir: '../cordova-project/www',
//將打包目錄指向/cordova-projec下的www
  productionSourceMap: false,
//若是你不須要生產環境的 source map,能夠將其設置爲 false 以加速生產環境構建。

}
  • 配置好以後咱們進行打包
npm run build
  • 4.3打包apk安裝到手機上
cd cordova-project
cordova run android

或者是打包apkgithub

cd cordova-project 
cordova build android

運行至手機界面: web

5.瀏覽器調試app

運行cordova run android 後,app會裝到手機上 谷歌瀏覽器輸入:chrome://inspect/#devices 看到以下界面: 找到本身的設備(手機中也須要運行app),點擊inspect,接下來就能夠調試樣式了

6.更換app圖標以及app名字以及app啓動頁

先隨便準備2張圖片(圖標以及啓動頁圖片)

  • 6.1更改圖標:

進入文件夾:cordova/cordova-project/res/icon/android 將圖片進行替換便可(名字/圖片格式推薦png) 替換爲:

  • 6.2更改啓動頁圖片:

安裝splashscreen插件:

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

進入文件夾:/cordova/cordova-project/res/screen/android 將圖片進行替換便可,這裏只替換了豎屏的(名字/圖片格式推薦png) 替換爲

  • 打開config.xml
  • 6.3更更名字(name標籤內的內容進行更改便可)
<name>vueApp</name>
  • 6.4更改配置項

添加圖標以及啓動頁,在 <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>
  • 打包查看 圖標以及名字: 啓動頁:

7.自動構建腳本(shell)

每次打包須要執行以下命令,很麻煩

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 //調試至手機

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

相關文章
相關標籤/搜索