uni-app wap2app打包M站问题总汇

uni-app wap2app打包M站问题总汇

开发环境 版本号 项目创建方式
HBuilderX HBuilder alpha 3.1.14.20210430 -

bug描述：

问题最多的是关于网站中有视频播放，安卓和IOS 都有问题，用户体验极差。

第一、iOS端懒加载失效。

新版本的LazyLoad使用IntersectionObserver API实现， IOS端会失效。

第二、IOS端 使用UIWebview内核视频播放无声音

{
  "kernel": {
    "ios": "UIWebview"
  }
}

UIWebview视频播放无声音，设置wkwebview后 有声音但是"mediaPlaybackRequiresUserAction" : true,自动播放失效。

第三.IOS端 关于IntersectionObserver API兼容性。

虽然使用 UIWebview 内核 并且 引入 polyfill

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

后勉强支持部分IntersectionObserver功能，但是 wkwebview 内核完全无效，

第四、安卓端的 Webview 视频默认图标无法去除，

安卓端视频默认图标 真的是奇丑无比，就算用默认视频封面代替，但是在播放瞬间还是要显示一下。

研究了好几天，解决办法无非就是拆东墙补西墙，没有个完美的解决方案。

运行方式：真机调试
手机型号: iphone xr
系统版本: IOS14.4.2


更多关于uni-app wap2app打包M站问题总汇的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

webview里调本地浏览器，不知道uniapp里能不能用腾讯的浏览器引擎渲染。

更多关于uni-app wap2app打包M站问题总汇的实战教程也可以访问 https://www.itying.com/category-93-b0.html


对了，差点忘了，还有wap2app 社区里有关文章提到 安卓端 可以用X5 内核，更具文章设置配置后并没什么卵用。

针对您汇总的wap2app视频播放问题，这里提供技术解决方案：

iOS懒加载失效：建议回退到传统滚动监听方案，替换IntersectionObserver，通过监听scroll事件结合getBoundingClientRect()实现懒加载，兼容性更好。

iOS视频播放问题：WKWebview下需配置"mediaPlaybackRequiresUserAction" : false启用自动播放，同时需要在视频元素添加muted属性和playsinline属性。可尝试通过用户交互事件触发视频播放。

IntersectionObserver兼容性：UIWebview已淘汰，建议全面转向WKWebview。对于不支持的API，需要实现降级方案，可参考MDN提供的兼容性polyfill。

安卓视频控件：通过CSS样式覆盖默认控件：

video::-webkit-media-controls {
  display:none !important;
}
回到顶部