日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

七步配置phonegap cordova ionic開發(fā)環(huán)境

 liang1234_ 2017-03-27

本文講的是android混合移動(dòng)開發(fā)環(huán)境搭建,IOS的環(huán)境配置以后再補(bǔ)吧。在開始之前,你需要配置好JDK,如果你自己寫后臺(tái),還需要配置tomcat等。這里用的開發(fā)工具是eclipse火星版,你也可以使用sublime或webstorm都可以,使用CLI把應(yīng)用裝在真機(jī)上調(diào)試,只是我更熟悉eclipse開發(fā)安卓應(yīng)用罷了。

安裝phonegap cordova ionic七步曲

1、JDK的配置不提了,太LOW了,自己弄吧,我這里用的是JDK7。
我花了一整天去配置好整個(gè)環(huán)境,寫此文的目的是不想讓大家也花這么多時(shí)間,主要是下載SDK太費(fèi)時(shí)間了,谷歌的服務(wù)器你懂的,墻后下載很慢,也很難找到好用的代理,尤其是模擬器的虛擬包,動(dòng)折好幾個(gè)G,只能呵呵了,后來還是放棄了模擬器,安卓真機(jī)啦么便宜,弄一個(gè)就行了,另外ionic的開發(fā)可以打開服務(wù)在chrome瀏覽器上調(diào)試,完全不用模擬器,雖然會(huì)遇到點(diǎn)問題,但是文中會(huì)給出解決辦法的。
2、ANT找個(gè)目錄放,配置下ANT_HOME變量,這個(gè)也上百度找吧。
3、下載SDM,幾乎所有的東東都可以到下面這個(gè)地址下載:

http://www.androiddevtools.cn/
  • 1

按照里面的方法配置好SDM的代理就可以更新SDK了,速度比墻外的快多了。我把SDK更新到23(android 6.0),目前在這個(gè)版本下開發(fā)。
這里寫圖片描述

把你需要的東西都下下來吧,還包括帶了ADT插件的eclipse(這個(gè)eclipse不是JEE版本的,對(duì)html,js不會(huì)感知變色,編輯起來不放便,但里面的plugins和features目錄下有對(duì)應(yīng)的插件,到eclipse官網(wǎng)上下個(gè)火星版,把插件拷進(jìn)去就可以了)。安裝ADT不要去弄什么官網(wǎng)的地址,神馬改hosts的,大多也不靈,別去折騰了,到上面地址里下離線的吧。
4、折騰完上面的操作后,你的安卓開發(fā)環(huán)境已經(jīng)弄好了,這是原生的開發(fā)環(huán)境,下面我們要搞混合開發(fā)的。
5、安裝nodejs 注意,最好是安裝stable版本的。我安裝的是nodejs stable 5.3,現(xiàn)在有更高的版本了。機(jī)器是64位的,所以裝的東西也都是64位的。
6、安裝phonegap和cordova,兩者有啥區(qū)別呢?這個(gè)問題上百度查一下吧,安裝前心里至少有個(gè)數(shù)吧。直接使用nodejs的npm下載安裝:
npm install -g phonegap
npm install -g cordova
檢驗(yàn)語句:
phonegap -version
cordova -version
如果上面安裝成功,就可以使用phonegap創(chuàng)建混合開發(fā)應(yīng)用了:
phonegap create my-app
cd my-app
phonegap run android
你可以試著開發(fā)一下,還是蠻爽的,可是,UI不好做呀,別急,我們安裝ionic,一套強(qiáng)大的移動(dòng)開發(fā)組件,基于angularjs做的,它有一套自己的UI組件,CSS是bootstrap的精簡版,MVVM。
7、先去ionic中國上了解下吧(這是對(duì)應(yīng)的中文翻譯站,也可以去英文官網(wǎng)上看,資訊更全些。)

http://www.ionic.wang/
  • 1

安裝

$ npm install -g cordova ionic
  • 1

創(chuàng)建項(xiàng)目

$ ionic start myApp tabs
  • 1

注意tabs是一個(gè)模板,創(chuàng)建的項(xiàng)目是tab頁的方式展現(xiàn)的。
添加平臺(tái)支持

$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios或真機(jī)運(yùn)行ionic run
  • 1
  • 2
  • 3
  • 4

改成android就是android的平臺(tái)了。

這里寫圖片描述

從這里開始你的混合開發(fā)征程吧,一開始你就會(huì)體現(xiàn)到它的強(qiáng)大。

在瀏覽器環(huán)境調(diào)試程序

我們不想每改一處代吧都在真機(jī)上跑一次,怎么辦呢,可以通過下面的命令啟動(dòng)項(xiàng)目,在瀏覽器里實(shí)時(shí)查看(導(dǎo)航到www目錄的外面):

ionic serve
  • 1

啟動(dòng)后他會(huì)自動(dòng)打開默認(rèn)瀏覽器查看網(wǎng)站,還會(huì)實(shí)時(shí)監(jiān)控www中文件的修改,因此你可以放心編碼了,最重要的是,你可以在谷歌瀏覽器里“審查元素”,查看實(shí)際生成的HTML和CSS,讓你深入地了解ionic組件。

安裝完ionic提示找不到命令的問題

安裝完ionic后在CMD里運(yùn)行ionic -version提示找不到命令,可以把這個(gè)目錄配置到path環(huán)境變量里:

C:\Users\your-user\AppData\Roaming\npm
  • 1

這里寫圖片描述

ionic程序里的ajax跨域問題-CORS

在真機(jī)上運(yùn)行時(shí),我們可以配置白名單,使ajax訪問成功,但通過ionic serve運(yùn)行時(shí),谷歌瀏覽器是不允許跨域訪問的,因此所有連網(wǎng)請(qǐng)求都失敗,怎么辦呢?
ionic提供了一種代理的方法,原理我理解就是把a(bǔ)jax請(qǐng)求交給ionic的CLI去處理,比如你啟動(dòng)的地址是:

http://localhost:8100
  • 1

也就是把你ajax請(qǐng)求的地址投射到localhost:8100這個(gè)地址上去,就是你項(xiàng)目的origin,而這個(gè)origin就是ionic 的CLI,而我們知道只有客戶端環(huán)境會(huì)有跨域問題,對(duì)JAVA,C 這種語言是不存在跨域的,OK,找到你www目錄的上一層,有個(gè)ionic.project文件,打開他:

1 { 2 'name': 'app', 3 'app_id': '', 4 'proxies': [{ 5 'path': '/api/forecast', 6 'proxyUrl': 'https://api./forecast/APIKEY/' 7 }] 8 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

好,在程序里這么訪問就OK了:

1 $http.get('/api/forecast/').success(function (forecast) { 2 $scope.forecast = forecast; 3 });
  • 1
  • 2
  • 3

是不是很神奇?

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多