全国咨询热线:
0755-33563420
全国售后热线:
0755-33563634

APP开发

你的位置：首页>>我的观点>>APP开发

混合跨平台应用开发主流框架开发

点击数：62019-04-01 16:35:08　来源: 深圳网站建设,微信APP开发,网店装修,艺之都网络公司官网

离子教程

混合跨平台应用开发主流框架开发

离子是一个强大的HTML5应用程序开发框架（HTML5混合移动应用框架）。可以帮助您使用Web技术，比如HTML，CSS和Javascript构建接近原生体验的移动应用程序。

离子主要关注外观和体验，以及和你的应用程序的UI交互，特别适合用于基于Hybird模式的HTML5移动应用程序开发。

离子是一个轻量的手机UI库，具有速度快，界面现代化，美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了iOS6的和Android4.1以下的版本支持，来获取更好的使用体验。

离子特点

1.ionic基于Angular语法，简单易学。
2.ionic是一个轻量级框架。
3.ionic完美的融合下一代移动框架，支持Angularjs的特性，MVC，代码易维护。
4.ionic提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
5.ionic专注原生，让你看不出混合应用和原生的区别
6.ionic提供了强大的命令行工具。
7.ionic性能优越，运行速度快。

学习本教程前你需要了解？

学习本教程前你需要了解以下基础知识：

HTML
CSS
使用Javascript
角

离子相关内容

离子官方网站：http：//ionicframework.com/

离子官方文档：http：//ionicframework.com/docs/

Github地址：https：//github.com/driftyco/ionic

离子安装

本站实例采用了离子v1.3.2版本，使用的CDN库地址：

<link href =“https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css”rel =“stylesheet”>  <script src =“https://cdn.bootcss.com/ionic/ 1.3.2 / JS / ionic.bundle.min.js“> </ SCRIPT>

离子最新版本下载地址：http：//ionicframework.com/docs/overview/#download。

下载后解压压缩包，包含以下目录：

css / =>样式文件 字体/ =>字体文件 js / => Javascript文件 version.json =>版本更新说明

你也可以在Github上下载以下资源文件：https：//github.com/driftyco/ionic(在发布目录中）。

接下来，我们只需要在项目中引入以上目录中的css / ionic.min.css和js / ionic.bundle.min.js文件即可创建离子应用。

实例

<ion-header-barclass =“bar-positive”> <h1class =“title”> Hello World！</ h1> </ ion-header-bar> <ion-content> <p>我的第一个离子应用</ p> </离子含量>

尝试一下»

点击“尝试一下”按钮查看在线实例。

本教程着重讲解离子框架的应用，大部分实例在浏览器中运行，移动设备上运行可以在接下来的命令行安装教程中详细了解。

注意：在移动应用如phonegap中我们只需将对应的js和css文件加入到资源库中即可。

命令行安装

首先您需要安装Node.js，我们在接下来的安装中需要使用到其NPM工具，更多NPM介绍可以查看我们的NPM使用介绍。

然后通过命令行工具安装最新版本的cordova和ionic。通过参考Android和iOS官方文档来安装。

Window和Linux上打开命令行工具执行以下命令：

$ npm install -g cordova ionic

Mac系统上使用以下命令：

sudo npm install -g cordova ionic

提示：IOS需要在Mac Os X.和Xcode环境下面安装使用。

如果你已经安装了以上环境，可以执行以下命令来更新版本：

npm update -g cordova ionic

或

sudo npm update -g cordova ionic

创建应用

使用离子官方提供的现成的应用程序模板，或一个空白的项目创建一个离子应用：

$ ionic启动myApp标签

运行我们刚才创建的离子项目

使用离子工具创建，测试，运行你的应用程序（或者通过Cordova直接创建）。

创建的Android应用

$ cd myApp  $ ionic platform添加android  $ ionic build android  $ ionic模拟android

如果一切正常会弹出模拟器，界面如下所示：

混合跨平台应用开发主流框架开发

创建的iOS应用

$ cd myApp  $ ionic platform add ios  $ ionic build ios  $ ionic emulate ios

如果出现“找不到ios-sim。”错误，可以执行以下命令：
npm install -g ios-sim

如果一切正常会弹出模拟器，界面如下所示：

混合跨平台应用开发主流框架开发

离子实验室

Ionic Lab是桌面版的开发环境，如果你不喜欢使用命令行操作，Ionic Lab将会满足你的需求。

Ionic Lab为开发者提供了一个更简单的方法来开始，编译，运行，和模拟运行Ionic的应用程序。

Ionic Lab支持的平台有：Window，Mac OS X，Linux，下载地址为：http：//lab.ionic.io/,下载后直接安装即可。整个操作界面如下所示：

混合跨平台应用开发主流框架开发

通过以上界面你可以完成以下操作：

创建应用
预览应用
编译应用
运行应用
上传应用
运行日志查看
......

推荐使用Sublime Text作为Ionic项目的编辑器，我们可以通过Ionic Lab直接在Sublime Text上打开项目，如下图：

Gif操作演示

混合跨平台应用开发主流框架开发

离子创建APP

前面的章节中我们已经学会了离子框架如何导入到项目中。

接下来我们将为大家介绍如何创建一个离子APP应用。

离子创建APP使用HTML，CSS和Javascript来构建，所以我们可以创建一个www目录，并在目录下创建index.html文件，代码如下：

<！DOCTYPE html>  <html>  <head>  <meta charset =“utf-8”>  <title> Todo </ title>  <meta name =“viewport”content =“initial-scale = 1，maximum-scale = 1 ，user-scalable = no，width = device-width“>  <link href =”lib / ionic / css / ionic.css“rel =”stylesheet“>  <script src =”lib / ionic / js / ionic.bundle。 js“> </ script>  <！ - 在使用Cordova / PhoneGap创建的APP中包含的文件，由Cordova / PhoneGap提供，（开发过程中显示404） - >  <script src =”cordova.js“> </ script>  </ head>  <body>  </ body>  </ html>

以上代码中，我们引入了Ionic CSS文件，Ionic JS文件及Ionic AngularJS扩展ionic.bundle.js（ionic.bundle.js）。

ionic.bundle.js文件已经包含了Ionic核心JS，AngularJS，Ionic的AngularJS扩展，如果你需要引入其他Angular模块，可以从lib / js / angular目录中调用。

cordova.js是在使用Cordova / PhoneGap创建应用时生成的，不需要手动引入，你可以在Cordova / PhoneGap项目中找到该文件，所以在开发过程中显示404是正常的。

创建APP

接下来我们来实现一个包含标题，侧边栏，列表等的应用，设计图如下：

混合跨平台应用开发主流框架开发

创建侧边栏

侧边栏创建使用ion-side-menus控制器。

编辑我们先前创建的index.html文件，修改<body>内的内容，如下所示：

<body>  <ion-side-menus>  <ion-side-menu-content>  </ ion-side-menu-content>  <ion-side-menu side =“left”>  </ ion-side-menu>  < / ion-side-menus>  </ body>