Giter VIP home page Giter VIP logo

cordova's Introduction

Codova環境架設

tags: APP

使用codova將網站轉換成APP,使用步驟如下附標題

1.安裝Node.js

  • 安裝Node.js

  • 安裝後可於cmder輸入指令node -v來確認版本

2.安裝git client

  • 安裝git

  • 安裝後可於cmder輸入指令git --version來確認版本

3.使用NPM安裝Cordova套件

  • cmder輸入指令npm install -g cordova進行安裝

  • cmder輸入指令cordova -v確認版本

4.安裝Java JDK

  • 安裝Java JDK

  • 安裝後設定環境變數PATH,將JDK安裝路徑加於分號後 ;C:\Program Files\Java\jdk1.8_65\bin

  • 新增環境變數JAVA_HOME,新增變數值C:\Program Files\Java\jdk1.8_65

  • cmder輸入javac -version確認JAVA版本

5.安裝Apache Ant

  • 安裝Apache Ant Ant是Android的編譯程式,他為開發Andorid的必要環境下載.zip檔,並解壓縮

  • 設定PATH環境變數,一樣將安裝路徑加於分號後 ;C:\ant\apache-ant-1.9.6\bin

  • 新增ANT_HOME環境變數,新增變數值C:\ant\apache-ant-1.9.6

  • cmder輸入指令ant -version確認版本

6.Android SDK Tools

  • 安裝Android SDK

  • 設定環境變數PATH,一樣將安裝路徑加於分號後(此安裝路徑有兩個路徑需要加上;[SDK Tools位置];[SDK platform-tools位置]) ;C:\Program Files (x86)\Android\android-sdk\tools ;C:\Program Files (x86)\Android\android-sdk\platform-tools

  • cmder輸入指令adb version確認版本

  • cmder輸入指令android後會跳出SDK Manager,將建議安裝的套件安裝完成

7.測試Codova

  • 在cmder輸入指令確認是否能夠執行模擬器
cordova create WangApp
cd WangApp
cordova platform add android
cordova build
cordova run android

  • 若上述模擬器無法執行可用其他模擬器代替GENYMOTION
  • 或是使用另一個大陸版模擬器MEmu

8.Android撰寫及編譯打包(補充說明)

撰寫程式

  • Cordova是個跨平台解決方案,還記得在前面我們用「cordova platform add」指令加入了Android平台嗎?你的App最終可能要執行在Android, iOS, WP8, BlackBerry等平台,既然是跨平台,當然希望「寫一次」程式就可以執行在各個平台上,為了實現這個需求,你可以編輯的資源僅限於「www」資料夾內的檔案。
  • 那麼之前在platforms\android\assets\www中看到的檔案呢?若你直接異動它,再透過對應的IDE還是可以產出可執行的App,但無法兼顧其他平台,既然選擇Cordova,最好不要這樣處理。 另外有關App的基本資訊,Cordova為了兼顧多平台,統一將設定放在專案根目錄中的config.xml檔案,若欲調整App名稱與版本等資料請編輯該檔。

編譯打包

  • 在完成程式的新增與編輯之後(記得,僅存取\www內的資源),於cmder執行以下指令即可,執行前請確認有完成「開發前置準備」裡面提到的環境變數設定。
   cordova build
  • build指令會自動把\www內的東西copy至各平台的\assets\www,並且依各平台不同特性加入與修正必要檔案,為確保整個流程正確,這部分請不要手動完成。 但是!若你不想要使用這種命令方式來打包成apk檔案,可以借用其他IDE來完成,若你有這個打算,請不要直接執行build,而改用以下指令(不同平台請自行抽換參數)。
cordova prepare android
  • prepare會把相關檔案copy至正確的地方,但不進行編譯與打包之動作。實際上執行前面說的build,它也是自動幫你在背後執行prepare與compile兩個指令。

9.結束

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.