HybridApp解决方案_No1_混合模式(Hybrid)App开发概述

APP开发入门指南|如何选择开发模式? 选择适合的开发模式是APP开发的重要环节之一。原生开发能够提供优质的用户体验和性能保障,适合高标准的应用;跨平台开发平衡了多平台兼容和开发效率,适合覆盖多个平台的应用;Web开发为轻量化和快速迭代的项目提供了解决方案。结合项目预算、平台需求、开发周期等因素做出选择,有助于打造符合需求的应用,提高开发效率。 阅读详情

1.1.     APP三种开发模式

智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝、京东等)、金融(各手机行业、P2P借贷等)、医疗(智慧医疗)、交通(滴滴、Uber等)、教育(慕课网等)、餐饮(饿了吗、美团等)……反正只要是个企业,无论规模大小,都已经订制或将要订制自己的APP。这么多APP无外乎就三种模式:Native App、Web App、Hybrid App。

1.1.1.     Native App

Native App,原生APP,使用原生(即Android或iOS)开发的APP。两年多以前这非常流行,到现在为止,原生开发人员数量众多,一抓一大票,技术成熟,好多培训机构都抱着老掉牙的API翻来覆去的讲——尤其是Android。Sorry,说错话了……使用原生开发有其优势:应用的性能好,适配起来相对容易。学习成本要看人,个人觉得技术点不多,门槛相对稍高,但入门后学习起来就很轻松——网络资料实在是太多了。

但原生APP最头疼的有三个问题:

1、无法跨平台:Android和iOS都需要开发各自平台的版本——开发成本高;

2、升级麻烦:每次升级都要下载安装包,Android还好,反正不需要审核,下载就下载吧,但iOS就麻烦了,发布每个版本还得经过App Store的审核,这导致第三个问题;

3、Android和iOS很难同步发布。

1.1.2.     Web App

所谓的Web App,就是把手机当做一个浏览器(Android使用WebView,iOS使用UIWebView),做几个页面挂在服务器端,类似于一个小网站。这样说虽然不太贴切,但实际上给人的感觉就是这样的。虽然开发成本大大降低,但页面访问速度慢、操作体验差。于是第三种模式诞生了。

1.1.3.     Hybrid App

乍一看和Web App没啥差别,但涉及到的技术成本、开发成本、学习成本比Web App高,它综合了Web App的开发速度和Native App的高性能体验。之所以说学习成本高,是因为开发高性能的Hybrid App有难度,网络资料少。我是两年半前开始接触混合模式开发的,当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容,网络几乎没有资料。网上能搜索到的都是很粗略的东西,或者就是Hello World级别的东西,涉及到稍微细节一点的东西几乎没有。由于本系列文章都只讲Hybrid,故在此不再啰嗦了。

三种开发模式各自的特点如下面的表格所示:

 

Native App

Hybrid App

Web App

原生功能体验

优秀

接近优秀

差

性能

非常快

快

慢

跨平台开发成本

昂贵

合理

便宜

碎片化适配

非常严重

严重

严重

编程技术支持

短缺

非常短缺

通用人才

版本升级维护

保守

低延时

开放

安全

强

中

弱

 

 

1.2.     Hybrid App所需技术

Hybrid App由于需要保证运行性能与开发速度,需要如下技术支持,本系列博文均会按照Demo的开发顺序依次描述本人的开发心得和教训,希望能起到一个抛砖引玉的作用。

1.2.1.     Native技术

Native技术主要用于提供原生支持,要做到跨平台,就需要掌握部分Android和iOS的知识,除了多线程,文件存储等基础知识,Android需要非常熟练的掌握WebView、WebSettings、WebChromeClient、WebClient四大对象。iOS需要非常熟练掌握UIWebView对象。

1.2.2.     Web技术

1、 HTML5

熟练掌握HTML5的各个标签,如何编写最优的文档结构。

2、 CSS

熟练掌握CSS2和CSS3的新特性,能按照效果图编写最高性能的样式。

使用SCSS生成CSS,将CSS可编程化。

3、 JavaScript

