Ionic的安装与环境配置

快速开始

1. 首先安装ionic

$ sudo npm install -g cordova ionic

2. 项目Clone到本地

$ git clone https://github.com/seasonstar/bibi-ionic.git

3. 添加 android 或 ios 平台

注： 真机调试，浏览器可以跳过此步骤； ios 开发只能在 mac 下进行。

$ cd    (ioniclub ) 这个是你从 * 2. 项目Clone到本地 * 下载好的那个文件夹

$ ionic platform add ios

$ ionic platform add android

4. 添加所有用到的插件

npm install

bower install

ionic plugin add com.ionic.keyboard

ionic plugin add cordova-plugin-console

ionic plugin add cordova-plugin-whitelist

ionic plugin add cordova-plugin-device

ionic plugin add cordova-plugin-statusbar

ionic plugin add cordova-plugin-splashscreen

ionic plugin add cordova-plugin-camera

ionic plugin add cordova-plugin-dialogs

ionic plugin add https://git.oschina.net/seasonstar/ImagePicker.git

ionic plugin add cordova-plugin-geolocat

ionionic plugin add cordova-plugin-file

ionic plugin add cordova-plugin-file-transfer

ionic plugin add cordova-plugin-x-toast

ionic plugin add cordova-plugin-x-socialsharing

ionic plugin add ionic-plugin-deploy

cordova plugin add https://github.com/RaananW/PhoneGap-Image-Resizer

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.2

cordova plugin add cordova-plugin-wkwebview

cordova plugin add com-sarriaroman-photoviewercordova plugin add https://github.com/dsolimando/ImageViewer

cordova plugin add http://git.oschina.net/seasonstar/PayPal-Cordova-Plugin

cordova plugin add cordova-plugin-wechat --variable wechatappid=########

cordova plugin add https://github.com/iVanPan/cordova_weibo.git --variable WEIBO_APP_ID=#######

cordova plugin add https://github.com/iVanPan/Cordova_QQ.git --variable QQ_APP_ID=#####

cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=######

cordova -d plugin add path/to/add/phonegap-facebook-plugin --variable APP_ID="####"--variable APP_NAME="####"#Note： 以上所有的--variable请改为自己申请的ID

https://www.airpair.com/ionic-framework/posts/production-ready-apps-with-ionic-framework

5. 运行

浏览器

$  ionic serve

ios

$  ionic build ios

$  ionic run ios

android

$  ionic build android

$  ionic run android

// 创建应用// cd 到要创建项目的目录，输入以下内容创建ionic项目// ionic3Demo 是项目名，tabs是模板（默认是tabs，其他还有blank的单页等）$ ionic start ionic3Demo tabs// 安装依赖// 会生成一个 node_modules 文件夹，并在里面安装 package.json 上写下的文件$ cd ionic3Demo/$ npm install// 在浏览器中运行项目$ ionic serve

（一）Ionic常用操作

Android创建安装运行 

ionic start myproject             // ionic start myproject tabs（blank、sidemenu）

cd myproject 

ionic platform add android  

ionic build android              

ionic emulate android (模拟器运行)

ionic run android (连接上手机运行)

Ios创建安装运行 （打包需要MAC）

ionic start myproject

cd myproject 

ionic platform add ios

ionic build ios 

ionic emulate ios 

（二）ionic serve 调试方法

Cd进入刚才创建的myApp文件夹，输入提示的命令即可自动打开网页，在网页上同步查看代码编写效果，保存之后页面自动刷新。PS：建议使用chrome浏览器，可以查看元素进入开发者模式，很多插件大大加快了代码编写效率。

1. ionic serve –address + 你的无线网ip地址；ps：address前面有两个“-”

在平时的代码编写中，经常需要用真机测试，但是每次通过打包安装的话效率太低，通过phoneGap也很慢而且麻烦。Ionic提供的这个方法只需要在手机上输入对应的ip地址即可在手机上看到效果，并且代码保存后手机会自动刷新。

方法：

A．查看当前的无线网ip地址，可以通过ipconfig/all查看，也可以在网络共享中心-----更改适配器设置------无限网络连接-------详细信息查看；

B.输入ionic serve –address + 你的无线网ip地址；

C．此时会自动打开网页，然后在手机浏览器地址上输入和电脑网页一样的地址即可。

http://www.ionic.wangIonic中文教程网，包含css与js文档以及ionic的图标。

http://www.ionicframework.com/ionic英文官方文档，js部分教中文文档更加详细。

http://docs.angularjs.cn/apiAngularJs英文api文档，详细介绍了Angularjs各模块语法的使用

http://www.haomou.net/2014/10/06/2014_ionic_learn/皓眸大前端，通过案例详细讲解了ionic的使用

https://npm.taobao.org/ 淘宝npm安装ionic镜像服务器

http://ngcordova.com/docs/plugins/ cordova插件，详细介绍插件的安装和使用