html5开发移动混合App系列1-开发环境搭建
2015-05-26 11:44
471 查看
最近公司准备开发门店收银系统,是基于IPAD的程序,决定采用基于 Ionic + Cordova + AngularJS技术混合开发模式。
准备
一台mac(安装了mac os的虚拟机也可以),nodejs,ionic,xcode
安装
1,安装nodejs
到官网下载nodejs安装包(pkg文件),需要0.10.*及以下的版本,高版本会有很多插件不可用。我使用的版本是v0.10.38(下载地址:http://nodejs.org/dist/v0.10.38/ ) ,下载完成之后直接打开按提示安装即可。
安装成功后,在Launchpad中打开终端,输入命令npm:
出现上述信息,表示nodejs安装成功。
2, 安装cordova
3,安装ionic
测试app
ionic官网为开发者提供了多个开发模板,如默认的Tab模板(页面基于类似微信的Tab组织,使用了ionTab指令),Sidemenu模板等
如果最后是成功状态,会在iphone模拟器上启动应用,界面是扁平风格的,很漂亮吧
本文出自 “Zero's Blog” 博客,请务必保留此出处http://zerosoft.blog.51cto.com/679447/1655199
准备
一台mac(安装了mac os的虚拟机也可以),nodejs,ionic,xcode
安装
1,安装nodejs
到官网下载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
出现上述信息,表示nodejs安装成功。
2, 安装cordova
$ sudo npm install -g cordova
3,安装ionic
$ sudo npm install -g ionic4,安装ios-sim
$ sudo npm install -g ios-sim
测试app
ionic官网为开发者提供了多个开发模板,如默认的Tab模板(页面基于类似微信的Tab组织,使用了ionTab指令),Sidemenu模板等
创建基于Tab模板的应用
$ 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可以看到创建模板应用就是从git上下载ionic框架的代码,然后通过cordova命令初始化cordova工程,接着添加了Device,console log,keyboard等的插件,最后一个插件ionic-plugins-keyboard使用ionic开发的,提供了软键盘事件的js层通知,在android上很有用。
添加ios原生代码,其实就是调用了cordova platform add ios,当然这边要在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
在模拟器上运行一下创建的应用吧
$ 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 ===
如果最后是成功状态,会在iphone模拟器上启动应用,界面是扁平风格的,很漂亮吧
本文出自 “Zero's Blog” 博客,请务必保留此出处http://zerosoft.blog.51cto.com/679447/1655199
相关文章推荐
- html5开发移动混合App系列2-开发环境搭建(windows)
- html5开发移动混合App系列1-开发环境搭建
- html5开发移动混合App系列2-开发环境搭建(windows)
- phoneGap+cordova+ionic混合app开发环境搭建
- Html5移动应用开发入门——环境搭建(IONIC)
- HTML5+开发移动app教程1-环境搭建
- HTML5 APP开发环境的框架搭建
- C#开发移动应用系列(1.环境搭建)
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境
- 一点点学习开发手机混合模式APP-环境搭建篇
- 基于Ionic2 的移动app开发<1>( 环境搭建)
- 混合APP开发之android离线打包环境搭建
- adt配置支持html5的移动web app开发环境
- 跨平台移动开发phonegap/cordova 3.3全系列教程-开发环境搭建
- 混合开发(Hybrid App)之 Ionic【一】-- 认识Ionic,搭建开发环境,创建项目
- HTML5+开发移动app教程1-环境搭建
- HTML5 APP开发环境的框架搭建
- Ionic开发App系列(1)--环境搭建
- HTML5 移动应用开发环境搭建及原理分析