cordova

1. 安裝 cordova

一、安裝  JAVA JDK

  1. http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
  2. 請依照位元版本安裝，此例安裝後目錄為「C:\Program Files\Java\jdk1.8.0_131」

二、安裝 android studio

  1. https://developer.android.com/studio/index.html
  2. SDK目錄可改至 C:\android\sdk

三、安裝 Node.js

  1. https://nodejs.org/

四、安裝 git

  1. https://git-scm.com/downloads

三、設定環境變數

  1. 新增 JAVA_HOME 變數，值設為 C:\Program Files\Java\jdk1.8.0_131

  2. 新增 ANDROID_HOME 變數，值設為 C:\android\sdk

  3. 修改 PATH 變數，在後面加入 ;C:\Program Files\Java\jdk1.8.0_131\bin; C:\android\sdk\tools;C:\android\sdk\platform-tools;

四、安裝 cordova

  1. 開啟power shell，輸入： 
    npm install -g cordova
  2. 日後如果要更新版本 
    npm update -g cordova

五、環境檢查

  1. 測試 java 版本 
    javac -version
  2. 測試 cordova 版本 
    cordova -v

     

cordova

1-1 安裝模擬器

一、安裝BlueStacks

  1. http://www.bluestacks.com/download.html
  2. 裝好後啟動 android studio 並開啟專案。
  3. 按下執行，等一陣子，找到 emulator-5554 選取之即可。

cordova

1-2 建立 Cordova專案

  1. 建立目錄後建立專案 
    mkdir android
cd android

  2. 建立專案，格式：「專案目錄 + APP_ID + 專案名稱」，如「 myapp net.tad0616.myapp MyFirstApp」

    cordova create myapp net.tad0616.myapp MyFirstApp

  3. APP_ID 對應到 Android 的 Package Name 與 iOS 的 Bundle Identifier

  4. 將專案加入平台，平台指的是你的App之後要在哪執行

    cd myapp
cordova platform add android
cordova prepare android

     

cordova

2. 安裝外掛套件

一、安裝套件

cordova plugin add cordova-plugin-inappbrowser

二、匯入專案

  1. 開啟Android Studio，選擇「Import project (Eclipse ADT, Gradle, etc…)」把專案目錄中的 platforms\android 目錄載入

三、程式內容

<!DOCTYPE html>
<html>

<head>
  <title>打包網站範例</title>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">
  function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
  }
  function onDeviceReady() {
    cordova.InAppBrowser.open('https://campus-xoops.tn.edu.tw', '_self', 'location=no');
  }
  </script>
</head>

<body onload="onLoad()"> </body>

</html>