vue做的h5项目在ios手机上打开是空白_在iOS开发中使用Safari调试WKWebView

最新推荐文章于 2023-11-24 14:43:35 发布
最新推荐文章于 2023-11-24 14:43:35 发布
阅读量1.9k 收藏 1
点赞数
文章标签： vue做的h5项目在ios手机上打开是空白 内置h5 调用safari系统浏览器打开
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39676979/article/details/111291438
版权
在iOS设备的WKWebView中遇到Vue构建的H5页面显示问题时，可以利用Safari的Web Inspector进行远程调试。首先在iPhone的Safari设置中开启“网页检查器”，然后在Mac上Safari的高级设置中显示开发菜单。通过USB连接手机和电脑，打开Safari的开发菜单，选择设备上的网页进行调试。
摘要由CSDN通过智能技术生成

在开发一个h5页面的时候，使用浏览器可以很方便的进行调试，检查元素，检查请求。当页面放到WKWebView里之后，我们也可以借助safari进行页面调试，下面介绍一下大概流程。

操作步骤

01

配置手机

  1.  打开手机设置里的“Safari浏览器”

  2. 下滑到最下面找到“高级”

  3. 打开“网页检查器”

                     5cd92af391c57dcde2f10c0952f5c6b2.png

692083c2a3677b418152e4d37619e329.png

02

配置Mac

  1.  打开电脑上的Safari浏览器
  2. 选择菜单栏Safari浏览器打开偏好设置，或者快捷键command+, 进入
  3. 选择“高级”选项卡，勾选“在菜单栏中显示开发菜单”

