Vue Cli4 + Cordova

tags: VueJS,佩泥的筆記區,筆記

不要隨意更改內容，고만습니다。

只是筆記區，可能有錯誤

請確認已完成環境建置

請參考
JDK、Android Studio、Gradle下載、安裝和環境變數配置

• 驗證環境
  

參考網站 https://juejin.im/post/5e12b081f265da5d174dcb90

1. 建立Cordova項目

mkdir cordova
cd cordova
cordova create cordova-project

2. 添加Android平台

cd cordova-project
cordova platform add android

預設安裝最新Android版本

• 查看是否符合建構平台需求

cordova requirements

3. Cordova打包APK測試

cordova build android

• 使用Android Studio打開AVD，將apk檔案拉進畫面安裝測試
  
  
  
  
  

看到此畫面代表成功

4. 新建Vue cli

• 注意：記得先確認是否安裝Vue CLI

npm install -g @vue/cli

安裝完成後用vue -V，檢查是否安裝成功。

• 建立vue cli專案

cd cordova
vue create [專案名稱]

選項(選擇手動Maually select features)

手動操作請參考以下(依個人需求設定)
https://ithelp.ithome.com.tw/articles/10216606
https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
https://ithelp.ithome.com.tw/articles/10216606

cd [專案名稱]
npm install 
npm run serve

• 瀏覽器打開出現這畫面，代表成功
  

4. 新建vue.config.js

• 在專案目錄底下新建vue.config.js
• 其他的配置可以參考 https://cli.vuejs.org/zh/config/
  

const webpack = require('webpack');

module.exports = {
  publicPath: './',
  //這個值也可以被設置為空字符串（''）或相對路徑（'./'），
  //這樣所有的資源都會是相對路徑，這樣被部署在任意路徑，也可以用在類似Cordova hybrid應用的文件系統中。
  outputDir: '../cordova-project/www',
  productionSourceMap: false
  //如果你不需要生產環境的 source map，可以將其設置為 false 加速生產環境建構
}

5. Cordova + Vue Cli打包APK測試

cd cordova-project
cordova build android

• 使用Android Studio打開AVD，將apk檔案拉進畫面安裝測試
  

看到此畫面代表成功

6. 更換APP Icon樣式 及 APP 名稱、以及APP起始頁面

請參考 圖示和啟動畫面
皆在config.xml裡面設定

設定APP Icon

可以通過<icon>元素定義應用程序圖標。如果未指定圖標，則使用Apache Cordova預設。
以下配置可用於定義單個默認圖標，該圖標將用於所有平台。

<icon src="res/icon.png" />

若是沒有res資料夾請在/cordova/cordova-project/底下，
建立一個res資料夾將icon放置在此處。

• 請先安裝Splashscreen Plugin

cordova plugin add cordova-plugin-splashscreen

設定起始畫面

Android平台

• land為橫式、port為直式

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

Ios平台

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

如不想有起始畫面

<preference name="SplashScreenDelay" value="0" />

如不想有Spinner旋轉進度

<preference name="ShowSplashScreenSpinner" value="false"/>

禁用滾動

<preference name="DisallowOverscroll" value="true" />

允許 HTML5 媒體重播顯示內聯在螢幕佈局，使用瀏覽器提供的控制項，而不是本機控制項內

<preference name="AllowInlineMediaPlayback" value="true" />

強制全螢幕顯示

• 請先安裝Full Screen Plugin

cordova plugin add cordova-plugin-fullscreen

<preference name="Fullscreen" value="true" />