2年前 (2015-06-08)  HTML5 |   3 条评论  714 
文章评分 1 次,平均分 5.0

最近公司准备开发门店收银系统,是基于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模拟器上启动应用,界面是扁平风格的,很漂亮吧




//下面这个css和插件后台设置的主题有关系,如果需要换样式,则需要修改以下CSS名称

  
 

除特别注明外,本站所有文章均为铁匠运维网原创,转载请注明出处来自http://www.tiejiang.org/2854.html

关于

发表评论

  1. 网站不错!

    快乐yaya 2年前 (2016-01-11) [0] [0]
  2. 楼主:如何跟孩子吹嘘自己以前辉煌的游戏史?
    回复:孩儿你就是买点卡送的!

    快乐yaya 2年前 (2016-01-11) [0] [0]
  3. 就在今天,区别很大!

    三只羊软件 2年前 (2015-06-27) [0] [0]
切换注册

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享