Hybird App ( 混合模式移动应用)开发初体验
最近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 ( 混合模式移动应用)开发初体验的更多相关文章
- Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)
以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- IOS开发初体验
IOS开发初体验 搭建开发环境 不多说什么了,开发环境的搭建太简单了,上App Store搜索XCode下载就行了,说多了都是眼泪 创建第一个IOS项目--HolleIOS 创建工程 选择工程创建位置 ...
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
- HyBird App(混合应用)核心原理JSBridge
目录 app分类 HyBird App(混合应用) JSBridge介绍 优势及应用场景 JsBridge的核心 1.Web端调用Native端代码 1.1 拦截URL Schema 1.2 注入ap ...
- Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储
在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...
- Online开发初体验——Jeecg-Boot 在线配置图表
Online开发——初体验(在线配置图表) 01 通过JSON数据,快速配置图形报表 02 通过SQL数据,快速配置图形报表 03 图表模板配置,实现不同数据源图表合并展示 04 图表布局,支持单排. ...
- Apache Beam入门及Java SDK开发初体验
1 什么是Apache Beam Apache Beam是一个开源的统一的大数据编程模型,它本身并不提供执行引擎,而是支持各种平台如GCP Dataflow.Spark.Flink等.通过Apache ...
- hybird app混合开发介绍
一 概念 1 Hybird App,是用现有前端(html,js,css)技术来开发的app.特点:1 灵活(开发灵活 ,部署灵活) 2 拥有类似原生的性能体验. 2 不是h5页面,也不是在webvi ...
随机推荐
- Cent OS 运行 Cuberite
Cuberite 是一个轻量级的Minecraft服务端,由C++编写,性能比Mojang等等用java写的高很多. 在腾讯云的最低端VPS上,用Spigot建服的话,从主世界传送到下界用时要五六秒的 ...
- HDOJ 4961 Boring Sum
Discription Number theory is interesting, while this problem is boring. Here is the problem. Given a ...
- 【kruscal】【最小生成树】poj3522 Slim Span
求一个生成树,使得最大边权和最小边权之差最小.由于数据太小,暴力枚举下界,求出相应的上界.最后取min即可. #include<cstdio> #include<algorithm& ...
- 【bitset】hdu4920 Matrix multiplication
先把两个矩阵全都mod3. S[i][j][k]表示第i(0/1)个矩阵的行/列的第k位是不是j(1/2). 然后如果某两个矩乘对应位上为1.1,乘出来是1: 1.2:2: 2.1:2: 2.2:1. ...
- @requestBody注解的使用(上)
1.@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容,比如说:application/json或者是ap ...
- 130804组队练习赛ZOJ校赛
A.Ribbon Gymnastics 题目要求四个点作圆,且圆与圆之间不能相交的半径之和的最大值.我当时想法很简单,只要两圆相切,它们的半径之和一定最大,但是要保证不能相交的话就只能取两两个点间距离 ...
- html5:localStorage储存
实例:刷新值会增长,关掉浏览器,再打开,值会在原基础上增长 if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage ...
- 搭建vue全家桶
1.直接利用vue-cli脚手架快速搭建 (1)全局安装vue-cli npm install -g vue-cli (2)创建项目 vue init webpack-simple my-projec ...
- Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; impor ...
- centos7 安装nginx与配置
第一步安装 使用Yum安装是推荐的方式,整体的流程非常的简单,也不容易出错,如果不需要什么特殊配置,建议使用Yum尽进行安装. 第一种安装方式,通过添加epel源 yum install epel-r ...