首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Cordova ios Vue组件只在迁移到WKWebview后重新加载app时显示?

Cordova是一个开源的移动应用开发框架,它允许开发者使用Web技术(HTML、CSS、JavaScript)来构建跨平台的移动应用程序。Vue是一个流行的JavaScript框架,用于构建用户界面。WKWebView是iOS平台上的一种Web浏览器引擎,相比于旧版的UIWebView,它具有更好的性能和功能。

在Cordova中,当将Vue组件迁移到WKWebView后重新加载应用程序时,可能会出现组件不显示的问题。这是因为WKWebView在加载Web内容时,会更严格地执行安全策略,包括默认禁止加载本地文件和跨域资源。这可能导致Vue组件的相关文件无法正确加载,从而导致组件无法显示。

为了解决这个问题,可以采取以下步骤:

  1. 确保Cordova和Vue的版本兼容性。不同版本的Cordova和Vue可能存在兼容性问题,建议使用最新版本的Cordova和Vue。
  2. 检查Cordova插件配置。在Cordova项目的配置文件(config.xml)中,确保已正确配置相关插件,例如cordova-plugin-wkwebview-engine插件,以启用WKWebView引擎。
  3. 处理跨域资源加载问题。由于WKWebView的安全策略,可能需要在配置文件中添加相关配置,以允许加载跨域资源。具体配置方法可以参考Cordova文档或相关插件的文档。
  4. 确保Vue组件的相关文件正确加载。在Vue组件中,确保相关的HTML、CSS和JavaScript文件能够正确加载。可以使用相对路径或绝对路径来引用这些文件。
  5. 检查网络连接和权限。确保设备具有可用的网络连接,并且应用程序具有必要的权限来加载Web内容。

