创建Ionic项目及基本配置
来源:互联网 发布:json格式的数据 编辑:程序博客网 时间:2024/05/22 00:22
制作手机app基本配置
要创建Ionic项目,您需要安装最新版本的CLI和Cordova。
npm install -g ionic cordova完成之后,创建第一个Ionic应用程序:
ionic start MyIonicProject tabs|sidemenu|blank|super|tutorial
start 会告诉CLI创建一个新的应用程序。
MyIonicProject 将是您的项目中的目录名称和应用程序名称。
tabs :一个简单的3选项卡布局
sidemenu:侧面有一个可滑动菜单的布局
blank:一个简单的初始页面
super:超过14个准备使用页面设计的入门项目
tutorial:引导式启动项目
在浏览器中查看应用程序:
cd MyIonicProject/ ----cd进入创建的文件夹
ionic serve ----在浏览器中测试应用程序
项目结构:
node_modules ----node各类依赖包
resources ----android/ios 资源(更换图标和启动动画)
src ----开发工作目录,页面、样式、脚本和图片都放在这个目录下
app ----应用根目录
assets ----资源目录(静态文件(图片,js框架。。。)
pages ----页面文件,放置编写的页面文件,包括:html,scss,ts
theme ----主题文件,里面有一个scss文件,设置主题信息。
index.html ----入口文件
manifest.json
service-worker.js
www ----静态文件
config.xml ----配置文件
ionic.config.json
ionic.starter.json
package.json ----node安装模块时的依据
package-lock.json
tsconfig.json ----TypeScript项目的根目录,指定用来编译这个项目的根文件和编译选项
tslint.json ----格式化和校验typescript
添加iOS项目:
ionic cordova platform add ios
把src里的内容同步到ios项目中(src后面会讲到)
ionic cordova build ios
运行iOS项目,相当于在Xcode里面按Command+R
ionic cordova emulate ios
添加android项目
ionic cordova platform add android
ionic cordova build android
ionic cordova emulate android
修改 Tabs,让目录结构清晰----
1. 修改src/pages/tabs/tabs.html
<ion-tabs>
<ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab>
</ion-tabs>
2. 打开 Tabs.ts,修改为如下代码:
-------内容-----
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tabRoots: Object[];
constructor() {
this.tabRoots = [
{
root: HomePage,
tabTitle: 'Home',
tabIcon: 'home'
},
{
root: ContactPage,
tabTitle: 'Contact',
tabIcon: 'notifications'
},
{
root: AboutPage,
tabTitle: 'About',
tabIcon: 'document'
}
];
}
}
------------
阅读全文