ionic的基本使用套路
第一章: ionic介绍及环境搭建
ionic = Cordova + angular + ionic CSS;
ionic是基于google的angular的框架,在angular基础上做一个封装,ionic调用原生的功能是基于Cordova(Cordova能调用javascript原生的功能Api),ionic内部有封装一套自己的CSSUI库组件。
一.开发工具介绍:
1.Webstorm
2.Visual Studio Code(微软)
二.环境搭建:
安装Nodejs;
npm install -g Cordova ionic //安装ionic;
注意:ionic有可能安装失败
检查自己的nodejs版本;
安装cnpm npm install -g registry=https://registry.npm.taobao.org,以后所有的npm指令都可以用cnpm代替;
第二章:通过指令新建一个ionic项目
1.新建一个项目 :
a.. ionic start myAppName tabs;
b.. cd到刚创建的项目文件夹中;
c.. ionic serve 运行项目;
第三章: ionic项目目录结构分析
ionic基本目录结构1.hooks:编译cordova自定义的脚本,方便整合到我们的编译系统和版本系统中;
2.node_modules: node的各种依赖包;
3.platforms:生成android和iOS安装包路径(platforms\android\build\outputs\apk:apk
所在位置),执行Cordova platform add android后会生成;
4.plugins:插件文件夹,放置各种Cordova插件;
5.resources:资源包(android和iOS一些启动图标和启动动画资源)
6.src:开发的工作目录,页面、样式、脚本和图片都放在这个目录下,平常开发只要关注这个文件夹目录;
7.www:静态文件;
8.config.xml:打包成app的配置文件
9.package.json: 配置项目的元数据和管理项目所需要的依赖;
10.tsconfig.json:typescript项目的根目录,用来指定这个项目的根文件和编译选项;
11.tslint.json:格式化和校验typescript;
src里面的基本结构1. app:应用的根目录
2. assets:资源目录(静态文件、图片、js框架…)等
3. pages:页面文件;
4.theme:主题文件,设置主题信息;
第四章 创建组件
1.cd 到项目目录
2.通过指令ionic g component组件名称 来创建组件
3.创建完成后在src目录下面会多出一个components的目录,这个目录里面放置以后创建的所有组件;
4.若要使用创建的组件,必须在app.modules.ts里面注册我们的模块,注册完成后可以在其他的pages(page里面也要注册组件)里面使用这些组件;
第五章 创建页面
1.cd到项目目录;
2.通过指令ionic g page页面名称 来新建页面;
3.跟创建组件一样,要在用到的地方导入我们新建的页面;
第六章 创建请求服务(http、jsonp请求)
一ionic get请求数据:
1.在app.module.ts文件中引入HttpModulu、JsonpModule,并且在下面的@NgModule方法中注入HttpModulu、JsonpModule;
2.在需要用到请求的页面引入Http;
3.在构造函数内声明http;
4.在对应的方法中使用方法请求;
5.jsonp方式请求的话,要在请求路径后面拼接上&callback=JSONP_CALLBACK
二.ionic post请求数据
1.引入Headers、Http模块,
import {Http,Jsonp,Headers} from "@angular/http";
2.实例化headers,
private headers = new Headers({'Content-Type': 'application/json'});
3.post提交数据,
this.http.post('http://localhost:8008/api/test',JSON.stringify({username: 'admin'}),{headers:this.headers})
// .toPromise()
.subscribe(function(res){
console.log(res.json());
});