推荐的腾讯云相关产品:腾讯云移动应用开发平台(https://cloud.tencent.com/product/madp)

以上是针对为什么Cordova ios Vue组件只在迁移到WKWebview后重新加载app时显示的问题的解答。希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从Mobile8.0平台与微应用剖析RN组件生命周期

H5微应用:使用HTML5技术开发的微应用,常见的开发框架有Vue,React等,H5-微应用按加载方式,还可以分为在线H5微应用和离线H5微应用。...Android平台使用其WebView,iOS上使用WKWebView。Android和iO实现技术上虽略有不同,但其本质基本上是一样的。我们以Android端的实现方式为例进行说明。...Android平台使用其WebView,iOS上使用WKWebView。Android和iO实现技术上虽略有不同,但其本质基本上是一样的。我们以Android端的实现方式为例进行说明。...拿到门户传递过来的参数,webview通过加载微应用的url来打开对应的H5微应用,并根据参数中的配置信息将标题显示标题栏中。...H5ViewComponent组件的实例化阶段我们通过defaultProps 为其设置默认属性,如果调用openWebview传递的参数为空,微应用容器将按下面配置加载微应用。

1.1K10

Vue 全家桶 + Electron 开发的一个跨三端的应用

[x] ✅Web 应用,支持 桌面浏览器 和 手机浏览器 [x] ✅手机 App,目前支持了 Cordova 框架,支持 iOS 和 Android 两个平台 [ ] ❌手机原生 App,打算用 Weex...前言 一.关于我 我是一名全职的 iOS 开发者,非前端开发者。由于接触了 Weex 开发,从而接触到了 Vue.js。 二.为什么会写这个项目?...运行项目 cordova run ios cordova run android Cordova 生成了一个壳的 app,里面具体的内容还是读取的网页,在生成的对应的应用里面有一个... HTML5 history 模式下,router-link 会拦截点击事件,让浏览器不再重新加载页面。...前端的工程化,组件化,路由,MVVM,分别和 iOS 这边各有哪些优缺点,相互可以学习些什么。(感觉给自己挖了一个大坑) ?

2.2K70

Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

不过苹果在 iOS8 以后推出了 WKWebView加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,两个平台上支持同一套 API。...js 的交互; 注意: 大多数App需要支持 iOS7 以上的版本,而 WKWebView iOS8 才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView ,iOS8 后用...参考文章:《WKWebView 那些坑》 1. WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...于是我们找到了“为什么WebView总是很慢”的原因之一: 浏览器中,我们输入地址(甚至之前),浏览器就可以开始加载页面。...调试 APP 内的 WebView 参考文章:《前端 WEBVIEW 指南之 IOS 调试篇》 Safari-> 开发中,看到自己的设备以及 WebView 中网页,点击即可开启对应页面的

3.1K00

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

不过苹果在 iOS8 以后推出了 WKWebView加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,两个平台上支持同一套 API。...: 大多数App需要支持 iOS7 以上的版本,而 WKWebView iOS8 才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8 后用 WKWebView...WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...于是我们找到了“为什么WebView总是很慢”的原因之一: 浏览器中,我们输入地址(甚至之前),浏览器就可以开始加载页面。...全局 WebView 客户端刚启动,就初始化一个全局的 WebView 待用,并隐藏,当用户访问了 WebView ,直接使用这个 WebView 加载对应网页,并展示。

2.3K20

Hybrid App 应用开发中 9 个必备知识点复习

不过苹果在 iOS8 以后推出了 WKWebView加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,两个平台上支持同一套 API。...js 的交互; 注意: 大多数App需要支持 iOS7 以上的版本,而 WKWebView iOS8 才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8...WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...于是我们找到了“为什么WebView总是很慢”的原因之一: 浏览器中,我们输入地址(甚至之前),浏览器就可以开始加载页面。...全局 WebView 客户端刚启动,就初始化一个全局的 WebView 待用,并隐藏,当用户访问了 WebView ,直接使用这个 WebView 加载对应网页,并展示。

2.7K20

前端-小程序开发实践总结

但是某些机型上1rpx会无法显示。可以用H5的方式实现1px效果。 iphoneX吸底按钮的适配,可以用媒体查询获取wx.getSystemInfo获取机型。...返回更新页面A的数据,通常有两种方式来实现(我司采用了方案二): 页面A监听onShow事件,onShow事件触发无脑更新页面数据。 通过EventBus来实现跨页面通信。...后期微信官方API支持组件化编程,我们逐步把一些比较核心,体积较大的组件用原声API重构了。 mpvue 由美团团队开发,mpvue和wepy一样也是小程序上提供了类vue.js的开发体验。...作为后来者,抢占了很多wepy的市场份额(ps:我们团队近期也考虑从wepy迁移到mpvue)。...预加载webview 预加载webview,微信会预加载多一个wkwebview(ios平台)放后台,用户打开小程序时省去初始化wkwebview时间。

1.5K20

Hybrid App 应用开发中 9 个必备知识点复习

不过苹果在 iOS8 以后推出了 WKWebView加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,两个平台上支持同一套 API。...: 大多数App需要支持 iOS7 以上的版本,而 WKWebView iOS8 才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8 后用 WKWebView...WKWebView 白屏问题 WKWebView 实际上是个多进程组件,这也是它加载速度更快,内存暂用更低的原因。...于是我们找到了“为什么WebView总是很慢”的原因之一: 浏览器中,我们输入地址(甚至之前),浏览器就可以开始加载页面。...全局 WebView 客户端刚启动,就初始化一个全局的 WebView 待用,并隐藏,当用户访问了 WebView ,直接使用这个 WebView 加载对应网页,并展示。

2.3K30

H5 手机 App 开发入门:技术篇

二、WebView 控件 讲解具体的技术栈之前,大家需要知道,不管什么技术,最终 App 里面显示网页,一定需要一个网页引擎,这样才能解析网页。...注意,不同系统的 WebView 控件名称不一样,安卓系统就叫 WebView,iOS 系统有较老的 UIWebView,也有较新的 WKWebView,作用都是一样的,差异在于功能的强弱。...注意,Xcode 支持 Mac 系统,不支持其他系统。 ? ? 安装完成,打开新建一个项目,类型是单视图 App,然后系统会询问一些项目参数和储存位置,这里就不详细说明了。 ? ?...视图加载成功(viewDidLoad()),WebView 再去加载外部网页(红框部分)。 然后,就可以查看代码运行结果。...完成以后工具栏上点击运行按钮,就可以运行代码查看效果了。 ? ? 如果一切正常,就可以让 Android Studio 打包,生成 App 的二进制安装文件。

6.7K41

几款移动跨平台App开发框架比较

学习路线陡峭; Ionic 框架相比于原生的 Cordova 有所差异,Cordova 某些官方插件可能不适用于Ionic; React Native 优点: 能够Javascript和React的基础上获得完全一致的开发体验...运行体验更好;(组件,api与微信小程序一致;兼容weex原生渲染) 通用技术栈,学习成本更低;(vue的语法,微信小程序的api内嵌mpvue) 开放生态,组件更丰富; -支持通过npm安装第三方包...ARM代码运行 以达到跨平台的高质量用户体验。...可以分为本地页面,也可以使用网络页面(有加载条) 混合开发,H5套壳的形式开发,内容升级可以直接修改H5页面 混合开发,可以很容易实现H5套壳的形式 主要开发和知识点 Vue.js开发 Html+js+...wex5 AppCan APICloud 底层 基于vue.js,通过自研编译器编译 基于cordova开发,cordova开源,暂时没有看到可以直接继承原生SDK 自身封装底层,闭源,无法直接使用原生

7.8K20

iOS开发】从 UIWebView 到 WKWebView

为什么现在是时候从 UIWebView 迁移到 WKWebView 了: 截止到我写这篇文章的时候,据 mixpanel 的数据,iOS 9 占有率已达 58.55%,iOS 8 占有率达到了 34.78%...所以从现在开始,再开发 App 兼容 iOS 8 和 iOS 9 两个版本就可以了(如果你的产品对覆盖率要求不是很苛刻的话)。...WKWebViewiOS 8 之后才有的 WebKit 中的内容,所以之前我们要同时兼容 iOS 7 和 iOS 8 的时候,可以推辞说 UIWebView 和 WKWebView 一起做太麻烦了...injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true) // 这里的 AtDocumentEnd 字段是指网页中的内容加载完毕再插入...JS 脚本,你也可以选择 AtDocumentStart, document element 刚刚创建就插入脚本,看具体需求 let config = WKWebViewConfiguration

