最近公司准备开发门店收银系统,是基于IPAD的程序,决定采用基于 Ionic + Cordova + AngularJS技术混合开发模式。
创新互联公司2013年成立,先为安平等服务建站,安平等地企业,进行企业商务咨询服务。为安平企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
一台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
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出现上述信息,表示nodejs安装成功。
2, 安装cordova
$ sudo npm install -g cordova3,安装ionic
$ sudo npm install -g ionic4,安装ios-sim
$ sudo npm install -g ios-simionic官网为开发者提供了多个开发模板,如默认的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模拟器上启动应用,界面是扁平风格的,很漂亮吧
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文名称:html5开发移动混合App系列1-开发环境搭建-创新互联
网站地址:http://bzwzjz.com/article/cdjsdi.html