最低0.47元/天 解锁文章
weixin_39676979
关注
vue 项目 iOS WKWebView 加载
12-03
1、首先让前端的同事打一个包（index.html,static文件包含css、资源文件、js等）导入项目； :warning: 注意： 把index.html放入项目根目录下，command+n创建一个资源文件.bundle，资源文件里也的包含一份 index.html 下面开始代码： 懒加载WKWebView 引入#import <WebKit> #import <WebKit> 继承 WKNavigationDelegate,WKUIDelegate, - (WKWebView *)wkWebView{ if (!_wkWebView)
H5：解决Vue在IOS13上页面回退不会刷新的问题
KWMax
02-14 2643
场景描述 vue搭建的多页面应用项目，使用go(-1)回退至前个页面。 正常的话，回退后会刷新前个页面，各个生命周期钩子函数触发。 然而，在Android和ios13以下是正常的，到了ios13就不行了。 解决方案 由于项目为多页面应用，无法通过Vuex状态状态解决该问题，因为多页面应用创建了多个vue实例。 同理，尝试了storage监听、evenbus也无法解决。 问题原因...
【仅为记录】vue的H5项目在IOS上打开白屏问题
shaoyahu的博客
07-25 1828
仅为记录 , vue的H5在IOS打开白屏
vue在电脑运行成功，手机运行显示空白的原因
qq_49416650的博客
03-11 2126
vue3，项目在手机浏览器运行空白，删除router多余路由
h5页面在安卓机上适配没有问题，ios页面数据不显示的原因
田雅雯的博客
07-11 4468
1.日期类型的计算（ios new Date（不能存在-））界面运用了大量的日期类型的计算，当我们用JavaScript实例化一个日期对象时，我们可以这样用:var date =new Date(); 上面这段代码是获取当前日期，这段代码在Firefox、Chrome、Safari浏览器中都可以运行。但是如果我想根据字符串获取日期var date =new Date("2018-09-07 08:...
vue 微信分享回调iOS和安卓回调出现错误的解决
10-14
在开发基于Vue.js的微信H5页面时，微信分享功能可能会遇到一些特定的挑战，特别是在iOS和Android设备上。本文将深入探讨如何解决Vue微信分享回调在iOS和Android上遇到的错误。 首先，为了实现微信分享，我们需要在...
海康威视的H5playerV2.0.0开发指南_20210805145842_20210918155600.pdf
12-14
对于其他浏览器，如IE和iOS Safari，高级模式可能不支持。普通模式在大部分浏览器中都能运行，但H265解码在某些浏览器上可能不可用。 解码性能： 在不同配置的硬件上，如I7_8700K、I5-9400F、I3-8100搭配RTX2080、...
iOS 通用链接（Universal Link）配置详解
01-06
在iOS9以前，对于各种浏览器，Safari中唤醒app的需求，我们通常是只能使用scheme的方式。 为什么要突然改用通用链接的配置方式？ 我们的项目中唤起第三方app一般是通过配置对应的URL Scheme的方式使用的，微信SDK的...
vue h5移动端禁止缩放代码
10-16
在讨论Vue H5移动端禁止缩放的问题前，首先要了解移动设备上的缩放是如何发生的。在移动浏览器中，默认情况下，用户可以通过双指开合来缩放页面，这对于提高用户体验有一定的帮助。但有些场景下，开发者可能出于设计...
iOS11 WKWebView 无法加载内容的解决方法
08-28
主要介绍了iOS11 WKWebView 无法加载内容,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于H5页面在ios上打开，页面空白的问题
weixin_44594850的博客
03-11 3158
关于H5页面在ios上打开，页面空白的问题 这个问题发生在一个永不升级的用户身上 机型：iPhone X 系统：ios 11.2.6 问题描述：打开链接可以显示页面的标题，但是页面空白，没有走任何接口 时间：2021年3月    产生这种原因真的很难复现，2021年了，我要怎么找到一个系统是11的iphone，也不是没想过把自己手机降级，但是又麻烦又不安全。    所以下载了XCode，找到了对应机型和系统，浏览器地址栏输入地址，回车。。。果然是白
Safari浏览器兼容性问题处理
Hzwdddd的博客
01-07 7989
前言 作为一名菜鸡前端，我经常被safari的浏览器兼容性折磨，所以在此做一个曾解决过的兼容性问题总结，给日后不了解如何处理兼容性问题的前端同学提供一个思路。 低版本IOS Safari浏览器不兼容ES6语法 这是我首次跟safari浏览器打交道，在跟别的公司对接H5页面的时候发现的问题，他们的app最低可支持ios10的系统安装，他们的测试在用ios11.2的系统打开我们的H5页面时便出现了白屏，身边的同事也都没有用低版本的ios的，同时我也不知道页面报的是什么错误，此时一度陷入困境，在不清楚问题的情况下
解决H5、vue等项目在微信内置浏览器，微信端、ie某些浏览器打开白屏问题
zxo_apple的博客
03-26 3383
问题描述： 微信公众号通过链接打开vue页面遇到白屏问题，通过排查，发现是某些微信浏览器版本过低导致，而此时项目中使用到了es6，es7等语法，导致浏览器无法解析 解决方法： // 1.安装bebel进行es6转es5 npm install babel-preset-es2015 同时在根目录下添加.babelrc文件，配置如下 { "presets": [["@babel/preset-env", { "modules": false }]], "plugins": [] } 此时可能会报错
关于ios和android webview调试vue项目的相关问题
gw6601的博客
06-01 1004
meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests”> 将http链接提升到https。3、如果本地vue项目是带https的请求，要记得实现https证书验证代理(调试用-证书全部允许，正式环境请按情况处理)3、如果本地vue项目是带https的请求，要记得实现https证书验证代理(调试用-证书全部允许，正式环境请按情况处理)2、wkwebview 请求。2、webview 请求。
android 5.1 App内打开vue H5页面为空白
supremeJacob的博客
09-09 2476
android 5.1 App内打开vue H5页面为空白原因解决方法心得 原因 低版本的安卓系统浏览器不支持axios，所以打开空白 解决方法 1、安装 es6-promise 依赖 cnpm i es6-promise 2、在封装axios的文件中使用该依赖的polyfill()方法（原理应该就是将axios转成低版本可以识别的请求方法） require("es6-promise").polyfill(); 心得 太难啦，一开始还以为是VUE优化没做到位，用谷歌浏览器lighthouse进行了测评，
H5项目在ios 系统版本12.0中打不开的情况
最新发布
insist_life的博客
11-24 1084
背景：最近做了一个H5项目，主要是vue3+vite等技术栈来写的；3、知道了可能是某些高阶语法在ios12中不兼容，那当时就想着把没有babel成功的语法手动降成es5的，但是全局检索发现这些语法都不是开发者中的代码，而是官方的写法，我担心我的水平不够，改了一处导致整个项目崩掉，索性就放弃了这个写法；2、在工具引入后，在测试环境中，我们发现控制台中没有报任何错误，然后就去看看network中的静态资源加载，发现有几个js、css文件资源没有加载，然后又在百度、CSDN上转了半天，找到一篇博主写的文章。
vue3+ts写的H5页面在app中引入显示空白
l_sss2019的博客
08-21 217
开发了一个H5页面嵌入到APP中，有的手机能显示，有的手机不能显示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值