webview 渲染有什么用 原生内嵌网页能力
webview 渲染本质就是在原生 APP 里面内置一套浏览器内核,不用跳转到外部浏览器,直接在 APP 内部把 html css javascript 网页内容绘制显示出来,核心作用就是让原生应用可以混合承载网页页面,实现原生控件和网页内容共存,是混合开发 Hybrid 方案最核心的底层能力。很多 APP 里面的活动页帮助中心协议弹窗电商详情页运营 banner,都是依靠 webview 渲染完成,它最大价值是复用前端技术,一套网页代码可以在安卓 iOS 多端 APP 里面直接加载,不用单独写原生页面,页面更新只需要修改服务器网页,不需要整个 APP 重新打包上架应用商店,大幅缩短运营页面迭代周期。同时 webview 渲染支持原生和 JS 双向通信,原生代码可以调用网页里面的方法,网页 JS 也可以唤起原生能力,比如相机支付扫码本地存储,兼顾网页灵活更新优势和原生系统能力调用能力,是现在绝大多数商业 APP 都会集成的基础组件。
核心作用分层详解
混合开发页面承载
Hybrid 混合开发的核心就是 webview 渲染,把业务页面做成网页,塞进原生 APP 容器。原生外壳负责 APP 启动权限系统基础能力,业务页面交给 webview 渲染引擎解析排版绘制。适合经常变动的业务,比如营销活动专题页,这类页面改动频繁,如果全部写原生代码,每次修改都要发版,用户还要更新 APP,webview 渲染就可以避开这个限制。
快速跨端复用前端代码
前端工程师已经写好的网页,不需要重写安卓 iOS 两套原生代码,只要在两端 APP 里面加入 webview 渲染组件,加载同一个网页地址,就能在不同系统 APP 展示一致页面。团队如果本身就有前端技术栈,使用 webview 渲染可以降低多端开发人力,不用同时维护安卓 iOS 前端三套独立代码。
动态热更新业务页面
这是 webview 渲染非常关键的优势,网页资源托管在服务器,运营人员修改页面之后重新部署,用户下次打开 webview 渲染页面就加载新版本,不需要等待应用商店审核,不用用户升级 APP。遇到紧急活动改版,文案调整,弹窗修改,都可以快速上线,对运营类业务非常友好。
原生与网页交互桥接
webview 渲染不是单纯展示静态网页,它内置 JSBridge 通信通道。网页 JS 可以通知原生去调用系统功能,比如打开相册,调用定位,调起支付,保存图片,唤起原生弹窗。原生侧也可以主动给网页传参数,比如用户登录 token,用户 ID,设备信息,让网页页面可以拿到 APP 内部登录状态,不用网页单独重新登录。
降低开发试错成本
新产品前期验证业务想法的时候,优先用 webview 渲染做页面,快速上线测试用户反馈,验证业务模型。如果后续确认业务稳定,再考虑把核心页面改成原生页面,减少前期一次性投入大量原生开发成本。
webview 渲染和原生渲染对比表
| 对比项目 | webview 渲染 | 原生渲染 |
|---|---|---|
| 开发技术 | html css js | 安卓 kotlin iOS swift |
| 更新方式 | 服务器动态更新,无需发版 | 修改代码后需要打包上架 APP |
| 性能 | 受内核影响,复杂动画略弱 | 直接调用系统绘制,性能更高 |
| 跨端复用 | 一套网页代码多端通用 | 需要分别开发安卓 iOS 两套代码 |
| 系统能力 | 通过 JSBridge 桥接调用 | 直接调用系统底层 API |
| 兼容性 | 不同系统 webview 内核有差异 | 原生渲染系统兼容性稳定 |
补充注意事项
webview 渲染虽然优势明显,但也存在短板,不同安卓机型自带 webview 内核版本不一样,会出现样式错乱 JS 兼容问题,复杂长列表重度动画游戏类页面,webview 渲染流畅度不如原生渲染。同时 webview 渲染有内存占用偏高的问题,频繁创建销毁 webview 实例容易出现内存泄漏,正式项目开发需要做 webview 复用池,缓存管理,内存优化。另外安全层面,webview 渲染如果配置不当,加载恶意网页会带来风险,正式项目一般会做域名白名单,禁用危险接口。
【常见问题】
问题 1 webview 渲染是不是就是打开外部浏览器
回答 1 不是,webview 渲染是 APP 内部内嵌内核渲染网页,不会跳转到手机自带外部浏览器,页面仍然停留在当前 APP 里面。
问题 2 webview 渲染为什么适合运营活动页面
回答 2 webview 渲染支持服务器动态更新,活动页面修改不需要 APP 发版,所以 webview 渲染非常适合频繁改动的运营活动页面。
问题 3 webview 渲染能不能调用手机相机
回答 3 webview 渲染本身不能直接调用相机,需要配合 JSBridge 桥接,由网页通知原生代码唤起相机能力,实现 webview 渲染页面调用相机。
问题 4 webview 渲染在安卓和 iOS 表现完全一致吗
回答 4 不完全一致,安卓和 iOS 底层 webview 内核不一样,webview 渲染会存在少量样式和 JS 行为差异,开发阶段需要做两端适配测试。
【免责申明】
本文内容仅作为前端混合开发技术学习参考,不同版本系统和 SDK 的 webview 渲染能力存在差异,实际项目开发请以对应官方开发文档为准。
相关阅读
-
凉拌黄瓜变蛋最正宗的做法核心是拍黄瓜搭配溏心变蛋,调味以蒜香 香醋 生抽为主,少量香油提香,突出清爽咸...浏览全文>>
-
webview 渲染本质就是在原生 APP 里面内置一套浏览器内核,不用跳转到外部浏览器,直接在 APP 内部把 ht...浏览全文>>
-
烤箱烤鸭肠推荐上下火 200 度,总时长 12 到 18 分钟,中途需要翻面一次,这个参数可以让鸭肠烤出微焦脆...浏览全文>>
-
watch5 一般指 Apple Watch Series 5,它的正式发布时间是 2019 年 9 月 10 日,在苹果秋季新品发...浏览全文>>
-
土豆回锅肉是把传统回锅肉搭配粉糯土豆同炒,肥五花肉经过煸炒出油,土豆吸满豆瓣酱和肉香,咸香带微辣,口感...浏览全文>>
-
wapi 也就是无线局域网鉴别与保密基础结构,是我国自主制定的无线局域网安全协议,作用和 wifi 里面的 wpa...浏览全文>>
-
加湿器里面优先推荐使用纯净水,其次可以选择凉白开,不建议长期直接使用自来水,核心原因是自来水里面含有钙...浏览全文>>
-
Win10 浏览器打不开,核心一般是缓存损坏 进程卡死 系统组件异常 网络配置出错 或者第三方软件冲突这几类...浏览全文>>
-
红甜菜怎么吃红甜菜的做法,常见可以凉拌 清炒 煮汤 烤红甜菜,红甜菜也叫甜菜根,肉质根外皮和内部都是紫...浏览全文>>
-
vs 是英文 versus 的缩写,核心含义是对抗对比对照,一般用来表示两个主体之间的对立比拼或者并列对比,广...浏览全文>>
- watch5 发布时间 智能手表发布信息详解
- 电暖壶里面的水垢怎么清理 家用除垢实操教程
- vivoy7 什么时候上市的 发布时间与机型背景说明
- vivoy5 语音助手怎么打开 开启调用教程
- 粘土小人偶 详细手工教程
- vivox7 都有什么功能 整机功能详细介绍
- 圆白菜炒饼丝的家常做法 干爽不粘连版本
- VGA 接口显卡与显示器常用的接口 技术详解
- 什么是电脑桌面快捷方式 原理与使用详解
- VANS 钢印在哪里 辨别鞋身钢印位置
- 人体的七大营养素是什么
- u 盘无法格式化要怎么解决 逐层修复方案
- 清炒花菜的简单做法步骤
- uva 是哪个大学 弗吉尼亚大学详细介绍
- 墨鱼仔怎么做好吃又简单 家常快手菜谱
- unny 卸妆水怎么用的步骤 详细操作教程
- touch正确发音
- todo 的三种形式 英语语法详解
- time 的用法详解
- 煲蘑菇汤的家常做法大全 鲜醇菌汤多版本教程
