云炬Android开发笔记 12基于WebView的混合App框架设计（包含浏览器与原生请求Cookie的处理）

2024-05-20 19:50:51

阅读目录

1.WebView高可扩展性封装

1.1 发现模块的框架搭建
1.2 webView的基类
1.3 对webview基类的实现
1.4 setInitializer的方法的实现
1.5 webView内部的处理和控制
1.6 对初始化方法的调用
1.7 测试
1.8 增加页面间的跳转
2.Web与原生交互一键式配置解决方案

2.1 展现原有的web页面的样式
2.2 事件的绑定
2.3事件绑定的测试
2.4 使用原生处理web
3. 将混合微框架集成到latte并完善

3.1 js接口的增加
3.2 对事件的添加
3.3 web页面的loader延时的处理
3.4 webDelegate的Setlistener的加载方式

1.WebView高可扩展性封装

【说明】发现模块的开发：是加载WebView的操作，打开之后不应该是web内部的跳转，应该是Activity或者是fragment的跳转；

这种跳转让webView的跳转更接近与原生的跳转；

回到顶部

1.1 发现模块的框架搭建

回到顶部

1.2 webView的基类

【基类】

【初始化webView的接口】

【完善基类】

【路由类的创建】

【完善基类】

【创建webview的接口】

【完善基类】

回到顶部

1.3 对webview基类的实现

【新建类：webViewClientImpl类：进行拦截】

[复写方法]可以根据不同的版本进行方法的分类的选择，为了兼容性，选择复写下面的一个方法；

1.3.2 对内容的拦截

【内容拦截的原理】【在web页面中存在localholf或者是a标签，全部都会以下面的方式拦截下来，然后在原生中强制进行跳转，主要实在route中对时间进行处理】

【路由类-1】【新建路由类】使用路由的截断和处理

【完善实现类】写了下面的代码表示：页面间的所有的跳转和JavaScrip中的hof重定向，全部都使用原生的进行接管；

【路由类-2】如果js中包含了电话的链接，则需要对电话的协议tel的协议进行处理；

[对拨打电话的处理]

[非电话]进行原生的跳转，需要判断上层是否具有delegate即容器，如果上层具有容器，则在上层进行跳转，如果上层没有，则是单层跳转；防止bottemBar之内层跳转，外层不跳转的情况；

1.3.3 对页面的内容的加载

【说明】需要对页面进行load的过程

【首先实现对web页面的加载】

【对local本地页面的加载】

[对于local本地的解释]在此处新建的文件asset中的html文件、js文件、样式等文件都会以本地的形式进行显示；

[对本地页面的额外的处理]

【共有方法的处理】包含了local和webView的整体的处理；

【调用】其实在打开页面的时候就已经进行了一些加载了；

回到顶部

1.4 setInitializer的方法的实现

【新建类】com.flj.latte.delegates.web.WebViewInitializer

【设置初始化的webView】

回到顶部

1.5 webView内部的处理和控制

【说明】不做任何的处理，只是程序的需要；

回到顶部

1.6 对初始化方法的调用

回到顶部

1.7 测试

【说明】先加载本地的页面；

【修改拼接错误】

【使用chrom 调试】

【使用nginx的远程测试】

回到顶部

1.8 增加页面间的跳转

【增加跳转的横向的动画】

【新建页面2】

【为index页面增加内容】

回到顶部

2.Web与原生交互一键式配置解决方案

回到顶部

2.1 展现原有的web页面的样式

【出现的设计的不合理】在discoverDelegate下层还有一层bottemBarDelegate,discoverDelegate是一个低层次的delegete；

【再次设置】

【效果】跳转的页面2没有出现上下的控制键，是一种web原生的状态展现出来的；这样可以更好的适应discover页面的内容的不断的更新，都有web页面完成；

回到顶部

2.2 事件的绑定

【json事件的action事件的原理】就是通过web事件中一些action事件来绑定我们的事件；

【增加注解】

【新建包和类】

