手记

hybird -(01:hybird简介,系列对比,创建cordova工程)

---  廖马儿

1.hybird介绍

新浪微博有 webapp版本
《百度app》 就是hybird app
native app就不用说了

Store里的新闻类APP,视频类APP普遍采取的是Native的框架,Web的内容

i.e.
1)webApp:

0A233F4EA484AE72BF1FCC152739E3E2.png

2)混合app

3)native(就是原生)

2.拥有下面特点的就是一个Web App了:使用浏览器运行;纯Web前端架构,很多重要手机特性无法访问,例如联系人以及Push notification之类的;Single Page App;销售渠道多限于浏览器.

3.对比:


1525093-e8572448cf655288.png

1)native(原生) app: 安卓开发,IOS开发,黑莓,塞班,wIndows phone 等。
要满足这么多系统的话,只需要hybird一种。

2)用户体验要最求极致的话,还是选择native开发。

4.Hybird 基于 WebView的
UIWebView 与 WKWebView 的比较

UIWebView由于其API不好用,有的功能不齐全,还有内存泄漏。
iOS8之后出了WKWebView。WKWebView提供了一系列API来使得Native与Web的信息交换简单高效。WKWebView使用与Safari相同的JS引擎+内置手势+无内存泄漏。(总之WKWebView比UIWebView好很多)

iOS8之后WKWebView出现,目的是代替UIWebView.

5.主要技术在于:
JS+Native两者相互调用。语言:JS+HTML5 。

6.Hybird App 开发主流平台:
主流的平台包括PhoneGap(Cordova),AppCan,appMobi,Titanium
都是基于webkit(https://github.com/WebKit/webkit)开源内核,使用HTML5 标准开发,适配机型简单,支持开发者自定义插件

最主要的两类的开发平台:
PhoneGap(Cordova) vs AppCan

PhoneGap优点:
PhoneGap可以基于一些开源的框架提升用户体验。
PhoneGap也提供了比较丰富的原生插件调用。
可以使用DreamWeaver开发,开发速度可以加快。
Native接口比较丰富,通过封装的API可以直接访问硬件,比如说加速,相机,指南针,GPS,文件访问等。
PhoneGap缺点:
需要针对相应的平台环境配置,进行编译,打包测试,发布等等。eg:iOS的环境配置,打包测试你要懂,Android的环境配置,打包测试要懂。
使用效果慢,启动慢,页面切换相应慢,数据请求慢,相对native。
国外使用多,文档基本是英文。

AppCan特点:
中国使用的比较多。(http://www.appcan.cn
AppCan不仅封装了类似于PhoneGap的本地调用功能,而且封装了uexWindow多窗口机制,实现了移动端的iframe效果。
不是开源项目。
appcan目前分两个版本:大众版、企业版。
AppCan优点:
拥有提供的集成开发环境的IDE进行模拟器开发。(
AppCanIDE)有windows版本,也有Mac OS X版本。
可以在线打包,不需要像Cordova要了解那么多平台的配置。
支持更多的原生调用,比如UI控件的封装,通讯类(socket),地图,支付宝等更多的原生控件支持。
拥有统一数据统计平台,便于运营管理开发的应用。
AppCan缺点:
暂时只支持iOS,Android两大平台。
许多功能需要企业版才能实现,不过是收费的。

知乎上面对AppCan的评价:

作者:匿名用户
链接:https://www.zhihu.com/question/23211519/answer/23928305
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

看你做什么了,小东西还是挺不错(几个页面,不太复杂的),但稍微靠谱点的东西,还是不推荐appcan。

appcan目前分两个版本:大众版、企业版。

大众版其实就是免费版,但功能有缺失(比如不能点对点推送、不能本地打包,必须上传到他们服务器,否则打包出的app带有他们的水印),企业版售价5W(听买过的人说的,具体我没找官方咨询过),可以点对点推送,同时官方提供一些比较实用的插件(支付、分享之类的),同时好像可以自己开发插件(这点还没确认)。

appcan有一点非常坑爹,就是打包好的app会加入他们的一些代码,这些代码会做一些服务器请求,然后呢,由于他们的服务器非常不稳定,经常导致无法请求成功,其结果就是app没法打开或者直接崩溃,这点让人很无语,就我个人的观察来看,基本上可以保证每个月都出问题,官方的响应也非常慢经常一两天搞不定(要是周六周末就更惨,肯定找不到人-_-)。基本上你喊破喉咙也没人理你。

总之,就我个人的使用经验来看,appcan对免费版的支持相当差(你可以认为是没支持-,-),至于企业版,我没买,所以不知道是个什么程度。

所以如果你做的东西不是什么要紧的东西,那么用它就无所谓,如果是打算开发靠谱的东西,建议你绕道phonegap,那个更靠谱(我目前也转用phonegap了)

7.我选择了cordova

cordova 官方文档:https://cordova.apache.org/docs/en/latest/guide/platforms/ios/

8.环境搭建:

1)首先安装node.js:
https://nodejs.org 下载pkg文件运行安装 ( 注意:这里要使用google 下载,我开始用safari浏览器下载的特别缓慢 )
终端运行 npm -v,如果出现版本号则说明 Node.js 安装成功

2-1)命令行安装Cordova CLI

sudo npm install -g cordova

以后如果要更新Cordova:

sudo npm update cordova -g

cordova更新完成后,还需要更新项目(比如更新ios项目):

cordova platform update ios

2-2)安装inoic:

sudo npm install -g cordova ionic

3)测试下Cordova是否安装成功

cordova -v

显示版本号则证明安装成功

9.创建cordova 项目:

// 先找到目录位置:

cd ~/Documents

创建工程项目:

cordova create 工程的文件夹名 com.xxx.工程的文件夹名 App的显示名称e.g: cordova create hello com.example.hello HelloWorld

注意:  App的显示名称 可以在config.xml中改变

创建成功目录结构:

屏幕快照 2016-12-10 上午10.08.09.png

目录文件夹说明:

conig.xml :cordova的配置文件
hooks/ :存放自定义cordova命令的脚本文件。
platforms/ :各个平台原生工程代码,会在build时被覆盖勿修改
plugins/ :插件目录(主要是提供各个平台的原生API)
www/ :用H5编写的源代码目录,build时会被放入各个平台的assets\www目录。
www/index.html :App入口html文件

10.添加iOS平台支持:

  1. terminal中进入项目:

    cd xx/x/xx/x
    2)添加iOS平台文件

    cordova platform add ios

屏幕快照 2016-12-10 上午10.28.32.png

  1. 可以打开Xcode查看了

一般都是编辑外面的www文件夹里的页面,而不是里面Staging的www文件夹。然后运行如下命令重新 build 工程,这些页面就会自动覆盖到各个平台下对应目录下。

cordova build

然后在Xcode中编译运行。



作者:廖马儿
链接:https://www.jianshu.com/p/c6512fff1f43


1人推荐
随时随地看视频
慕课网APP