混合开发环境搭建

原生开发和混合开发

原生开发的局限性:
1、不能跨平台
安卓版本的应用不能在苹果手机上运行,ios版本的应用不能在winphone上运行,等等。
2、更新周期长
一款应用更新升级是常有的操作,但如果更新升级的时间很长,必然会耽误你产品的计划,甚至是市场的占有率。
3、开发成本高
由于不能跨平台,和更新周期长,假如你想开发一款应用,在全平台推广,就必须在各个平台都开发一款应用,比如要上苹果应用市场,就得开发一个ios版本的应用,要上安卓市场,就得开发安卓版本的应用等等。
这里的时间、开发成本必然会很高。

h5开发

H5跨平台啊,只要开发一个应用,可以在任何平台上运行,而且更新也是无感知,可以瞬间同步的各种客户端。竟然H5有这么多优势,为什么不用H5开发呢?
H5虽然有这么多优势,但它也有自己的缺陷。
1、体验差
2、上不了各大平台
体验差,目前已经是个小问题了,现在很多js的框架,已经可以做到几乎和原生开发的体验一样了。足以以假乱真。最核心的问题是,不能上各大应用平台。
移动设备上的入口是应用,如果不能上应用平台,那根本就无法触达用户。

混合开发

混合开发,是介于H5和原生之间的一种开发模式,既有原生的部分,也有H5的部分,结合了各自有优点,这种开发模式,既可以做到跨平台,也能上各大应用市场。

混合开发的一套框架

cordova + ionic + angular

cordova

cordova 是Apache的开源框架,供了一系列移动平台的壳,例如 iOS、Android、ubuntu phone os、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian。主要用于嵌套H5,将H5打成应用市场认可的包,并且提供一套基于js的H5和各个移动平台通讯的API。比如获取手机文件、相机、手机信息、拨打电话等等基础功能。cordova 把这些和手机系统互相通讯的功能,封装成一个个插件,需要用到某一个功能,添加即可调用。如果cordova提供的插件不能满足你和手机的通讯, cordova也支持自定义插件。

ionic

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。
ionic 特点
1.ionic 基于Angular语法,简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生,让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越,运行速度快。

angular

angular一个套js库。

安装

node 应该都装了

1.npm 容易出问题,先装cnpm

NPM淘宝镜像官网(https://developer.aliyun.com/mirror/NPM?from=tnpm)

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装 cordova 和 ionic

1
2


安装过程中局部报红字error先不用管。安装完成后,输入 ionic -vcordova -v 查看是否成功,出现版本号即可。

3.安装 angular

1
cnpm install -g @angular/cli

安装完成后,输入 ng v 查看是否成功,成功的界面如下:

创建一个项目

1.输入命令

1
ionic start myApp tabs

myApp 为项目名 tabs是ionic提供的默认风格中的一种,看一下官网展示:

2.创建时

如上图,会让选择一种开发框架,目前版本还没有Vue, 前面装了angular,就选择angular就行。

创建过程中,在如下这一步会很慢,因为回去下载项目里的依赖:

直接 ctrl + c 结束掉,因为到了这一步项目的整体内容已经创建完了,我们可以单独下载里面的依赖

(上图中很容易卡主,就是因为在下载如下图中 package.json 中的依赖,而且用npm 装的,慢死)

ctrl+c 结束后,我们切进项目里,输入

1
cnpm install

就会自动下载 package.json 里的依赖,速度就很快了。

3.等一会就会创建完毕

运行项目

1.用vscode来开发

先装两个插件

2.装完上述插件后,用vscode 打开刚才创建的项目 ionicdemo01

然后在终端中输入命令 ,启动项目

1
ionic serve

项目在启动构建过程中,可能会提示如下图的局部红线错误,先忽略即可

构建成功后,会看到如下图这样

应该也会打开你的默认浏览器,展示这个项目,浏览器界面,按一下F12 ,打开开发者界面,选择展示模式为 moble 手机模式(即下图中的 蓝色按钮

项目运行如下:

3.下面来解决一下刚才第二部项目构建时的局部红线报错

先在vscode的终端页面,ctrl +c 将当前项目停掉,然后进入当前项目目录下,输入

1
cnpm install

如下图

再重新 ionic serve 即可,发现这次没有红线错误了。

0%