实现业务逻辑控制。个人理解JavaScript主要包含两大内容:DOM编程和面向对象编程。大部分JS开发人员就只掌握DOM编程,诸如document.getElementById()等,但面向对象是很重要的一个方面。

4、 性能和开发

模块化编程:编写可复用的组建;

CSS渲染:了解浏览器的CSS渲染引擎才能编写更高效率的样式;

JS解析:了解浏览器的JS解析引擎才能优化JS脚本;

HTTP协议:熟练掌握HTTP请求的各个内容;

AJAX:和服务器端的交互大都采用AJAX。

1.3.     流行框架

1.3.1.     Hybrid 框架

Cordova/PhoneGap:侧重于JS与原生的交互,开发简单,但性能差,如触摸时反应不灵敏。

AppCan:性能还行,使用简单,但要提交代码给AppCan的服务器才能打包,相信有追求的企业是不会把自己的代码提交给第三方,把打包权利交给第三方的。

Ionic Framework:在Cordova的基础上增加一些UI/JS方面的东西,样式还不错,但同样具有Cordova的不足。

1.3.2.     UI/JS框架

jQuery Mobile:上手简单,组件丰富,但性能超级差,闪屏现象严重。

Senche Touch:简单看过,没有使用过,貌似UI很漂亮,学习成本高。

React Native:FB推出的,当年FB是最早尝试Hybrid的,但性能超差,于是APP放弃了Hybrid,走原生的道路。在大家都不看好H5时,FB暗中深入挖掘H5,三年之后推出了这个框架,非常推荐各位去学习其中的思想。

GMU:百度推出的,这个不错。

1.3.3.     UI/JS库

这个就多了,jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS……

1.3.4.     个人建议

由于移动端是一个重视性能和用户体验的终端,大量采用框架存在一些问题:

1、 扩展、维护、定制成本,这个非常需要考虑,或许框架提供的UI风格和自己设计的UI风格差异大,导致设计围绕框架转,不符合产品的需求。

2、 既然是框架,强调的是覆盖面广度和功能的全面,会有很多无用的东西,带来累赘;

3、 框架本身存在BUG,或许需要开发人员面对一些能力之外的问题。

总之,如果只追求像山寨作坊一样快速产出、不计性能的开发产品,那使用现成的框架是不二选择。但如果追求性能和真正的产品,建议使用库,不要使用框架。但是很多框架的实现思想都很优秀,虽然不建议使用,但我们应该多接触学习其中的思想,才能写更好的代码。仅仅建议而已,不中听请忽略。

1.4.     系列大纲

本系列博文将按照我近三年来开发Hybrid App过程中的体会进行编写,以一个APP完整开发为线索,形成一套完整的混合模式开发的解决方案。

1、 JS和原生交互架构

2、 WEB端基础知识准备

3、 UI适配方案

4、 UI组件开发及封装

5、 JS模块化开发

6、 升级、部署方案

APP系统开发模式一共有哪几种? App的开发基于硬件设备所运行的操作系统,现在主流的移动操作系统有苹果的iOS、google 的Android和微软的Windows Phone 8 等,主要通过运行应用的硬件和设备的其他系统约束来区别于桌面和Web 应用开发,这些约束从平台到平台有微小的变化。 阅读详情

相关推荐

MMCV安装后报错‘from mmcv import Config’?别慌,这是MMCV 2.0的锅!快速降级回退MMCV 1.x全指南

本文详细解析了MMCV 2.0版本升级导致的‘from mmcv import Config’报错问题,提供了从诊断到降级回退MMCV 1.x的完整解决方案。通过pip和OpenMIM工具链的实操指南,帮助开发者快速解决版本冲突,确保项目稳定运行。

weixin_29102619的博客 263

混合框架uni-app之 环境搭建

混合框架uni-app之 环境搭建

qq_29848853的博客 1525

从零到一:DETR模型在自定义数据集上的实战部署与调优

本文详细介绍了DETR模型在自定义数据集上的实战部署与调优过程,包括环境准备、数据转换、模型配置、训练技巧及问题排查。通过具体代码示例和实用建议,帮助开发者高效完成从零到一的DETR模型部署,特别适合目标检测领域的实践应用。

