混合跨平台应用开发主流框架开发 - APP开发 - 深圳网站建设,微信APP开发,网店装修,艺之都网络公司官网

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>

优势

SUPERIORITY

为一流企业提供金牌网络服务

我们为客户提供一站式服务,没有最好的方案,只有最适合每个企业的设计方案……

理念

IDEA

持续追求更高品质

艺之都团队的十年,是一个典型的技术团队成长的十年。一群年轻人,追着梦想,从无到有,从痴迷小组到精英团队艺之都从成立的那一天开始永放光芒……

售前咨询
0755-33563420
免费网络问题咨询
免费网络解决方案策划
免费网站问题诊断
免费网店问题诊断
免费网站网店推广咨询
服务与支持
网站建设
微信开发
APP开发
网店装修
网站推广
网店运营
大数据服务
营销培训
服务器租赁
账号与支持
合同申请
转账付款
线下汇款
索取发票
快速入口
网站管理
备案管理
账号管理
域名信息查询
域名控制台
服务器控制台
其他服务
客户案例
新品活动
海外服务
技术论坛
注册公司
财务代理
VI设计
资源推荐
提交建议
关注艺之都网络
企业决策者必读
艺之都网络APP
艺之都微信
艺之都微博
艺之都服务中心

核心产品:  营销型网站系统  微信分销商城系统  网店运营系统  大数据精准营销系统  域名注册备案  游戏开发运营

增值服务:  工商注册  财务代理  VI设计  LOGO设计  营销策划  网站备案  短信服务  企业邮箱  WHOIS查询  网站模板  服务器维护

更多推荐:  企业线上方案  品牌线上方案  线上商城方案  社交直播方案  医疗网络方案  旅游线上方案  精准营销方案

关于艺之都    法律声明    廉政举报    荣誉查询    友情链接

艺之都网络  深圳网站建设  东莞网站建设  广州网站建设  上海网站建设  北京网站建设  南阳网站建设  【添加分公司链接】

2007-2019 yizhidou.com 版权所有粤ICP备:14099120号-3

深圳市艺之都网络科技有限公司  深圳市龙岗区坂田商业广场禾田步行街二层