最近1,2个月一直都尝试开发一款Hybird app,遇到了很多问题,谈谈自己的体会。


Hybird app
(混合模式移动应用),它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开发的移动应用,
好处显而易见,由于内嵌的是Html5, 所以跨平台,扩展性,开发成本都是很不错的优势。

Hybird App拥有很多从开发工具到打包发布的解决方案,比较出名的是来自Adobe的phonegap, 国内有AppCan,这2种解决方案都有比较好的工具平台。这次我采用的的是Appcan, 需要注意的是Appcan的开发工具只有windows平台的,另外不得不吐槽的是,方案里面集成的js插件脚本,bug很多。

我采用的技术架构,如图:

其中利用Appcan作为应用的打包平台,通过其内置的JS组件进行数据请求,请求得到的数据利用JS做些业务逻辑处理后,使用AngularJS进行绑定渲染,UI组件的东西则用的GMU.js,而gmu内置了zepto.js和scroll.js等等, 页面则是h5+css3。可以看到的是与传统的web相比,其中多了不少js框架和库的应用,毕竟把数据的调用和业务处理都移到了JS端,所以在这里提醒大家,可以考虑加入js模块管理的框架,例如seajs。数据绑定这块感觉Angular真的很棒,写好绑定后,只需要专注后端JS数据的业务处理即可,提升了不少开发效率。

在编码阶段遇到了不少问题,例如并不能利用url像平时那样进行参数传递,发现抓取不到页面跳转后的参数。为了减少请求次数,也尝试采用LocalStorage缓存json。通过Manifest cache 缓存html,css,js文件,来提升界面的响应速度。通过css3替代js做动画效果,但是效果并不理想,感觉还是没有js来的流畅。页面跳转白屏,数据加载的延迟等等状况,加载动画体验需要做的更好,而且尽量减少页面的跳转,把一些功能集中到单个html文件。

总而言之,采取了很多优化方法,但是显然这种hybird app在性能体验等方面还是问题很多,但是例如一些交互简单的app话,用这种方案还是可以考虑的。

Hybird App ( 混合模式移动应用)开发初体验的更多相关文章

  1. Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)

    以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各 ...

  2. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  3. IOS开发初体验

    IOS开发初体验 搭建开发环境 不多说什么了,开发环境的搭建太简单了,上App Store搜索XCode下载就行了,说多了都是眼泪 创建第一个IOS项目--HolleIOS 创建工程 选择工程创建位置 ...

  4. 中文代码示例之NW.js桌面应用开发初体验

    先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...

  5. HyBird App(混合应用)核心原理JSBridge

    目录 app分类 HyBird App(混合应用) JSBridge介绍 优势及应用场景 JsBridge的核心 1.Web端调用Native端代码 1.1 拦截URL Schema 1.2 注入ap ...

  6. Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储

    在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...

  7. Online开发初体验——Jeecg-Boot 在线配置图表

    Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...

  8. Apache Beam入门及Java SDK开发初体验

    1 什么是Apache Beam Apache Beam是一个开源的统一的大数据编程模型,它本身并不提供执行引擎,而是支持各种平台如GCP Dataflow.Spark.Flink等.通过Apache ...

  9. hybird app混合开发介绍

    一 概念 1 Hybird App,是用现有前端(html,js,css)技术来开发的app.特点:1 灵活(开发灵活 ,部署灵活) 2 拥有类似原生的性能体验. 2 不是h5页面,也不是在webvi ...

随机推荐

  1. Xamarin XAML语言教程构建ControlTemplate控件模板

    Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate ControlTemplate是从Xamarin.Forms 2.1.0开始被引入的 ...

  2. wildfly 10的安装部署

    http://www.xue163.com/2203/1/22037981_2.html WildFly 曾用名:JBoss Application Server ,红帽公司宣布 JBoss AS 的 ...

  3. 【递推】【卡特兰数】CODEVS 3134 Circle

    新GET了一种卡特兰数的应用…… 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多少种连线的方法. 不会证 ...

  4. 【R笔记】给R加个编译器——notepad++

    R的日记-给R加个编译器 转载▼ R是一款强大免费且开源的统计分析软件,这是R的长处,可也是其“缺陷”的根源:不似商业软件那样user-friendly.记得初学R时,给我留下最深印象的不是其功能的强 ...

  5. MR实现--矩阵乘法

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.io ...

  6. React Native之ES5/ES6语法差异对照表

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  7. Android Studio 中修改versionCode跟versionName

    在Android Studio 中修改versionCode 跟versionName最写了一个新版的软件准备发布到应用平台上,但是versionCode和versionName的值一直修改不成功,在 ...

  8. Inno Setup入门(十二)——Pascal脚本(1)

    事件函数(1) Inno Setup支持以下函数和过程. function InitializeSetup(): Boolean; 该函数在安装程序初始化时调用,返回False 将中断安装,True则 ...

  9. UdpClient类客户端和服务端demo

    服务端demo static IPEndPoint ipe = new IPEndPoint(IPAddress.Any, 0); static UdpClient udp = new UdpClie ...

  10. nginx和selinux冲突

    cat /var/log/audit/audit.log |grep nginx |grep denied| audit2allow -M mynginx 取出selinux中有关于nginx被拒绝的 ...