1. 程式人生 > >ionic 3 vscode 在win10下 開發環境搭建

ionic 3 vscode 在win10下 開發環境搭建

 最近學習ionic3開發,按照官網介紹的方法做開發環境搭建,發現並不正確(還是2.0的),網上找到的一些資訊也不對,因為Ionic版本從1.0到3.0變化很大。 現把安裝過程記錄下來,給各位探索的朋友們節省時間。具體的安裝環節不做詳細介紹,不會的同學可以百度搜索(找不到答案時可以嘗試bing,尤其是看到英文錯誤資訊時,在baidu裡幾乎無解,bing國際裡資訊更多)

ionic其實是呼叫了cordova,它的命令列就是封裝了cordova的命令列,所以格式一樣,只是前面加了一個ionic

下面的操作需要用管理員方式進入命令列(右鍵以管理員身份執行)

1.安裝 node.js 

     安裝好node.js後,也可以安裝淘寶映象版的node.js,這樣更快

      npm install -g cnpm --registry=https://registry.npm.taobao.org 

  設定全域性的npm從國內源載入

       npm config set registry https://registry.npm.taobao.org

    這樣後面所有的命令列操作要使用cnpm而不是npm

2.安裝cordova ionic 

    執行  npm install -g cordova ionic

系統會自動安裝cordova ionic命令列工具

3. 建立專案

ionic cordova start myApp tabs 此處tabs是專案模板,表示創建出的專案是典型的帶三個tab頁面的

4. 瀏覽器執行

cd myApp

ionic cordova serve

5.在安卓執行

在命令列進入專案資料夾

a.建立安卓專案

ionic cordova platform add android 會生成安卓專案,可以用android studio開啟,編譯除錯。

b. 編譯、執行apk

ionic cordova build android 編譯apk

ionic cordova run android 編譯並執行apk

為了能build,還需要安裝

(1).jdk 最新版

(2).android sdk(可選擇國內映象下載速度更快,不用下載全部,下載倒數第二新的,還有你自己手機安卓對應的sdk版本(有利於除錯)即可)

需要設定必須的環境變數(百度搜)

(3). gradle,可以安裝android studio(建議安裝as,可能會需要做一些native開發,比如啟動畫面,使用者無感知的熱更新等),會自動安裝gradle.

安裝好後,就可以用android studio開啟platform目錄下的安卓專案,編譯運行了。

但是此時執行ionic cordova build android 報錯“不能連線到目標....econnreset 錯誤" 根據這個提示在網上搜索資訊,找不到任何線索。

在提示的詳細資訊裡有這樣一句 Gradle error “Could not reserve enough space for object heap”  

在bing裡搜尋到了一個帖子,應該是jdk預設記憶體不夠用。好像是預設需要2G的記憶體,調成512就好了。需要增加一個環境變數
_JAVA_OPTIONS=-Xmx512M

然後重開命令視窗,build時下載一堆檔案,最後成功。

6. 用vscode開發除錯

     vscode是個輕量級的ide,但是功能很強大,因為它可以通過豐富的外掛資源擴充自己的功能,用react native的可以找到相關外掛,cordova的可以找到相關的除錯外掛。我們需要安裝cordova tools外掛,就可以在安卓,ios真機除錯cordova程式了。

還可以搜尋一些關於ionic程式碼行提示的外掛

    另外vscode和visual studio不同的是

  a.它沒有專案檔案的概念,vs裡有proj檔案,這裡沒有。只需要開啟一個資料夾即可。開啟後,就成了一個工作區。在我們這裡我們只要開啟剛才命令列建立的cordova專案的資料夾即可。然後點檢視-》除錯選單即可選擇在裝置上除錯。

b.在vs裡開發cordova,非常簡單,只需要安裝ionic2(還沒有ionic3)的一個外掛,新建專案時就可以直接建立ionic專案。但是正是因為整合度過高,內建的cordova和ionic版本不高,不能建立ionic3的專案。而在vscode裡,不能建立專案,只能手動用命令列建立專案,但是這樣的好處就是靈活,開發者可以更明白工作原理。實際上vscode只是一個整合工具,在安裝了cordova外掛後,它會呼叫我們之前安裝好的cordova命令程式實現build,debug等操作。



mac下除錯問題

1.需要安裝 ios-deploy

sudo npm install -g ios-deploy --unsafe-perm=true

如果不加--unsafe-perm=true會報錯

cordova run ios報錯:xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

執行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

我的電腦是在users\xiangwei\downloads\xcode.app\contents\developer

3.ionic cordova build ios   platforms/ios/build/device/libCordova.a: Permission denied

刪除掉這個檔案就可以繼續了

4.cordova build ios 報錯

UnhandledPromiseRejectionWarning: Error code 65 for command: xcodebuild w......

=== BUILD TARGET yuChenApp OF PROJECT yuChenApp WITH CONFIGURATION Debug ===


Check dependencies
No profiles for 'io.yuchen.app' were found:  Xcode couldn't find a provisioning profile matching 'io.yuchen.app'.
Code signing is required for product type 'Application' in SDK 'iOS 10.0'


安裝 brew後執行報錯說brew危險,系統不支援了

執行此命令後 sudo chown -R $(whoami) /usr/local 即可使用


chrome可以遠端除錯ios裝置上的webview中執行的js

要先啟動除錯代理 ios_webkit_debug_proxy -f chrome-devtools://vtools/bundled/inspector.html

執行後報錯
not connect to lockdownd. Exiting.

解決辦法:執行 sudo chmod -R 777 /var/db/lockdown/

如果還不行

brew uninstall ideviceinstaller
brew uninstall libimobiledevice
brew install --HEAD libimobiledevice
brew link --overwrite libimobiledevice
brew install ideviceinstaller
brew link --overwrite ideviceinstaller

** ARCHIVE FAILED **

http://satvasolutions.com/microsoft-visual-studio-tools-for-apache-cordova-build-failed-error-code-65-for-command-when-using-xcode-8-and-ios-10/

學習時參考了 

LEAUQEAAN 的

https://blog.csdn.net/qq_17759721/article/details/78650481 

安裝介紹,他寫的更詳細一些,可以參考。




引入 cordova hot push plugin 之後,安卓編譯不通過,提示 jackson-databind2.4.4找不到,並給了一個連結,但那個連線能正常開啟,改成

start-chcp.gradle 裡 

dependencies {
    compile 'com.fasterxml.jackson.core:jackson-core:2.4.3'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.4.3'
    compile 'org.greenrobot:eventbus:3.0.0'
}

jackson-databind改成2.4.3之後編譯成功了

熱更新的文章

https://www.jianshu.com/p/55fd5e9f96ea

http://www.egtch.com/archives/605


引入 cordova hot push plugin 之後,安卓編譯不通過,提示 jackson-databind2.4.4找不到,並給了一個連結,但那個連線能正常開啟,改成

start-chcp.gradle 裡 

dependencies {
    compile 'com.fasterxml.jackson.core:jackson-core:2.4.4'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.4.0'
    compile 'org.greenrobot:eventbus:3.0.0'
}
jackson-databind改成2.4.0之後編譯成功了