1.8K20

指尖前端重构(React)技术分析报告

一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。...而加载的时候,不管那些代码有没有执行到,都会下载下来并进行加载,造成性能浪费,这一点显然web端很重要,而在cordova中是将js代码直接打包在本地,等于跳过了下载步骤但仍然会有加载过程。...通过router中写require.ensure代码并在webpack中相应地修改配置即可将js分成多个文件,需要加载对应的js文件,实现按需加载。...比如cordova中某些插件安装export函数或者变量供引入使用,因为一开始是分离的,create-react-app中并找不到这些变量,就造成build的时候产生变量undefined的错误,...尽管最终放到cordova工程中可以找到变量并正常运行,但在第一步react开发控制台报一堆error会妨碍调试,影响开发体验。

5.4K30

关于 iOS 10 中 ATS 的问题

你依然可以添加NSAllowsArbitraryLoads为YES来禁用 ATS,不过如果你这么做的话,需要在提交 app 进行说明,为什么需要访问非 HTTPS 内容。...如果你的 app 支持 iOS 10,并且有用户可以自由输入网址进行浏览的功能,或者是在线视频音频播放功能的话,简单地加入NSAllowsArbitraryLoadsInWebContent,并且将组件换成...简单说,iOS 9 看NSAllowsArbitraryLoads,而 iOS 10 会先看NSAllowsArbitraryLoadsInWebContent。...ATS 设定使用的组件iOS 9 HTTPiOS 10 HTTP备注 NSAllowsArbitraryLoads: NOUIWebView❌❌ WKWebView❌❌默认行为 URLSession❌❌...现在的 beta 版中,似乎只要存在NSAllowsArbitraryLoadsInWebContent,不论其设置如何,WKWebView都不能加载

2.2K20

问题记录

--more--> 图片黑色的问题 测试反馈的是,拍摄了一张图片,上传之后,安卓可以加载出来,iOS显示是黑色,其他图片正常; 最开始笔者以为是 SDWebImage加载这张图片失败了,断点调试,发现图片加载成功并没有失败...这张图片的 Mac OS 和 iOS 中渲染都是黑色的。...WKWebview加载xlsx 文件,预览不了的问题 笔者这边的情况是,打开了一个网页,网页中的有个按钮,点击之后的链接,正常在电脑浏览器上打开是下载, iOSWKWebview中打开是预览。...笔者最开始以为是 WKWebview 加载 xlsx 文件的问题,查了很多方法尝试均失败。...于是怀疑是摄像头坏了一颗, 默认是使用正常的摄像头拍摄,当拍远景或者缩放调到2倍使用了广角的镜头,用户的应该是正常摄像头坏掉了,而另一颗远景的是好的。 但是为什么企业微信的是好的?

