用于混合App开发的Ionic3

文章发布于

学习Ionic3需要理解Angular和Typescript。建议阅读这两篇文章进行介绍

角度基础

打字基础

1、 简介

Ionic是一个基于Angular和Cordova的强大HTML5移动App开发框架，可以快速创建跨平台移动App。它可以快速开发移动App、移动网页、微信公共平台App和混合App网页。

1.1离子特性

Ionic基于Angular语法，易于学习。

离子是一个轻量级的框架。

Ionic完美集成了下一代移动框架，支持Angularjs、MVC的特性，代码易于维护。

Ionic提供了一个美丽的设计。它通过SASS构建App。它提供了许多UI组件来帮助开发人员开发功能强大的App。

Ionic侧重于本机，因此您看不到混合App和本机App之间的区别

ionic提供了强大的命令行工具。

Ionic具有优异的性能和快速的运行速度。

1.2 Ionic、Cordova（音位间隙）和Angular之间的关系

离子=Cordova+角度+离子CSS

Ionic完全基于谷歌的Angular框架，并在Angulal基础上进行了一些封装，这样我们可以更快更轻松地开发移动项目。Ionic基于Cordova调用本机函数。Cordova提供了使用JavaScript调用本机函数的功能。Ionic还封装了一个漂亮的CSS UI库。

2、 环境建设

2.1离子初始化构建

#全球安装

npm安装-g离子

离子信息（查看所有当前离子版本信息）

图像.png

Ionic start myApp选项卡#建议使用初始化

cd我的App

离子服务

图像.png

离子服务运行项目

2.2 Genymotion Android模拟器

使用方法

2.3 IOS环境经验

你需要装备mac并安装xcode

#你需要在mac下添加sudo

sudo离子cordova平台添加ios

#注意获取目录权限的问题

Chmod-R 777项目文件夹名称

真正的机器调试和发布需要Apple开发者帐户

打开xcode，选择平台下的ios文件夹，然后单击Run Project

图像.png

2.4 Android下的体验

1.添加Android

离子cordova平台添加android

#注意获取目录权限的问题

Chmod-R 777项目文件夹名称

#直接使用Android studio调试链接

#打包为apk并将其拖到Genymotion中进行调试

2.下载Android Studio以打开/platform/Android文件

图像.png

3.然后连接android studio和geny生成apk调试

图像.png

2.5浏览器/微信体验

1.添加浏览器文件夹

离子cordova平台添加浏览器

2.包装

离子cordova构建浏览器

图像.png

图像.png

3.操作

npm运行服务

#浏览器打开https://localhost:8100

4.部署

将www目录部署到服务器

体验并关注微信下的微信标题问题

2.6离子的常见命令

1.基本命令

Ionic g页面myPage

离子g提供商MyData创建提供商

在浏览器中查看离子服务

Ionic平台添加/删除android/ios

Ionic构建android/ios快速打包（ios最好通过xcode打包和发布）

2.辅助命令

离子信息查看有关离子的系统消息

在离子模拟android/ios模拟器中打开

Ionic cordova插件列表查看插件安装列表

3.正式发布所需订单

Ionic cordova平台添加android

Ionic cordova构建android——版本打包为apk

3、 Ionic3.x+目录结构分析和创建组件

3.1 Ionic3.x目录结构分析

1.总体目录结构

图像.png

钩子：在编译cordova时定制脚本命令，这些命令很容易集成到我们的编译系统和版本控制系统中

node-modules：节点的各种依赖包

资源：android/ios资源（替换图标并开始动画）

Src：开发工作目录，其中放置页面、样式、脚本和图片

Www:静态文件

平台：生成Android或IOS安装包的路径（平台Android构建输出apk:apk

位置）将在执行cordova平台添加android后生成

插件：插件文件夹，其中放置了cordova安装的各种插件

配置。Xml:已打包到App中的配置文件

包裹Json：配置项目的元数据并管理项目所需的依赖关系

tsconfig。Json：TypeScript项目的根目录，指定用于编译项目的根文件和编译选项

tslint。Json:格式化并验证typescript

2.src目录

图像.png

App：App根目录

资产：资源目录（静态文件（图片，js框架）

页面：页面文件，用于放置准备好的页面文件，包括：html、scss、ts

主题：