最近公司准备开发门店收银系统,是基于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:

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 ionic

4,安装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模拟器上启动应用,界面是扁平风格的,很漂亮吧

html5开发移动混合App系列1-开发环境搭建的更多相关文章

  1. html5开发移动混合App系列2-开发环境搭建(windows)

    Java下载: http://www.oracle.com/technetwork/java/javase/downloads/index.html 环境变量: JAVA_HOME=C:\Progra ...

  2. App自动化测试-1.App自动化介绍和环境搭建

    App自动化测试-1.App自动化介绍和环境搭建 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-b ...

  3. 【转】RHadoop实践系列之一:Hadoop环境搭建

    RHadoop实践系列之一:Hadoop环境搭建 RHadoop实践系列文章,包含了R语言与Hadoop结合进行海量数据分析.Hadoop主要用来存储海量数据,R语言完成MapReduce 算法,用来 ...

  4. MyBatis学习系列一之环境搭建

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 学习一个新的知识,首先做一个简单的例子使用一下,然后再逐步深入.MyBat ...

  5. 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享

    什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...

  6. Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目

    之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...

  7. 【Cocos2d-X开发笔记】第一期 Cocos2d-X的环境搭建

          作者今天开始正式开始学习Cocos2d-X引擎进行游戏编程,预计两天会更新一期,最后实现ios游戏的appsore上线. (部分内容转载自:http://blog.csdn.net/yan ...

  8. 跟我一起,利用bitcms内容管理系统从0到1学习小程序开发:一、IIS下SSL环境搭建

    缘起 1.从事互联网十来年了,一直想把自己的从事开发过程遇到的问题给写出来,分享给大家.可是可是这只是个种想法,想想之后就放下了,写出来的类文章是少之又少.古人说无志之人常立志,有志之人立长志.今天, ...

  9. [游戏开发日志]Windows下Cocos2d-x 3.14环境搭建

    总介绍 我们小组使用的是cocos2d-x的游戏开发引擎,因此在所有开发工作之前,我们需要对这个引擎进行环境的搭建. 搭建过程 VS2013的下载和安装 VS只是作为一个开发环境而已,简单来说就是敲代 ...

随机推荐

  1. bzoj2323: [ZJOI2011]细胞

    这题真神... 首先看到这么花里胡哨的题面眉头一皱就发现这个球的大小是搞笑的不然就没法做了,有用的是最终拆出来的长度 然后对于一段长度为n有n-1个丝状物的东西,写一个DP:f[i][2]表示枚举到第 ...

  2. YTU 2837: 编程题B-狐狸算卦

    2837: 编程题B-狐狸算卦 时间限制: 1 Sec  内存限制: 128 MB 提交: 76  解决: 52 题目描述 注:本题只需要提交需要完善部分的代码,请按照C++方式提交. 小熊和狐狸是邻 ...

  3. ThreadLocal工具类 隔离思想

    ThreadLocal不是用来解决共享对象的多线程访问问题的, 通过ThreadLocal的set()方法设置到线程的ThreadLocal.ThreadLocalMap里的是是线程自己要存储的对象, ...

  4. AutoIT: ControlCommand是一个非常重要的指令

    ControlCommand可以确定窗口中的复选框是否选中状态,然后可以对这些复选框进行操作.可以对ComboBox和ListBox进行操作如选择下拉框的某个选项 if WinExists(" ...

  5. HDU 5945 Fxx and game (DP+单调队列)

    题意:给定一个 x, k, t,你有两种操作,一种是 x - i (0 <= i <= t),另一种是 x / k  (x % k == 0).问你把x变成1需要的最少操作. 析:这肯定是 ...

  6. Linux 常用命令九 tar

    一.tar命令 tar命令用于打包,解包. gzip命令用于压缩,解压缩. bzip2命令用于压缩,解压缩. 这三个是在linux中常用的,还有一些不常用的. tar打包: wang@wang:~/w ...

  7. poj 2396 Budget【有上下界的网络流】

    第一步:建立无源汇有上下界的网络模型 每行 i 作为一个点并连边(s, i, Ri, Ri),每列 j 作为一个点并连边(j, t, Cj, Cj),设 Uij, Lij 分别表示第 i 行第 j 列 ...

  8. [App Store Connect帮助]七、在 App Store 上发行(3.4)提交至“App 审核”:将构建版本从审核中移除

    若要停止“App 审核”流程,您可以将该 App 版本从 App 审核中移除.要执行此项操作,App 状态必须为下列之一: 正在等待出口合规检查 正在等待审核 正在审核 等待开发者发布 等待 Appl ...

  9. 身份认证系统(四)OAuth2运行流程

    上一节介绍过什么是OAuth2,这节准备用生动的事例来告诉大家OAuth2运行的流程. 我们来想这样一个场景:假设我们有一个叫做万方网盘的服务是用来帮助用户存储论文文档的,我们向外提供了符合OAuth ...

  10. Luogu P2158 [SDOI2008]仪仗队【数学/欧拉函数】by cellur925

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...