你將學會:html
Cordova(中文官網詳細介紹)是一個開源的移動開發框架。容許你用標準的web技術-HTML5,CSS3和JavaScript作跨平臺開發,應用的實現是經過web頁面,默認的本地文件名稱是index.html 大致思路就是把打包好的vue項目放在cordova的Web App中來啓動;咱們開始吧前端
cordova │ cordova-project │ my-app
這裏把cordova項目和vue項目平級存放,也能夠嵌套(自行看狀況)vue
mkdir cordova cd cordova cordova create cordova-project
cd cordova-project cordova platform add android --save
要構建和運行App,你須要安裝每一個你須要平臺的SDK。另外,當你使用瀏覽器開發你能夠添加 browser平臺,它不須要任何平臺SDK。java
cordova requirements
cordova run android
cordova build android
apk生成目錄:cordova-project/platforms/android/app/build/outputs/apk/debug/app-debug.apknode
默認生成的cordova app 圖標: 運行界面:
linux
進行到這裏的時候,cordova部分先告一段落,下面開始第二部分android
cd cordova vue create my-app //配置裏咱們選擇默認項就行default (babel, eslint) cd my-app npm install npm run serve
默認狀況下,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
cd cordova-project cordova run android
或者是打包apkgithub
cd cordova-project cordova build android
運行至手機界面: web
運行cordova run android
後,app會裝到手機上 谷歌瀏覽器輸入:chrome://inspect/#devices 看到以下界面: 找到本身的設備(手機中也須要運行app),點擊inspect,接下來就能夠調試樣式了
先隨便準備2張圖片(圖標以及啓動頁圖片)
進入文件夾:
cordova/cordova-project/res/icon/android
將圖片進行替換便可(名字/圖片格式推薦png) 替換爲:
安裝splashscreen插件:
cd cordova-project cordova plugin add cordova-plugin-splashscreen
進入文件夾:/cordova/cordova-project/res/screen/android
將圖片進行替換便可,這裏只替換了豎屏的(名字/圖片格式推薦png) 替換爲
config.xml
<name>vueApp</name>
添加圖標以及啓動頁,在 <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>
每次打包須要執行以下命令,很麻煩
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 //調試至手機