直接上干货:
一,配置开发环境:
1.1 首先您需要安装Node.js,确认电脑已安装了node.js,否则请下载安装node.js;
1.2 然后通过命令行工具安装最新版本的 cordova 和 ionic:(install ionic)
安装cordova:sudo npm install -g cordova
安装ionic:sudo npm install -g ionic
更新:npm update -g cordova
卸载:npm uninstall cordova -g
1.3 安装iOS真机调试
sudo npm install -g ios-deploy [sudo npm install -g ios-deploy --unsafe-perm=true]
完成以上步骤后,就可以开始我们的项目了:
二,创建项目
2.1 执行接下来的命名,创建一个新项目
ionic start myFirstApp sidemenu
其中“myFirstApp”是我们的项目的名称,"sidemenu"是项目模板,其中可用的模板还有:
blank ................ A blank starter project for Ionic
complex-list ......... A complex list starter template
maps ................. An Ionic starter project using Google Maps and a side menu
salesforce ........... A starter project for Ionic and Salesforce
sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
tabs ................. A starting project for Ionic using a simple tabbed interface
tests ................ A test of different kinds of page navigation
2.2 cd到项目的根目录下,
2.2.1 安装各个插件(视项目定)
......
相关命令:
ionic state reset —plugins 复位插件名 //重载插件
ionic plugin list //列出所有已安装插件
ionic plugin remove 插件名 //卸载插件
ionic plugin add 插件地址 //安装插件
2.2.2 执行接下来的命令来添加平台:
ionic platform add ios
<移除平台:ionic platform remove ios>
这样执行完毕后就已经将iOS平台添加到项目中了,即可完成iOS原生代码的添加;
ionic是跨平台的开发框架,当然也可以执行如下命令添加Android平台,只是配置环境时的命令不需要sudo;
ionic platform add android
2.3 将刚刚创建的项目安装到iPhone中
ionic build ios
然后再输入:
ionic run --emulate ios
就会自动打开iPhone模拟器并进行安装。
或者在项目的根目录下运行模拟器任务
ionic run ios --target iPhone-6 //此过程包括了build and run
指定设备:iPhone-4s,iPhone-5,iPhone-5s,iPhone-6-Plus,iPhone-6,iPad-2,iPad-Retina,iPad-Air,Resizable-iPhone,Resizable-iPad,的时候,会被安装到指定的机型上。
2.4 若是android项目安装到Android设备或模拟器上,同样类似的方法:
ionic build android
然后输入:
ionic run --device android
或者输入:
ionic run --emulate android
这样会安装到android自带模拟器上。
2.5 若要在网页中预览刚才的项目,执行
ionic serve
ionic serve --address 192.168.0.109//指明一个外部的ip地址,可以让外部用户查看。
以成功开启本地预览
然后,打开浏览器在浏览器地址里输入上面的地址:
http://localhost:8100
即可预览项目。
在终端中输入q会停止服务。
三、开发项目及之后的项目调试,陆续写入本博客。。。