weixin_42524100的博客 462

uni-app的应用

uni-app的应用平台 H5端 app端(ios,android) 小程序(微信,百度,qq,支付宝,头条) 运行到微信开发者工具,会生成unpackage文件,在文件下的dev中会生成mp-weixin文件 使用微信开发者工具运行项目时会出现此错误:此错误时微信开发者工具没有打开服务端口。 IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manuall

fxm_fxm123456的博客 1656

拯救者Y9000P 2022双系统实战:Ubuntu22.04分区优化与驱动避坑指南

本文提供联想拯救者Y9000P 2022款安装Ubuntu 22.04双系统的详细实战指南。重点讲解针对该机型的磁盘分区优化方案、NVIDIA显卡驱动安装避坑技巧,以及安装后的网络、时间同步等必备配置,帮助用户高效完成双系统部署并提升使用体验。

weixin_29208327的博客 423

OnePose++: Keypoint-Free One-Shot Object Pose Estimation without CAD Models

算法:首先采用LoFTR的细匹配模块,将粗匹配点周围的小窗口内,通过对比特征找到最相似的位置,细化当前特征点的位置。算法:PnP算法,利用3D点和2D投影点的对应关系,计算相机相对于物体的6D姿态(位置朝向)。算法:使用COLMAP,对2D粗匹配对(不依赖传统关键点匹配)进行特征轨迹计算并生成半稠密点云,每个3D点包含坐标和对应的2D投影点。算法:LoFTR粗匹配模块,将每一个像素点视为伪关键点,生成半稠密的2D匹配对。输入:优化后的3D、当前视图的2D特征点。输出:粗半稠密点云以及物体的特征轨迹。

雨落倾城的博客 885

APP三种开发模式

1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝、京东等)、金融(各手机行业、P2P借贷等)、医疗(智慧医疗)、交通(滴滴、Uber等)、教育(慕课网等)、餐饮(饿了吗、美团等)……反正只要是个企业,无论规模大小,都已经订制或将要订制自己的APP。这么多APP无外乎就三种模式:Native App、Web App、Hybrid App。

kunzai6的博客 2255

n8n实战:动态报表生成与企业微信自动化推送

本文详细介绍了如何利用n8n实现动态报表生成与企业微信自动化推送的全流程。通过配置n8n Form触发器、智能报表生成核心逻辑以及企业微信Webhook推送,帮助企业大幅提升数据收集与报表推送效率,实现从数据录入到报表推送的全自动化处理。

weixin_29267307的博客 304

APP三种开发模式--及---HybridApp解决方案_No1_混合模式(Hybrid)App开发概述

APP三种模式:Native App、Web App、Hybrid App。 原文:http://www.cnblogs.com/yeahui/p/5026587.html 1.1.1.     Native App Native App,原生APP,使用原生(即Android或iOS)开发的APP。两年多以前这非常流行,到现在为止,原生开发人员数量众多,

wujiayicc的博客 1613

Ubuntu搭建Pytorch环境(Anaconda、Cuda、cuDNN、Pytorch、Python、Pycharm、Jupyter)

Ubuntu搭建Pytorch环境(Anconda、Cuda、Pytorch、Python、Pycharm、Jupyter)

funfan的博客 1万+

基于逆向工程的中国裁判文书网爬虫技术深度解析:从反爬破解到合规抓取

最近承接了一个法律大数据分析的项目,需要获取某类合同纠纷的裁判文书数据,用于分析不同地区的判决规律、法官的裁判倾向以及法条适用情况。原本以为用常规的Python爬虫就能搞定,结果刚对着中国裁判文书网发了几个请求,就遭遇了“滑铁卢”:要么请求直接返回403 Forbidden,要么触发滑块验证码,甚至连IP都被临时封禁了。普通的requests+BeautifulSoup组合在裁判文书网面前完全失效,这也让我意识到,想要获取这里的数据,必须先通过逆向工程拆解网站的请求逻辑和反爬机制。经过一周的摸索,从抓包分析

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 3169

Hybrid APP基础篇(一)->什么是Hybrid App

