我爱编程

ionic的基本使用套路

2018-01-30  本文已影响63人  coderxlp

                                       

第一章: 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());

}); 

上一篇下一篇

猜你喜欢

热点阅读