1.2K20

Weex原理之带你去蹲坑

所以打开每个页面加载对应的js文件,这很好的减小了需要加载的文件大小,提高了dom的解析效率。...原生开发也许对vue接触不多,跨界有时候很容易望而却步,其实Vue本身,就是容易上手的框架,类似MVVM的模式(类似Android的DataBinding),很容让人理解上手,简单的说,你关心数据,然后绑定到显示的控件...为什么说起它呢,是因为Weex中,你可以看到很多cordova的影子,类似weex platform add android、weex plugin add xxx都有些cordova的味道。...如下图,你如今依旧可以Weex中找,寻找到cordova的存在感。 [cordova残留] 3、其他推荐   Vuex 和 Vue-Router ,居家旅行必不可少。...它的用处在于可以多个vue组件间,方便的同步数据,更新界面。 Vue-Router也是用于单页面下,指定跳到某个页面的管理工具,路由嘛,浅显易懂。

1.3K30

第二十一期:基于Taro的多端(小程序+H5)开发实践

多端开发方式 混合开发 cordova/uniapp 原生体验开发 flutter/react-native 优缺点 优点:可以快速开发跨ios和andriod两端的应用。...渲染层IOS中使用【WKWebView】进行渲染,Android中使用【chromium定制内核】进行渲染。 因此,开发过程中对这些差异有所了解,能够预判这些差异给我们带来的影响。...【冷启动】: 如果用户首次打开或小程序被微信主动销毁再次打开的情况,此时小程序需要重新加载启动。 这里对我们造成的影响主要是:【数据请求时机】。...小程的热启动调用数据请求可能会遇到以下问题:小程序的onShow函数,页面每次展示都会请求数据,如果请求的数据是列表。手机息屏,重新点亮屏幕会出现重复数据,需要对这个现象进行处理。...比如实名状态判断 其他扩展 跨框架组件 开发真正的跨端组件 虽然Taro支持将代码打包成不同的端,同时也有相应的trao-ui组件库,但是该UI库目前支持react框架,假如我们使用vue进行迭代,则需要引入基于

3.5K42

Weex原理之带你去蹲坑

所以打开每个页面加载对应的js文件,这很好的减小了需要加载的文件大小,提高了dom的解析效率。...原生开发也许对vue接触不多,跨界有时候很容易望而却步,其实Vue本身,就是容易上手的框架,类似MVVM的模式(类似Android的DataBinding),很容让人理解上手,简单的说,你关心数据,然后绑定到显示的控件...为什么说起它呢,是因为Weex中,你可以看到很多cordova的影子,类似weex platform add android、weex plugin add xxx都有些cordova的味道。...如下图,你如今依旧可以Weex中找,寻找到cordova的存在感。 ? cordova残留 3、其他推荐 Vuex 和 Vue-Router ,居家旅行必不可少。...它的用处在于可以多个vue组件间,方便的同步数据,更新界面。 Vue-Router也是用于单页面下,指定跳到某个页面的管理工具,路由嘛,浅显易懂。

1.3K20

WKWebView 那些坑

1、WKWebView白屏问题 WKWebView自诩拥有更快的加载速度,更低的内存占用,但实际上WKWebView是一个多进程组件,Network Loading以及UI Rendering在其它进程中执行...请求,request header中带上cookie并重新loadRequest。...request3,最后将加载结果返回WKWebView; 5、WKWebView 页面样式问题 WKWebView适配过程中,我们发现部分H5页面元素位置向下偏移或被拉伸变形,追踪发现主要是H5页面高度值异常导致...通过查阅相关资料,这个bugios9的几个系统版本上出现,苹果后来fix了这个bug。...这个crash发生在IOS8系统上,参考apple open source,IOS9及以后系统苹果已经修复了这个bug,主要是对completionHandler block做了copy(refer

17.2K21
领券