Webview

场景在微信小程序开发中，应用小程序web-view组件能够在小程序中嵌入一个H5利用。如果在公众号曾经开发实现了一个网页，之后又想在小程序中也开发一个雷同的利用，就能够间接应用webview组件间接套用一个已公布的公众号页面节俭很多开发成本。当有差异化性能时就能够通过微信sdk的接口进行以后是否小程序/公众号的判断，而后进行webview新页面的开发。 我的公众号网页是Vue+iView写的，小程序比较简单因为外围逻辑只是与webview进行通信，所以是原生编写。本篇次要解说应用webview遇到的一些问题解决办法以及调起领取、下载性能。简略建设一个原生小程序我的项目构造： 退出webview首先建设一个homepage.wxml，内容次要是一个webview组件嵌入公众号页面https://test.xxxx.com/wxgzh，传入openid和appid用于外部传递给生成订单的后端接口，ver参数能够保障页面不缓存(最新的页面)： <!--index.wxml--><view class="container"> <web-view src="https://test.xxxx.com/wxgzh/?someid=38127&openid={{openid}}&appid={{appid}}&ver={{ver}}#/index"></web-view></view>在首页加载时调用官网wx.login接口申请用户登录小程序，登录后调取后端的登录接口去获取openid最终传递到webview中。homepage.js //homepage.jsconst app = getApp()Page({ data: { ver:'timesp', openid:'', appid:'' }, onLoad: function() { const accountInfo = wx.getAccountInfoSync(); console.log(accountInfo.miniProgram.appId, '小程序 appId') this.setData({ ver:new Date().getTime(), appid:accountInfo.miniProgram.appId, }) this.doLogin(); }, getLoginData(code){ let that = this; wx.request({ method:'post', url: app.globalData.baseUrl+'wx/wx/user/login', data: { data:{ appId:this.data.appid, code: code }, token:'' }, success (res) { console.log('获取openid胜利',res) that.setData({openid:res.data.data.openid}); }, fail(res){ console.log('获取openid失败') } }) }, doLogin:function(){ let that = this; wx.login({ success (res) { if (res.code) { //发动网络申请 that.getLoginData(res.code) } else { wx.showToast({ title: '登录失败！', }) console.log('登录失败！' + res.errMsg) } } }) }})给小程序加返回按钮到这里其实是曾经实现能够在小程序中关上公众号页面了，然而有个问题，当webview页面在外部进行多层跳转时，想返回上一层发现微信是没有明确的返回按钮的，影响体验。解决办法是在公众号网页外部本人实现一个公共有返回按钮的TopBar组件，然而咱们公众号页面是不须要这个TopBar的。有一个解决办法是创立一个两头者空页面作为小程序的初始页面index.js，当页面加载时立刻跳转到实在的首页homepage，这样做就能够强制让小程序显示出返回按钮了：index.js ...