Hybrid APP基础篇(一)->什么是Hybrid App 最新更新 一个开源的快速混合开发框架:https://github.com/quickhybrid/quickhybrid Android、iOS、JS三端内容初步都已经完成,有完善的设计思路、教程以及API文档。 说明 Hybrid APP是目前广泛流行的一种APP开发模式,本文对其做简单介绍 目录 前言 参...

bolang789的博客 1867

Android16 RK3576 Bluetooth source和sink模式切换

摘要:本文介绍了在RK3576平台上实现蓝牙A2DP模式动态切换的修改方案。通过在device配置文件中添加A2DP Sink相关属性,修改Bluetooth模块代码实现:1)在Config.java中增加persist.bluetooth.rka2dpsink属性控制模式切换;2)修改A2dpSinkStreamHandler.java取消音频焦点限制;3)调整btif_a2dp_sink.cc默认授予音频焦点。最终通过设置persist.bluetooth.rka2dpsink属性为true/false

tzj1058756809的博客 860

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较 说明 Native、Hybrid、React、Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native ...

bolang789的博客 383

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

Native、Hybrid、React Native、Web App方案的分析比较

前人栽树,后台乘凉,本文参考了以下来源对当前主流hybrid app、web app与native app工具的初步比较与分析H5、React Native、Native应用对比分析如何评价 React Native论Web App、Hybrid App以及Native App的设计差异H5、React Native、Native应用对比分析HybridApp解决方案_No1_混合模式(Hybrid)App开发概述聊聊Web App、Hybrid App与Native App的设计差异。

paolei的笔记 1040

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

iOS 好的学习链接地址

1.介绍如下列表内知识的 ObjC   从 NSObject 的初始化了解 isa  深入解析 ObjC 中方法的结构  从源代码看 ObjC 中消息的发送  你真的了解 load 方法么?  上古时代 Objective-C 中哈希表的实现  自动释放池的前世今生 黑箱中的 retain 和 release  关联对象 AssociatedObject 完

圣人男的博客 788

微信MMKV原理与实现(三):增量更新与全量更新

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 1.首次打开App 第一次打开App,自然是先解压Hybrid Zip啦。通过‘CFBundleShortVersionString.CFBundleVersion’生成的版本标识符来判断是否需要重新解压Zip包,主要针对的是app通过更新上来需要解压新安装包中的Zip包。 // 解压Hybrid Zip包 - .

bugyinyin的博客 684

uni app 学习总结

UniApp是一个基于Vue.js的前端框架,专门用于开发跨平台应用。具体来说,UniApp允许开发者使用Vue.js编写代码,并将其编译成可以在多个平台上运行的应用,包括但不限于iOS、Android、Web(响应式设计)、以及各种小程序如微信、支付宝、百度等。跨平台兼容性:开发者只需编写一套代码,就可以在多个平台发布,这大大减少了开发和维护成本。高效的开发体验。

weixin_74442190的博客 2195

详解跨平台APP的三种开发模式

    目前市面上主流的APP开发模式有三种:一种是Andriod和IOS的原生APP开发;一种是WebApp HTML5开发,最后一种是Hybrid App混合式开发。 1、Navtive APP开发(原生APP开发) NativeApp是基于智能手机操作系统(现在主流的是ios和Android)用原生程序编写运营的App。NativeApp运行时是基于本地操作系统的,所以它的兼容能力和访问...

ahstudy的专栏 9510

混合开发 Hybrid 介绍

(一)开发移动三种模式 (1)Native App:(原生APP)写App的同学,比如 ios,安卓等 (2)Hybrid App:(混合开发),h5 页面嵌入 App 中 (3)Web App:用手机浏览器打开 h5 页面 (二)优缺点: (1)Native App:基本可以操作任何手机系统,比如(视频、扫码、获取通讯录、打电话)等 (2)Hybrid App:混合开发,如果想要h5操作手机系统,需要 app 同学配合前端,给前端提供相应的操作api 前端也可以自己做混合开发,需要借助.

Luckyzhoufangbing的博客 1556
上一篇: jQuery未知高度div垂直居中(响应式)
下一篇: JavaScript单线程之同步任务与异步任务
! 不再维护
博客等级 码龄11年 63粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值