美高梅网址注册-澳门mgm4858集团登录网址
做最好的网站
来自 澳门mgm4858集团登录网址 2019-10-03 21:14 的文章
当前位置: 美高梅网址注册 > 澳门mgm4858集团登录网址 > 正文

手机应用开发框架,为了开发html5

目前混合式开发App很火的节奏,Hybrid App是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

在安装ionic 2之前先给大家介绍一款管理mac软件的神器---Homebrew。

基于ionic2的跨平台项目(iOS)

目前最火的框架莫过于Ionic了,Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

安装Homebrew

打开终端窗口, 粘贴以下脚本即可

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew search +应用 搜索应用
brew install +应用 安装应用
brew help 查看相关命令
更多Homebrew详情:http://brew.sh/

一、技术背景

Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。现在我们就来做一下准备工作,搭建本地环境。系统环境为Mac OS。

安装ionic 2

Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发,并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。

要创建 Ionic 2 项目,你需要安装最新版本的 CLI 和 Cordova。在此之前你需要安装最新版本的Node.js。然后继续安装Ionic CLI和Cordova来进行应用程序开发:

为了开发html5,除了最新使用React Native等之外,目前首选稳定的ionic+Angularjs来开发iOS和Android。

NO.1 安装Node以及npm

1.安装node.js

brew search node
brew install node

或者官网下载:https://nodejs.org/zh-cn/

Ionic是一款可以使用html5构建混合移动应用的用户界面框架,它自称是“本地与html5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。

直接去 node官网下载对应版本的安装包即可,网上教程有很多,不再多说。

2.安装ionic

npm install -g ionic

Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。

NO.2安装ionic。

3.安装cordova

npm install -g cordova
命令前面可能需要添加sudo提权来进行全局安装。

如果因为网络原因安装不上解决办法
修改npm源为淘宝npm源,可以使用下面三种方法中的任意一种

  • 通过config命令
    1.npm config set registry https://registry.npm.taobao.org
    2.npm info underscore (如果上面配置正确这个命令会有字符串response)
  • 命令行指定
    npm --registry https://registry.npm.taobao.org info underscore
  • 编辑 ~/.npmrc 加入下面内容
    registry = https://registry.npm.taobao.org

Cordova是一个行动设备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架,如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码,因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。

选择安装版本。安装ionic。ionic有1.0版本和2.0版本,2.0版本相对1.0版本更强大更完善所以我们选择2.0版本进行安装。

4.安装运行工具:

真机:npm install -g ios-deploy
模拟器:npm install -g ios-sim

二、环境搭建

$ sudo npm install -g ionic@beta

5.创建项目

ionic start myapp // 默认创建ionic 1,加上--v2才是ionic 2
ionic start myapp --v2 //默认tabs
ionic start myApp tabs --v2 //创建带有top栏和bottom栏的示例项目
ionic start myApp sidemenu --v2 //创建带有左侧带有menu栏的示例项目
ionic start myApp blank --v2 //创建空白项目

l安装npmnode.js

如果想要安装1.0版本直接安装就行

6.运行应用

进入到项目的目录下(cd myApp/)

浏览器中运行:ionic serve
模拟器中运行(默认):ionic run ios
真机中运行:ionic run ios --device

接下来就可以进行项目开发了。

打开终端,可分别输入以下内容查看npm和node的版本号:

$ sudo npm install -g ionic

npm –v

在Mac下使用npm安装时偶尔会报错,建议前面加sudo使用管理员权限,

node–v

安装成功后会出一系列的目录结构。

如果npm或者node并非最新版本或者没有安装,可以到nodejs官网下载最新版本,下载好后双击下载的pkg包默认安装即可。

NO.3 初始化一个项目

l安装ionic和cordova

$ ionic start ionicdemo --v2

采用淘宝npm镜像避免国内网络安装错误,终端输入:

这里的—v2便是基于2.0版本的。在这个过程里会安装一些node的依赖包以及Cordova的组件,如果之后还提醒你安装Cordova的话,可以通过命令行来安装

sudo

$ sudo npm install -g cordova

npm set registryhttps://registry.npm.taobao.org

这里我们使用的是默认模版,tabs,我们也可以使用其他模版来初始化:

下载后安装ionic和cordova包,打开终端输入:

$ ionic start ionicdemo blank --v2

sudonpm install -g cordova ionic

关于ionic的更多模版的信息会在最后的资料里给出。

安装成功后,查看安装的包内容是否全部都已安装,终端输入:

这里好有一个技巧如果想要使用Typescript(TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。)那么只需要在命令后面天假—ts参数即可。

ionic info

NO.4运行项目

根据信息提示,可对未成功安装的包再次安装。

初始化项目完成后我们可以通过命令来运行项目

三、项目生成

$ ionic serve

进入桌面(或其他文件夹路径),终端输入:

Mac环境下运行后可能会给你两个地址供你选择,这时候只需输入地址前的编号即可。

cd ./Desktop

作为初学者,ioni为之提供了一个可视化的工具,这个工具叫做Ionic LAB. 下载地址: 其基本界面是这样的

生成demo004文件项目,终端输入:

图片 1

ionic start myapp(项目名称)[blank][tabs][sidemenu]--v2

我们可以直接将已有的项目拖进来,也可以新建新的项目。 点击serve按钮,就会出现项目运行的界面,我们可以在上面选择所需要的环境。

ps:其中blank等参数是几种app样式,可根据需要选择不同参数,不写的话默认是tabs样式,--v2是指按照ionic2的版本来创建项目,如果不写--v2则会创建ionic1项目。

在项目开发过程中,在修改代码之后我们总是需要不断的去刷新界面,在这里我们可以设置界面的实时更新。点击右上角的设置按钮。如下图: image description 我们只需将第一个选中即可达到目的。

创建成功后,项目文件夹如图。

ionic网站为我们提供了个人账户,我们只需注册即可,注册完成后我们可以通过点击这个工具里的upload按钮把我们的项目上传到个人的账号里。

一般使用浏览器作为调试工具,cd到项目文件夹,终端输入:

图片 2

cd myapp

当然关于这个工具的其他用法也可以去其官网上进行更多的学习和了解。 下面分享几个相关的资料站点:

ionic serve

图片 3图片 4

执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了。

之后还会有相关组件的学习笔记,项目实战笔记。

Ionic支持两个平台iOS、Android,默认的Ionic项目并没有添加这两个平台,我们需要手动添加,终端输入:

Github博客地址:

ionic platform add android

ionic platform add ios

可以查看你已经添加的平台列表,终端输入:

ionic platform list

安装ios模拟器,终端输入:

本文由美高梅网址注册发布于澳门mgm4858集团登录网址,转载请注明出处:手机应用开发框架,为了开发html5

关键词: