用web技術寫APP

時間 2019-11-20

標籤 web 技術 app 欄目 HTML 简体版

原文原文鏈接

據說會寫web的人也能寫APP，抱着嘗試的心態踏上路體驗一番html

http://www.ionic.wang/start-index.htmlhtml5

0x00 框架環境介紹java

ionic是什麼?node

https://ionicframework.com/docs/
Ionic(ionicframework)一款開源的Html5移動App開發框架android

是AngularJS移動端解決方案,Ionic以流行的跨平臺移動app開發框架phoengap爲藍本，ios

讓開發者能夠經過命令行工具快速生成android ios移動app應用
angularjs

phonegap是什麼？
https://phonegap.com/
Phonegap是一個用基於HTML，CSS和JavaScript的，建立移動跨平臺移動應用程序的快速開發平臺。web

它使開發者可以利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberrysql

智能手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動npm

cordova是什麼?

http://cordova.axuer.com/

Cordova包裝你的HTML/JavaScript app到原生app容器中，能夠作到一次編寫處處運行各個平臺（android、ios、wp、bb、firefoxos、web等）

這些功能經過統一的JavaScript API提供，讓你輕鬆的編寫一組代碼運行在幾乎市面上的全部手機和平板上，

並能夠發佈到相應的app商城中。手上只有android手機，下面針對android 來弄

通俗的講：ionic是一款基於angularjs的html5移動app開發框架，而 cordova / phonegap能夠將代碼打包成apk文件

本文使用的是 cordova 打包工具進行打包，下面開始環境部署吧

0x01 安裝ionic和cordova

https://nodejs.org/

cordova 和 ionic 的命令行運行在Node.js 上面而且能夠經過NPM安裝，所以咱們須要先安裝一下NodeJs環境。

安裝時下圖四個全都選上

安裝好後，進入cmd測試一下是否安裝成功

C:\Users\yjc>node -v
v8.11.4

C:\Users\yjc>npm -v
5.6.0

接着使用npm安裝ionic 和 cordova

npm install -g cordova ionic

0x02 建立第一個項目

$ ionic start myApp tabs

下面三個是官方給的模板

$ ionic start myApp blank         #下方第一張圖
$ ionic start myApp tabs          #下方第二張圖， 本次測試建立
$ ionic start myApp sidemenu      #下方第三張圖

接着，運行項目

$ cd myApp
$ ionic serve

運行成功後會打開8100端口服務，並自動彈出瀏覽器訪問該服務

而後將代碼打包成andriod平臺

$ ionic build
$ ionic cordova platform add android
$ ionic cordova run android

當運行到 ionic cordova run android命令的時候，報出一個錯誤

(node:129252) UnhandledPromiseRejectionWarning: CordovaError: Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

經過字面意思是缺乏一個環境變量 ANDROID_HOME，後面去查資料發現僅僅安裝 nodejs 和 ionic是不夠的，還須要安裝 android studio及java環境。

畢竟無論怎樣最終的APP生成，都須要依賴andriod sdk以及android 編譯工具

0x03 安裝java環境

java環境安裝的是 jdk8

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

這裏也是全都選上

而後添加環境變量 JAVA_HOME, value就是jdk安裝的位置

設置完成後，在命令行裏測試一下，輸入Java彈出用法就沒錯了

0x05 安裝 Android Studio IDE

這貨是Google出的，須要FQ，不過國內也有很多開發者作了鏡像，其實關於FQ沒有什麼敏感不敏感的

只要不要給國家搗亂，好好學習，國家仍是會支持的，Github就是一個例子。下面是andriod studio 官網

http://android.com

若是沒辦法FQ，推薦下面國內鏡像站，基本里頭工具很齊全。

http://www.androiddevtools.cn/

這裏我下載的是第一個64位的，有一點須要說明一下，下載的Android Studio IDE 裏頭是包含了如下

1. SDK Tools (有sdkmanger adb等等)

2. SDK Platform-Tools (不一樣安卓版本的管理工具)

3. Build-Tools (編譯工具)

4. SDK (默認是8.+的版本，可是cordova 用的是8.0的，後面報錯咱們須要改一下版本)

5. SDK System images (模擬器鏡像，虛擬機AVD建立須要用到，在PC上模擬app運行)

等等

因此說安裝一個IDE就夠了，其餘不用裝 !!! 下載完成後解壓是免安裝的，基本文件以下圖

主程序在bin目錄下面，此時尚未SDK， Gradle是一個基於Apache Ant和Apache Maven

概念的項目自動化構建開源工具。它使用一種基於Groovy的特定領域語言(DSL)來聲明項目設置，

拋棄了基於XML的各類繁瑣配置。

進入bin目錄下面運行 studio64.exe 首先彈出是否導入設置，默認不導入便可，點下一步IDE就會開始下載SDK

這裏會彈出代理設置，點擊取消不設置代理也是可以繼續下載和安裝的，由於我相信好好學習，國家還會幫你加速的

以後這裏點擊自定義custom，把sdk默認安裝路徑更改一下，不改的話默認使用 Appdata 目錄有點煩人

選主題，夜貓子嘿嘿

下圖比較關鍵，這裏勾選AVD安卓虛擬機，固然忘記勾後面也能夠在IDE裏頭安裝，下面路徑則是要安裝的SDK目錄

這個目錄不能和Android Studio IDE 同個目錄。新建一個空目錄就行。