阐明：本文小程序专指 微信小程序iphonex: 实指iphonex及后续刘海屏机器平安区域: 本文特指底部平安区域要做的事件如何在小程序webview加载h5页面以及应用webview的益处本文不做赘述，文本次要解决为了解决：间接关上h5页面中能够失常适配iphonex平安区域，待h5嵌入到小程序的webview中后不起作用，次要解决h5页面在小程序webview中适配iphonex的问题。 问题体现h5独自页面浏览时候，能够适配iphonex的底部平安区域（左图），嵌入小程序后适配有效（右图仅h5示例） 网上查看了解决方案大略有： 在小程序里判断以后是否为iphonex，而后将参数拼接到url上，在h5里承受参数，独自减少一个款式，如iphonex-fix.iphonex-fix { padding-bottom: 34px/64rpx;}通过媒体查问，判断以后设施尺寸来确定@media only screen and (min-device-width: 375px)and (max-device-width: 415px) and (min-device-height: 812px) and (max-device-height: 897px) and (-webkit-min-device-pixel-ratio: 2) { .iphonex-fit { padding-bottom:34px; }应用苹果官网推出适配计划css函数env()、constant()来适配 （举荐），具体实现可参考https://www.cnblogs.com/cangq...@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { @action-button-height: 60px; .my__container { padding-bottom: calc(~"@{action-button-height} + constant(safe-area-inset-bottom)"); padding-bottom: calc(~"@{action-button-height} + env(safe-area-inset-bottom)"); } .my__action { padding-bottom: calc(~"@{action-button-height} + constant(safe-area-inset-bottom)"); padding-bottom: calc(~"@{action-button-height} + env(safe-area-inset-bottom)"); }}本文也是在毫不犹豫的抉择来 3种解决方案，嵌入小程序后发现的，问题点在于在h5独自显示失常，放到微信开发者工具中不失常，webview又无奈像chrome浏览器进行debugger。迫于交付压力，改用了第2种计划，然而又甘心啊。。问题的转折点在于偶尔发现最新版的开发者工具，在webview页面中多了一个debugger按钮，点开发现居然能够调试嵌入的h5页面了 解决形式通过排查发现，通过第三种办法写的css，在小程序下是能够失效的，然而因为款式优先级问题被笼罩掉了。解决方案就是在反对平安区域的机型上，减少css权重，在外层嵌套了my-wrap @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { // 减少class权重 .my-wrap { @action-button-height: 60px; .my__container { padding-bottom: calc(~"@{action-button-height} + constant(safe-area-inset-bottom)"); padding-bottom: calc(~"@{action-button-height} + env(safe-area-inset-bottom)"); } .my__action { padding-bottom: calc(~"@{action-button-height} + constant(safe-area-inset-bottom)"); padding-bottom: calc(~"@{action-button-height} + env(safe-area-inset-bottom)"); } }}

原生 WKWebView 在独立于 app 过程之外的过程中执行网络申请，申请数据不通过主过程，因而在 WKWebView 上间接应用 NSURLProtocol 是无奈拦挡申请的。 然而因为 mPaas 的离线包机制强依赖网络拦挡，所以基于此，mPaaS 利用了 WKWebview 的暗藏 api，去注册拦挡网络申请去满足离线包的业务场景需要，参考代码如下： [WKBrowsingContextController registerSchemeForCustomProtocol:@"https"]然而因为出于性能的起因，WKWebView 的网络申请在给主过程传递数据的时候会把申请的 body 去掉，导致拦挡后申请的 body 参数失落。 在离线包场景，因为页面的资源不须要 body 数据，所以离线包能够失常应用不受影响。然而在 H5 页面内的其余 post 申请会失落 data 参数。 为了解决 post 参数失落的问题，mPaas 通过在 js 注入代码，hook 了 js 上下文里的 XMLHTTPRequest 对象解决。 通过在 JS 层把办法内容组装好，而后通过 WKWebView 的 messageHandler 机制把内容传到主过程，把对应 HTTPBody 而后存起来，随后告诉 JS 端持续这个申请，网络申请到主过程后，在将 post 申请对应的 HttpBody 增加上，这样就实现了一次 post 申请的解决。整体流程能够参考如下： 常见问题通过下面的机制，既满足了离线包的资源拦挡诉求，也解决了 post 申请 body 失落的问题。然而在一些场景还是存在一些问题，须要开发者进行适配。 mPaaS 容器和三方容器混用导致三方容器申请 body 失落1.1 问题场景典型的场景，是在 App 内同时集成了多个 WKWebView 容器，常见的问题景象如下：关上 mPaaS 容器后在关上三方的 WK 页面，三方 WK 页面内的 post 申请 body 参数失落。 ...

前言随着微信小程序的广泛应用，越来越多的商家抉择将营销营垒抉择迁徙到了小程序中，但受其小程序体积限度的影响，不可能齐全满足商户的要求，应运而生的web-view组件很好的解决的这一问题。一方面内嵌web-view可能间接运行在小程序中，大大减少了商户的开发成本，另一方面可能实现小程序与h5的跳转，有良好的扩展性，不便商户多端间引流。 一、web-view内嵌h5与传统小程序比照通过查找相干材料发现，内嵌web-view和微信小程序在离线能力、页面切换体验、二次渲染，操作响应和开发灵活性上有如下比照，在不同场景下可能性能上有些许出入，仅供参考。 /内嵌web-view微信小程序离线能力低高页面切换体验中高二次渲染高低操作响应高低开发灵活性高低表格起源：https://segmentfault.com/a/11...从上表中能够比照出 H5 相较于小程序的优缺点，开发者能够依据理论须要抉择。此外，应用web-view还有以下长处：己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆比方你是某门户网站，须要辨认本人小程序上的用户与网站用户的关系，能够通过三种办法绑定关系，公众号，小程序原生，小程序web-view内嵌跳转三种办法。 内嵌H5的富文本，缩小反复开发比方你是门户网站，社区，以往有大量的新闻和帖子，外面带了各种css款式的富文本，音视频自定义的点击事件等，小程序的原生组件可能无奈兼容，这时候间接内嵌这些H5新闻，将会大大降低开发成本。 热更新，缩小公布审核内嵌H5能够缩小频繁提交小程序审核，商户只须要从新公布h5的版本，就能够更新内嵌web-view的内容。 二、web-view小程序配置2.1 配置域名业务域名中配置的就是小程序以及 H5 和 H5 中援用 iframe 的域名。如果 H5 中有内嵌的 iframe 也要配置进去，须要服务端进行配合，将校验文件搁置在将要嵌套的业务域名的根目录。 2.2 根底库抉择web-view 要在根底库1.6.4以上的版本库能力应用，微信官网统计根底库在1.6.4+ 的覆盖率已达 95% 以上，这个指标能满足产品的需要。 2.3 h5引入微信jssdkweb-view要在微信sdk引入之后，微信sdk版本要求至多1.3.2，其中蕴含了h5和小程序间接的通信办法。 <script type="text/javascript" src='//res.wx.qq.com/open/js/jweixin-1.4.0.js'></script>2.4 web-view和小程序间通信官网给出了两种通信办法。 postMessage 通信 在 H5 中须要先用 wx.miniProgram.postMessage 接口，把须要分享的信息，推送给小程序。 在用户点击了小程序后退、组件销毁、分享这些非凡事件之后，小程序页面通过 bindmessage 绑定的函数读取 post 信息。设置 web-view 组件的 URL 通信 H5 跳转小程序：<view> <web-view src="{{url}}" ></web-view></view// h5中跳转小程序navigateToWeixin() { wx.miniProgram.navigateTo({url: '/pages/shop/index'});}// 小程序跳转h5--第一步<view> <web-view src="{{url}}" ></web-view></view>// 小程序跳转h5--第二步：在小程序的 js 文件中设置通过 URL 以问号传参的形式传入参数到 H5中if(!option.page){ this.setData({ url: `${this.data.url}?${test}` });} else { this.setData({ url: `${this.data.url}${option.page}?${test}` });}三、内嵌web-view调试解决方案首先通过微信开发者工具关上，这里url本地调试能够跟局域网链接，开发者工具能够实时显示，如果跟的是线上链接，可能只能通过预览扫码。右键点击页面，左上角会呈现调试，能够在右图的调试器中对h5进行调试。 ...