安卓基于webview混合开发之离线模式

1、背景

基于业务需要，在移动端需要在无网络环境下完成某些业务操作，然后回到有网络的区域将数据传送到后台，开发模式还是基于webview的混合开发，即界面操作都是由前端代码实现，共用一套后台接口。

所以需要在安卓端区分处理在线模式和离线模式。

2、解决方案：

首先想到的第一种方案为：通过webview里面的url拦截，根据前端请求访问进行拦截处理，然后在离线模式下，访问本地数据库，组装数据

WebResourceResponse

返回给前端。

在方法 shouldInterceptRequest 中处理：

ByteArrayInputStream is = new ByteArrayInputStream(localTargetRes.getBytes());

Map<String,String> map = new HashMap<>();

map.put("Access-Control-Allow-Origin","*");

map.put("Access-Control-Allow-Headers","Content-Type");

WebResourceResponse resourceResponse = new WebResourceResponse("application/json",

"UTF-8",

200,

"OK",

map,

is);

return resourceResponse;

但是调试结果是，无法获取post传递的参数，因为webview的回调中只能够获取url, 已经请求头Header信息，所以此方案并不能达到效果。

方案二：前端发出的后台数据请求，直接由安卓端进行拦截，然后安卓这边决定是否访问后台数据还是本地数据。

https://www.jb51.net/article/129489.htm

思路和如上链接文章中提到的相符，于是参考了其说明的框架方案。生死看淡，说了就干。

安卓端这边使用的离线方案是通过使用三方框架改造的webview以及结合fly.js，将web端的请求通过fly.js进行引擎替换，定向到native。安卓本地拦截到ajax 请求后，对数据进行解析，然后根据是否是离线模式，决定数据访问后台服务器还是本地数据库。

https://github.com/wendux/DSBridge-Android

https://github.com/wendux/fly

一顿操作猛如虎后，发现问题还是出现在参数格式上，根据fly.js 的说明，其实支持json 和 urlEncode 多种方式传参的，但是在使用urlEncode 方式传参时，碰到了body为空的问题：

AjaxHandler: =====onAjaxRequest requestData={"method":"POST","url":"http:\/\/192.168.65.41:8081\/H5RealMonitor-web\/h5realmonitor\/page\/addH5Page","headers":{"Content-Type":"application\/x-www-form-urlencoded"},"body":"id=110&name=yuanxiaojie.html&alias=yuanxiao&groupId=3234285&type=Android","baseURL":"","timeout":0,"params":{},"parseJson":true,"withCredentials":false}

以上是正常的格式，后来才发现是示例中的参数要做toString处理，这一点是需要注意的。

另外就是json格式的参数在传递时，后台接口对于参数获取的注解需要注意

@RequestParam、@RequestBody和@ModelAttribute区别：

https://www.cnblogs.com/zeroingToOne/p/8992746.html

最终实现了POST he GET 请求以及兼容两种格式传参的功能。

另外，在web端查看sqlite数据的框架方便查看本地数据：

https://github.com/skyhacker2/SQLiteOnWeb-Android

安卓基于webview混合开发之离线模式相关推荐

Android WebView混合开发实战演习
WebView混合开发实战提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成 ...
记录安卓与uni-app混合开发遇到的坑——图片预览问题
记录安卓与uni-app混合开发遇到的坑--图片预览问题一.场景描述二.需求描述三.问题描述四.问题解决方式五.奉上代码(组件) 一.场景描述用uni-app开发嵌套在安卓里面使用二.需 ...
swift项目嵌入flutter的module混合开发（framework模式：适合多人协作开发，一个负责混合开发）
和之前一样,这个模块也是对于本地我们开发好的代码,需要到一起开发iOS的同事需要拉代码,调试的时候.这种静态包的方式就会好很多.不用在他的电脑上也搭建flutter环境,以及创建flutter项目的拉 ...
基于H5的混合开发介绍（一）WebView
转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么 1 WebView是一种控件,它基于webkit引擎,因此具 ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...
移动端开发之混合开发模式优劣势综述
2020年,我国互联网行业实现快速发展,网民规模稳定增长.截至2020年底,我国5G网络用户数超过1.6亿,约占全球5G总用户数的89%. 截至2020年底,我国网民规模达9.89亿,互联网普及率达到 ...
Flutter 核心原理与混合开发模式
作者:airingdeng,腾讯QQ前端开发工程师本文将从 Flutter 原理出发,详细介绍 Flutter 的绘制原理,借由此来对比三种跨端方案:之后再进入第三篇章 Flutter 混合开发模式 ...
基于安卓的移动应用开发
基于安卓的移动应用开发 2011-12-12 10:21:06来源: 作者: [ 大中小] 浏览:1318次评论:0条 <style type="text/css"&g ...
Hybrid APP 混合开发模式的选择之路（三）
原文出处:http://www.cnblogs.com/dailc/p/5930231.html 现在概念上的APP诞生是在Google推出Android,Apple推出iOS后,从这时候开始,就有了 ...

安卓基于webview混合开发之离线模式

安卓基于webview混合开发之离线模式相关推荐

最新文章

热门文章