最近采用原生控件+前端技术开发Android、iOS客户端的方式很流行,其实这种技术方案出现很久了;后来随着html5的发布,采用前端技术也可以渲染出炫丽的视觉界面,这种方案就更加流行起来;另外,复用性高,节约成本,也是其得以流行的原因之一。
原生控件和前端技术结合的实现方式有两种:
1、前端静态资源在客户端
将静态文件(html、js、css、图片等)放在assets目录下,用下面方法将WebView和html文件绑定:
//Android实现:
public WebView initWebView(WebView webView){
android.view.ViewGroup.LayoutParams layoutParams = new LayoutParams(
android.view.ViewGroup.LayoutParams.FILL_PARENT,
android.view.ViewGroup.LayoutParams.FILL_PARENT);
webView.setLayoutParams(layoutParams);
WebSettings webSettings = webView.getSettings();
webSettings.setRenderPriority(RenderPriority.HIGH);
//java script
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// access Assets and resources
webSettings.setAllowFileAccess(true);
webSettings.setAppCacheEnabled(false);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);//隐藏滚动条
webView.loadUrl("file:///android_asset/XXX.html");
}
//iOS实现:
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[myWebView loadHTMLString:html baseURL:baseURL];
到此,你可以启动你的程序了,正常情况下XXX.html页面会显示在你的手机上。
这种方式让你可以用前端技术代替原生控件实现界面效果;
另外,如果你的应用需要服务端数据,这种方式可以提高应用程序响应速度,特别是在带宽有限(如:2G/3G网络)的情况下比较明显;因为很多静态文件已经在本地了,不需要在程序运行时从服务端下载。
2、前端静态资源在服务端
直接用webview加载一个链接就可以了:
//Android实现:
webView.loadUrl("http://ringw.iteye.com/blog/2072310");
//iOS实现:
NSURL* url = [NSURL URLWithString:@"http://ringw.iteye.com/blog/2072310"];//创建URL
NSURLRequest* request = [NSURLRequest requestWithURL:url]; //创建NSURLRequest
[myWebView loadRequest:request];
这种方式简单易懂;更新升级方便。
-----------
对于第一种方式,我发现如果页面上有ajax请求,在iOS上或者android的targetSdkVersion设置为17及以上时,会出现
ajax跨域问题,目前还没找到解决方法,
欢迎一起讨论
分享到:
相关推荐
描述:https://blog.csdn.net/u010815991/article/details/122518187
阿里云原生技术+云原生架构+云原生实践等资料合集,13份。 2021阿里巴巴DevOps实践手册 2021云原生开发者洞察白皮书 阿里巴巴-云原生大规模应用落地指南 阿里巴巴经济体-云原生实践 阿里巴巴云原生架构白皮书 阿里...
原生社区交友婚恋视频即时通讯双端APP源码后端+H5源码+Android+IOS源码
RichEditor基于原生EditText + span实现的Android富文本编辑器组件描述该组件是基于原生EditText + span的方式实现的,逐步提供一个功能齐全且使用方便的Android富文本编辑器。主要支持了加粗斜体等行内样式,标题...
游戏应用市场系统+完美后台+pc站+wap站+APP原生客户端三站合一+图文教程
Java后台+原生H5+前端uniapp(支持H5+APP+小程序) SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue 前后端分离 包含运费模板、图片素材库、订单管理、多规格sku、积分、物流、拼团、砍价、商户订单管理、...
前后端分离开发,基于springboot+mysql+mybatis+原生安卓开发的工资管理系统,可以直接部署使用,有后端和安卓端,后端采用springboot框架,mybatis框架,redis缓存机制,Rest接口开发风格等技术,前端采用原生安卓...
游戏应用市场系统+完美后台+pc站+wap站+APP原生客户端三站合一+图文教程.zip,非常不错的系统,可直接商用,可直接运营。
基于原生servlet和jdbc++前端layui的学生信息管理系统源码+数据库+项目说明.zip 【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大...
【觅影双端影视APP源码】2020三月新版原生双端影视APP源码Android+IOS完美运营[附带开发文档和教程] 原生系统源码(包含后端源码,Android源码,IOS源码,有VIP功能及分享裂变模式,附带开发文档及搭建教程) 开发...
仿抖音短视频APP源码+带原生安卓和IOS端源码/带安装教程,喜欢就下载吧。 正文: 我当前发布的这个版本已经做了一些修复修改,带安装教程的有需要的可以自己研究。 WEB后台配置: 系统设置->公共设置 按上线环境...
本程序后台以及PC端采用TP开发,前端安卓原生开发,苹果OC开发。 服务器centos7以上,nginx+php5.6+mysql5.6 主要二次开发功能: 最近更新:可新增机器人每隔多少秒进入房间(收费) 修复IOS端开播问题 ——————...
青瓜视频APP源码全套源码_原生双端ios+Android.zip 运行环境 适用 课程设计,大作业,毕业设计,项目练习,学习演示等
一款成人用品线上零售商城,在线销售男士、女士避孕用品、情趣内衣和玩具类等两性健康产品,客户有自己的货源为了扩大渠道,方便客户购买,开发本款小程序。 项目需求 产品分类清晰明了,首页需突出主打产品,页面...
且Hybrid APP 开发模式技术已经趋于成熟,性能、原生接口都有不错的体验,天猫、淘宝、京东等很多主流app大都采用这种开发模式,基于H5的Hybrid APP已经是行业趋势。 后端: 基于公司情况,大都擅长PHP,整个后端...
且Hybrid APP 开发模式技术已经趋于成熟,性能、原生接口都有不错的体验,天猫、淘宝、京东等很多主流app大都采用这种开发模式,基于H5的Hybrid APP已经是行业趋势。 后端: 基于公司情况,大都擅长PHP,整个后端...
一款成人用品线上零售商城,在线销售男士、女士避孕用品、情趣内衣和玩具类等两性健康产品,客户有自己的货源为了扩大渠道,方便客户购买,开发本款小程序。 项目需求 产品分类清晰明了,首页需突出主打产品,页面...
最新版原生双端影视APP源码Android+IOS完美运营[附带开发文档和教程]
uniApp或者vue 与 Android或者ios实现原生交互,使用bridge.js可以轻松实现。
彩票体育赛事原生andriod+ios源码学习研究分享