html5開發(fā)移動混合App系列1-開發(fā)環(huán)境搭建

最近公司準(zhǔn)備開發(fā)門店收銀系統(tǒng)，是基于IPAD的程序，決定采用基于 Ionic + Cordova + AngularJS技術(shù)混合開發(fā)模式。

在網(wǎng)站建設(shè)、成都網(wǎng)站制作中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營銷成為有效果、有回報的無錫營銷推廣。創(chuàng)新互聯(lián)公司專業(yè)成都網(wǎng)站建設(shè)十余年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

• 準(zhǔn)備

一臺mac（安裝了mac os的虛擬機也可以），nodejs，ionic，xcode 

• 安裝

1，安裝nodejs

到官網(wǎng)下載nodejs安裝包（pkg文件），需要0.10.＊及以下的版本，高版本會有很多插件不可用。我使用的版本是v0.10.38（下載地址：http://nodejs.org/dist/v0.10.38/  ） ，下載完成之后直接打開按提示安裝即可。

安裝成功后，在Launchpad中打開終端，輸入命令npm：

koala:~ dev$ npm

Usage: npm <command>

where <command> 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 <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/giti/.npmrc
or on the command line via: npm <command> --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 cordova

3，安裝ionic 

$ sudo npm install -g ionic

4，安裝ios-sim

$ sudo npm install -g ios-sim

• 測試app

ionic官網(wǎng)為開發(fā)者提供了多個開發(fā)模板，如默認(rèn)的Tab模板（頁面基于類似微信的Tab組織，使用了ionTab指令），Sidemenu模板等

創(chuàng)建基于Tab模板的應(yīng)用

$ ionic start myApp1

控制臺輸出

$ 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框架的代碼，然后通過cordova命令初始化cordova工程，接著添加了Device，console log，keyboard等的插件，最后一個插件ionic-plugins-keyboard使用ionic開發(fā)的，提供了軟鍵盤事件的js層通知，在android上很有用。

添加ios原生代碼，其實就是調(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

在模擬器上運行一下創(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)，會在iphone模擬器上啟動應(yīng)用，界面是扁平風(fēng)格的，很漂亮吧

當(dāng)前題目：html5開發(fā)移動混合App系列1-開發(fā)環(huán)境搭建
標(biāo)題鏈接：http://muchs.cn/article24/gpjsce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、微信小程序、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)