最近公司準(zhǔn)備開(kāi)發(fā)門(mén)店收銀系統(tǒng),是基于IPAD的程序,決定采用基于 Ionic + Cordova + AngularJS技術(shù)混合開(kāi)發(fā)模式。
創(chuàng)新互聯(lián)公司2013年成立,先為安平等服務(wù)建站,安平等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為安平企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
一臺(tái)mac(安裝了mac os的虛擬機(jī)也可以),nodejs,ionic,xcode
1,安裝nodejs
到官網(wǎng)下載nodejs安裝包(pkg文件),需要0.10.*及以下的版本,高版本會(huì)有很多插件不可用。我使用的版本是v0.10.38(下載地址:http://nodejs.org/dist/v0.10.38/ ) ,下載完成之后直接打開(kāi)按提示安裝即可。
安裝成功后,在Launchpad中打開(kāi)終端,輸入命令npm:
koala:~ dev$ npm
Usage: npm
where is one of:
add-user, adduser, apihelp, author, bin, bugs, c, cache,
completion, config, ddp, dedupe, deprecate, docs, edit,
explore, faq, find, find-dupes, get, help, help-search,
home, i, info, init, install, isntall, issues, la, link,
list, ll, ln, login, ls, outdated, owner, pack, prefix,
prune, publish, r, rb, rebuild, remove, repo, restart, rm,
root, run-script, s, se, search, set, show, shrinkwrap,
star, stars, start, stop, submodule, t, tag, test, tst, un,
uninstall, unlink, unpublish, unstar, up, update, v,
version, view, whoami
npm -h quick help on
npm -l display full usage info
npm faq commonly asked questions
npm help search for help on
npm help npm involved overview
Specify configs in the ini-formatted file:
/Users/giti/.npmrc
or on the command line via: npm --key value
Config info can be viewed via: npm help config
npm@1.4.28 /usr/local/lib/node_modules/npm出現(xiàn)上述信息,表示nodejs安裝成功。
2, 安裝cordova
$ sudo npm install -g cordova3,安裝ionic
$ sudo npm install -g ionic4,安裝ios-sim
$ sudo npm install -g ios-simionic官網(wǎng)為開(kāi)發(fā)者提供了多個(gè)開(kāi)發(fā)模板,如默認(rèn)的Tab模板(頁(yè)面基于類(lèi)似微信的Tab組織,使用了ionTab指令),Sidemenu模板等
創(chuàng)建基于Tab模板的應(yīng)用
$ ionic start myApp1控制臺(tái)輸出$ ionic start myApp1
Running start task...
Creating Ionic app in folder /Users/zhangxitao/myApp1 based on tabs project
DOWNLOADING: https://github.com/driftyco/ionic-app-base/archive/master.zip
DOWNLOADING: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
Initializing cordova project.
Fetching plugin "org.apache.cordova.device" via plugin registry
Fetching plugin "org.apache.cordova.console" via plugin registry
Fetching plugin "https://github.com/driftyco/ionic-plugins-keyboard" via git clone 可以看到創(chuàng)建模板應(yīng)用就是從git上下載ionic框架的代碼,然后通過(guò)cordova命令初始化cordova工程,接著添加了Device,console log,keyboard等的插件,最后一個(gè)插件ionic-plugins-keyboard使用ionic開(kāi)發(fā)的,提供了軟鍵盤(pán)事件的js層通知,在android上很有用。
添加ios原生代碼,其實(shí)就是調(diào)用了cordova platform add ios,當(dāng)然這邊要在mac上做了,并且需要安裝了xcode
$ ionic platform add ios
Running platform task...
Adding platform ios
Creating ios project...
Installing "com.ionic.keyboard" for ios
Installing "org.apache.cordova.console" for ios
Installing "org.apache.cordova.device" for ios在模擬器上運(yùn)行一下創(chuàng)建的應(yīng)用吧
$ ionic run ios
Running run task...
Running app on platform ios
Running command: /Users/zhangxitao/myApp1/platforms/ios/cordova/run
No device is connected, trying Simulator.
Build settings from command line:
ARCHS = i386
CONFIGURATION_BUILD_DIR = /Users/zhangxitao/myApp1/platforms/ios/build/emulator
SDKROOT = iphonesimulator7.1
VALID_ARCHS = i386
=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===如果最后是成功狀態(tài),會(huì)在iphone模擬器上啟動(dòng)應(yīng)用,界面是扁平風(fēng)格的,很漂亮吧
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)名稱(chēng):html5開(kāi)發(fā)移動(dòng)混合App系列1-開(kāi)發(fā)環(huán)境搭建-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://weahome.cn/article/cdjsdi.html