下面設置虛擬機分配內存空間大小RAM的，默認便可

點擊確認，人品好的話，國家不會斷你的網，而後能夠像運維人員那樣喝杯咖啡，抽個煙啥的慢慢等待

喝完咖啡回來看看，若是出現下面界面，那麼恭喜你人品還不錯，由於sdk全是 dl.google.com 裏下載的。

接着在主界面點configure ,選擇sdkmanager，查看SDK是否ok

這裏默認裝的是最新的SDK，Android 8.+ Level28 的SDK

也能夠到咱們安裝的目錄裏頭看看

這裏簡單說明一下， SDK 存放在platforms裏頭，裏面包含了你下載的全部android sdk版本

build-tools存放的是編譯工具， emulator則是用來建立虛擬機的工具。而虛擬機的鏡像存放於

system-images裏頭, skins是主題風格， platform-tools工具集裏我只認識 adb 和 sqlite3，

sdk源碼包存放在sources裏頭，最後就是tools/bin下的avdmanager.bat 工具用於建立虛擬機AVD

後面會用到

到這裏作了這麼多，其實就爲了一個環境變量 ANDROID_HOME，如今有了SDK就能夠設置該變量了

好了以後，退出終端，從新開個command prompt 執行 ionic cordova run android

0x04 深刻一步

初來乍到，遇到各類各樣問題是很正常的，不要怕報錯，解決錯誤的方法也很簡單，閱讀錯誤提示信息，在查詢

相關信息嘗試便可，上面配置好ANDROID_HOME以後，從新運行 ionic cordova run android 提示新的錯誤

(node:110872) UnhandledPromiseRejectionWarning: CordovaError: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

翻譯一下字面意思，大概是找不到 grandle 這個東西，若是有的話須要將其加入到環境變量path裏頭。在上面介紹Android Studio IDE目錄結構

的時候有提到Gradle，沒錯就是那玩意，咱們在環境變量指明一下Gradle的位置便可，由於ANDROID_HOME變量只說了SDK位置，IDE的位置

信息還沒上報給系統環境。個人gradle在這裏，把他添加到用戶環境變量中。

而後把終端關了從新運行。不重啓的話，終端不會動態更新環境變量。下面Git測試一下

能夠以後從新運行ionic cordova run android

結果指明瞭gradle給他，人家不用，本身又跑去下載低點的版本，爲什麼不一開始就去下載。。。

以後耐心等待他把編譯須要的依賴包所有下載完成。。。

下載完成後，又有一個新的錯誤。

File C:\Users\yjc\.android\repositories.cfg could not be loaded.
Checking the license for package Android SDK Platform 26 in F:\Android\SDK\licenses
Warning: License for package Android SDK Platform 26 not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':CordovaLib'.
> You have not accepted the license agreements of the following SDK components: [Android SDK Platform 26].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager. Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

重點是上圖藍字部分，想了老半天，後面纔想到IDE默認安裝的SDK版本是 Level 28的，

而這裏Cordova須要用到 SDK Level 26的，咱們尚未安裝26的版本，所以報錯了，

進入SDKManager安裝一下 sdk level 26的版本

下面網站(need FQ)可查看安卓版本和API level等級的對應

https://developer.android.com/studio/releases/platforms

完成後從新在運行一下命令 ionic cordova run android (好像已經敲了4遍了)，不要感到心累

其實排錯就像破案同樣，經過線索和調查，一步一步把案情弄明白，還不錯，放點背景音樂更有氣氛

這話剛說完，又報了個錯誤，不過至少編譯成功了，就是虛擬機運行不起來

BUILD SUCCESSFUL in 38s
46 actionable tasks: 46 executed
Built the following apk(s):
        C:\Users\yjc\Desktop\myApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
ANDROID_HOME=F:\Android\SDK
JAVA_HOME=C:\Java
No target specified and no devices found, deploying to emulator
(node:112612) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'semver' of null

編譯好的文件在藍字路徑，若是不想用電腦的虛擬機運行，能夠無視這個錯誤，

電腦連上手機，進入apk目錄下運行下面命令，就能夠在手機上安裝第一個demo app程序

adb install app-debug.apk

上圖是手機測試結果

可是之後頻繁的更改代碼測試的時候，總不可能總是到手機上安裝測試

要像web開發同樣，改好代碼，切換瀏覽器F5馬上顯示效果。

因此虛擬機模擬器問題仍是須要解決

參考這個網址，大概緣由是emulator版本的問題，

https://stackoverflow.com/questions/47018914/cordova-android-emulation-error-cannot-read-property-semver-of-null

這裏進入sdk manager 把最新的sdk 8.+刪除，點擊Apply應用一下

刪除成功後從新運行一下命令.此次雖然沒有報錯了，可是卡在這個地方不動，提示說請定義ANDROID_STUDIO_ROOT

:app:assembleDebug UP-TO-DATE
:app:cdvBuildDebug UP-TO-DATE

BUILD SUCCESSFUL in 2s
46 actionable tasks: 1 executed, 45 up-to-date
Built the following apk(s):
        C:\Users\yjc\Desktop\myApp\platforms\android\app\build\outputs\apk\debug\app-debug.apk
ANDROID_HOME=F:\Android\SDK
JAVA_HOME=C:\Java
No target specified and no devices found, deploying to emulator
No emulator specified, defaulting to Nexus_5X_API_28_x86
Waiting for emulator to start...
PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT