1.准备工作
下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
2.配置环境变量:
ANDROID_HOME D:\Program Files\adt\sdk (对应sdk路径)
path %ANDROID_HOME%\platform-tools;
path %ANDROID_HOME%\tools;
3.安装ionic等,运行命令提示符(管理员) 输入
a. 将cordova和ionic包安装到全局环境中(可供命令行使用):
npm install -g cordova ionic 安装cordova ionic
注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。
cnpm install -g ionic cordova
b. 进入你要创建项目的路径:
cd E:\Study\Android\ionic\Project
e:
c. 创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白):
ionic start myApp tabs
ionic start myAppsss tabs -v2
cd myApp
cnpm install
d. myApp就为项目名称,进入myApp这个文件夹:
cd myApp
e. 添加android平台:
ionic platform add android
f. 生成android apk:
ionic build android
g. 在android模拟器或真机中模拟:
ionic emulate android
其中f和g可以合并为:
ionic run android
即生成apk,并在模拟器或真机中模拟。
cordova plugin add 名称
cordova 插件安装
4.更新ionic等
a.更新cordova及ionic包
npm update -g cordova ionic
b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:
ionic lib update
5.展现ionic项目结果(显示在ios和android上的样式)
ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
ionic -v
7.手机实时部署
ionic run android --livereload -c -s
8.运行到浏览器 ionic serve
9.下载城市选择联动
npm install ionic2-city-picker --save
10.添加相机插件
ionic plugin add cordova-plugin-camera
11.添加文件上传插件
ionic plugin add cordova-plugin-file-transfer
12.拨打电话
ionic plugin add call-number
13.支付宝
ionic plugin add https://github.com/xueron/cordova-alipay-base --variable APP_ID=2017030105983751
#cordova plugin add https://github.com/xueron/cordova-alipay-base --variable APP_ID=2017030105983751
14.微信支付
cordova plugin add cordova-plugin-wechat --variable wechatappid=wx9acd17a02d4161e5
ionic plugin add cordova-plugin-wechat --variable wechatappid=wx9acd17a02d4161e5
15.QQ
cordova plugin add https://github.com/iVanPan/Cordova_QQ.git --variable QQ_APP_ID=1106006528
#cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=1106006528
16.md5
npm install ts-md5 --save
-----import {Md5} from "ts-md5/dist/md5";
-----Md5.hashStr("123456")
17.查看版本
ionic -v(查看版本)
18.升级ionic
npm update -g cordova ionic(更新cordova ionic)
下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
2.配置环境变量:
ANDROID_HOME D:\Program Files\adt\sdk (对应sdk路径)
path %ANDROID_HOME%\platform-tools;
path %ANDROID_HOME%\tools;
3.安装ionic等,运行命令提示符(管理员) 输入
a. 将cordova和ionic包安装到全局环境中(可供命令行使用):
npm install -g cordova ionic 安装cordova ionic
注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。
cnpm install -g ionic cordova
b. 进入你要创建项目的路径:
cd E:\Study\Android\ionic\Project
e:
c. 创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白):
ionic start myApp tabs
ionic start myAppsss tabs -v2
cd myApp
cnpm install
d. myApp就为项目名称,进入myApp这个文件夹:
cd myApp
e. 添加android平台:
ionic platform add android
f. 生成android apk:
ionic build android
g. 在android模拟器或真机中模拟:
ionic emulate android
其中f和g可以合并为:
ionic run android
即生成apk,并在模拟器或真机中模拟。
cordova plugin add 名称
cordova 插件安装
4.更新ionic等
a.更新cordova及ionic包
npm update -g cordova ionic
b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:
ionic lib update
5.展现ionic项目结果(显示在ios和android上的样式)
ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
ionic -v
7.手机实时部署
ionic run android --livereload -c -s
8.运行到浏览器 ionic serve
9.下载城市选择联动
npm install ionic2-city-picker --save
10.添加相机插件
ionic plugin add cordova-plugin-camera
11.添加文件上传插件
ionic plugin add cordova-plugin-file-transfer
12.拨打电话
ionic plugin add call-number
13.支付宝
ionic plugin add https://github.com/xueron/cordova-alipay-base --variable APP_ID=2017030105983751
#cordova plugin add https://github.com/xueron/cordova-alipay-base --variable APP_ID=2017030105983751
14.微信支付
cordova plugin add cordova-plugin-wechat --variable wechatappid=wx9acd17a02d4161e5
ionic plugin add cordova-plugin-wechat --variable wechatappid=wx9acd17a02d4161e5
15.QQ
cordova plugin add https://github.com/iVanPan/Cordova_QQ.git --variable QQ_APP_ID=1106006528
#cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=1106006528
16.md5
npm install ts-md5 --save
-----import {Md5} from "ts-md5/dist/md5";
-----Md5.hashStr("123456")
17.查看版本
ionic -v(查看版本)
18.升级ionic
npm update -g cordova ionic(更新cordova ionic)