移动混合开发APP技术

 IONIC 3.5框架  IONIC 是目前有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 Java MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。   在html5移动app开发中,速度是很重要的。Ionic在较新的移动设备中表现非常卓越，运行非常流畅。 操作少的 DOM，非 jQuery，和硬件加速过渡，让您感觉到用html5开发的app也可以飞起来。   Ionic可以说是AngularJS移动端解决方案，Ionic 利用 AngularJS创造出一款适合开发丰富而强大应用的框架。 Ionic不仅如此优秀，而且它的核心架构也是为开发专业应用创建，和AngularJS完美融合。   Ionic以流行的原生移动开发SDK为蓝本，使开发过原生iOS或安卓app的任何人都容易理解。开始只需书写你的代码，完成时通过PhoneGap发布。一次开发，处处运行。   简洁，简单，而且实用。 Ionic为所有当前移动设备而设计，并且呈现完美。伴随众多流行移动组件，结构，交互规范，以及华丽的（且可扩展）的主题，你可以更好的定制化APP应用。   ①下载安装Node JS 版本6.0以上 安装完成cmd输入node -v 显示对应版本即安装成功 ②安装ionic和Cordova Cmd 输入npm install -g ionic cordova 经过漫长的等待，会提示安装成功 ③创建ionic项目 Cmd窗口 cd项目创建的目录 输入ionic start project_name [template] template是内置的模板类型：blank/sidemenu/tabs/（default）三种 Ionic3常用命令npm install -g cnpm --registry=镜像源指向淘宝） cnpm install -g cordova ionic（安装cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看帮助） ionic -v（查看版本） ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单） ionic g page login(添加页面)ionic g provider BaseService(添加服务端口)ionic platform add androidionic platform add android（添加android平台） ionic platform remove android（移除android平台） ionic build android（编译项目apk） ionic emulate android（运行项目apk 手机连接在手机运行模拟器连接在模拟器运行） ionic run android （相当于build + emulate） ionic serve（开启服务调试） PS:  WebStorm 2017.02  Android：①JDK1.8 ②Android SDK (API25 具体看项目) Ios：①Xcode ②Developer Program  按照官网命令ionic start创建项目后生成如下结构树：  hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中 node_modules ：node各类依赖包 resources ：android/ios 资源（更换图标和启动动画） src：开发工作目录，页面、样式、脚本和图片都放在这个目录下 www：文静态件 platforms：生成android或者ios安装包路径（ platformsandroiduildoutputsapk：apk所在位置） plugins：插件文件夹，里面放置各种cordova安装的插件 config.xml: 配置文件 package.json: node安装模块时的依据 tsconfig.json: Type项目的根目录，指定用来编译这个项目的根文件和编译选项 tslint.json：格式化和校验type src工作目录：  app：应用根目录 assets：资源目录（静态文件（图片，js框架。。。）各种需要放置在此文件夹内，不然会出错，（尴尬。。。） pages：页面文件，放置编写的页面文件，包括：html，scss，ts。（搞事情的） theme：主题文件，里面有一个scss文件，设置主题信息。  Angular4 架构详解 官方架构图：  这个架构图展现了 Angular 应用中的 8 个主要构造块： · 模块 (module) · 组件 (component) · 模板 (template) · 元数据 (metadata) · 数据绑定 (data binding) · 指令 (directive) · 服务 (service) · 依赖注入 (dependency injection) 接下来我按顺序并结合图来讲解一下。  Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。 下面举个例子，简单介绍一下 @NgModule 中的内容  ?imports 本模块声明的组件模板需要的类所在的其它模块 ?providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。 ?declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。 ?exports declarations 的子集，可用于其它模块的组件模板。 ?bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。 PS：在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。  这次我们把这三点一起来讲，先看一下这段代码  Component组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。 · selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找