windows环境下创建Ionic项目前提条件: node.js androidsdk jdk,并设置好JAVA_HOME ANDROID_HOME PATH
注:在安装androidsdk时 会由于网络原因无法install 可以使用国内镜像 在options中设置
安装ionic和cordova: npm install -g cordova ionic
注:不出意外的话 直接install会由于网络原因装不了 可以使用taobao代理
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后用 cnpm install -g cordova 这样就好
1. 先通过命令进入要创建项目的目录
cd xxx
2. 创建一个ionic工程
ionic start ProjectName [sidemenu|tabs|blank]
3. 添加一个platform
ionic platform add android|ios 添加最新版本的platform
ionic platform rm android|ios 删除platform
ionic platform add android@3.5 添加指定版本的platform
4. 为了老版本Android机的优化,集成crosswalk
添加最新crosswalk:ionic browser add crosswalk
查看可安装版本:ionic browser list
添加历史版本:ionic browser add crosswalk@xxx.xx.xx
删除已安装:ionic browser remove crosswalk
cordova-android4.0以后增强了安全性,这里还需要安装一个插件 cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git ,然后需要修改config.xml:
<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
注:在cordova5之后集成crosswalk时会提示无需安装crosswalk,转而安装了cordova-plugin-webview插件
5. 集成ngCordova
需要先安装bower npm install -g bower
bower install ngCordova
6. 常用插件 下面地址有的是旧的,根据提示使用新路径就行了
选择图片文件插件:
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
cordova plugin add https://github.com/B-Sides/ELCImagePickerController (just for iOS)
SQLite数据库:
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
基本设备咨询:
cordova plugin add org.apache.cordova.device
网络连接和电池事件:
//cordova plugin add org.apache.cordova.network-information
cordova plugin add cordova-plugin-network-information
cordova plugin add org.apache.cordova.battery-status
加速度计、指南针和地理定位:
cordova plugin add org.apache.cordova.device-motion
cordova plugin add org.apache.cordova.device-orientation
cordova plugin add org.apache.cordova.geolocation
相机、媒体重播和捕获:
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media
访问设备或网络上的文件:
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
通过对话方块或震动发出通知:
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.vibration
联系人:
cordova plugin add org.apache.cordova.contacts
全球化:
cordova plugin add org.apache.cordova.globalization
闪屏(启动动画):
cordova plugin add org.apache.cordova.splashscreen
打开新的浏览器:
cordova plugin add org.apache.cordova.inappbrowser
调试主控台:
cordova plugin add org.apache.cordova.console
iOS的keyboard:
cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git
7. 设置APP图标以及闪屏图片
1)在项目的根目录下创建resources文件夹。
2)在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)
3)在cmd中进入项目所在文件夹执行:
ionic resources
执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,如:android,其中会自动将图片进行缩放、裁剪,生成不同分辨率的图片,并在config.xml中添加相应内容。
也可分开执行:
ionic resources --icon
ionic resources --splash
8. ionic命令整理
ionic build android
ionic emulate android
ionic run android
ionic serve --lab
9. 在谷歌浏览器上调试
在浏览器地址栏输入:chrome://inspect/#devices