【event类】抽象每一个具体的事件；将每一个事件作为每一个类的一个实例来处理；

【事件管理的完善】eventManager.class 的完善；

【将事件统一的加到事件组中】

回到顶部

2.3事件绑定的测试

【测试】

【书写web页面】推荐的工具ws；

【点击之后没有反应】需要开辟js的通道；

【测试】-切换别的action；

【web和原生进行有机的交互】在通过判断不同的action可以进行不同的动作的执行；

回到顶部

2.4 使用原生处理web

回到顶部

3. 将混合微框架集成到latte并完善

回到顶部

3.1 js接口的增加

【说明】通过配置项对web的名称进行修改；

回到顶部

3.2 对事件的添加

回到顶部

3.3 web页面的loader延时的处理

【增加延时】为了能够更好的看清效果，增加延时，使用handler处理；

回到顶部

3.4 webDelegate的Setlistener的加载方式

【webDelegate的Setlistener的加载方式】有很多种，在impl中可以完成一次加载；

【加载测试】sui建立的一些css和js的页面；

云炬Android开发笔记 12基于WebView的混合App框架设计（包含浏览器与原生请求Cookie的处理）相关推荐

云炬Android开发笔记 14 个人中心、图片裁剪、图片上传、收货地址、消息推送、权限管理等功能开发与一键式封装
阅读目录 0.优化 1.个人中心页面的布局 2. 订单列表逻辑梳理与实现 3. 个人信息的更新实现 3.1 个人信息页面的布局 3.3 数据的转化 5.3 图片库中图片选择事件的处理 5.4 相机 ...
云炬Android开发笔记 11主界面-商品分类开发（多布局Section RecyclerView）
阅读目录 1. 分类页面结构解析和开发 1.1 布局的创建 1.2 布局的逻辑组合 2. 分类左侧列表数据解析与UI呈现 2.1 数据的转换 2.2[完善list列表逻辑] 3.多布局Section列 ...
云炬Android开发笔记 7登陆注册功能开发
阅读目录 1.注册UI及验证逻辑实现 1.1 布局 1.2 注册信息的验证和逻辑 2.登录UI及验证逻辑实现 2.1 布局 2.2 登录的逻辑框架 3.服务器数据简单介绍 3.1 服务器的数据 3.2 ...
云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...
云炬Android开发笔记 17商品详情功能开发
阅读目录 1.商品详情ui框架设计 1.1 自定义圆形控件 1.2 底部栏的布局 1.3 整体布局 2.商品详情UI-MD风格伸缩渐变效果实现 2.1 ui的绑定 2.2 服务器中商品详情页的数据的取 ...
云炬Android开发笔记 15评价晒单功能实现（自定义评分控件和仿微信自动多图选择控件）
阅读目录 1. 晒单评价 1.1 点击页面跳转的实现 1.2 自定义评价订单的布局实现 1.3 星星布局的实现 2. 仿微信自动多图及删除控件 2.1 属性值及控件的定义 2.2 图片初始化方法onM ...
云炬Android开发笔记 13购物车，订单，支付功能开发（包含支付宝支付和微信支付）
阅读目录 1.购物车UI编写 1.1 购物车布局 1.2 recycleView中的item的布局 2. 购物车数据结构分析.解析与转化 2.1 解析的数据 2.2 数据的转化 2.3 数据适配器的 ...
云炬Android开发笔记 10主界面-首页UI与数据解析器开发（RecyclerView）
阅读目录 1.创建首页UI 1.1 检查依赖是否存在 1.2 布局 1.3 控件查找 2.首页下拉刷新实现 2.1[初始化] 2.2 封装刷新功能 2.3 加载数据的处理 3. 首页数据结构分析 3. ...
云炬Android开发笔记 5-8文件下载功能设计与实现
5.文件下载功能设计与实现 [说明]比较复杂: [增加参数] [新建downloadhandler]新建下载处理类: [使用异步的下载方法] [file工具类]没有讲解,课下编写的 1 package ...

最新文章

热门文章