[移动端开发]到底什么是WebView?

移动端开发中的WebView到底是什么?

前言:移动端开发的童鞋应该都听说过一个名词 WebView,那么到底什么是WebView?今天我们来讲一下什么是WebView吧

一、WebView到底是什么

  • WebView,直译是网页视图,是一个基于webkit内核的,用于显示网页的控件,具备渲染Web页面的功能。Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome。

  • WebView可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的,比如,uni-app、Hybrid app等

二、这么玩的原因

1. 一次开发,多系统适配,节省人力成本和时间成本。
  
  用h5开发的内容页面,跨平台。你想想,无论你用的安卓还是苹果,你的淘宝app里都是H5页面。 也就是一次开发,多系统适配。是不是节省了人力成本和时间成本?
  
 如果不用混合开发这种方式,就得找安卓工程师开发安卓端的,苹果ios工程师开发苹果的,需要开发两次——是不是很麻烦并且老板多出一倍工资啊……

2. Web更新方式为线上即时更新,不用下载安装补丁包。
  
  你想想,你玩王者或吃鸡吗?这些游戏里的游戏内容无疑都是原生开发的,每次更新你都得先下载安装包吧?当然,打开游戏经常会有一些类似活动公告、说明公告等一些窗口,这些可能也是由WebView嵌入的Web页面。也就是说,原生app里嵌入的Web内容所占比例可大可小,根据需求,对于适合WebView的模块,我们就可以选择用WebView实现它。
 
 而WebView中嵌入的网页更新需要下载包吗?——更新后的内容即时上线,根本不需要。这样对于用户来讲就很舒服啊。

3. H5性能不断提高。
  
  实际上,h5页面的交互、渲染性能肯定是比不上原生的—— 但是,h5技术进步快,加上4g网络的普及化(5g时代马上也来了),性能这一块就逐渐不再成问题了——典型的案例就是电商类app,性能差距基本看不出来,用户还是很舒服滴。

当然,像游戏啥的,牵扯到渲染引擎性能的问题,对于这点,Web渲染引擎还是非常勉强的。 ——因为性能比起安卓原生或ios原生来讲,太差。

三、webview的作用

  • 显示和渲染Web页面
  • 直接使用html文件(网络上或本地assets中)作布局
  • 可和JavaScript交互调用

WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

如何使用

转自: https://blog.csdn.net/qq_36252044/article/details/77993297

原文地址

https://www.cnblogs.com/JQstronger/p/WebView.html

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在WebView实现移动端适配,您可以采用以下方法: 1. 使用CSS媒体查询:通过在WebView加载的网页中使用CSS媒体查询,根据设备的屏幕宽度或设备类型应用不同的样式。您可以根据不同的设备屏幕大小和方向,为不同分辨率的设备提供适当的样式和布局。 2. 使用Viewport元标签:在WebView加载的网页的头部添加Viewport元标签来控制页面在移动设备上的显示。例如,使用以下元标签来设置页面宽度与设备宽度一致,并禁用缩放: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 3. 使用rem或vw/vh单位:使用相对单位rem或vw/vh来定义页面元素的尺寸,以便根据设备屏幕大小进行适配。例如,将根元素的字体大小设置为相对于设备宽度的比例,并在样式中使用rem单位来定义其他元素的尺寸。 4. 使用CSS框架或库:考虑使用移动端CSS框架或库(如Bootstrap、Vant等),这些框架提供了响应式布局和移动端样式组件,可以方便地进行移动端适配。 请注意,WebView加载的网页中的CSS和JavaScript代码可能需要根据具体情况进行调整和优化,以确保在不同设备上获得良好的用户体验。 以上是一些常用的方法来实现WebView页面的移动端适配。根据您的具体需求和开发情况,可以选择合适的方法来适应不同的移动设备。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值