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

用JS开发跨平台桌面应用,从原理到实践

原生 JavaScript 事件类似, 采用了发布/订阅(观察者)的方式, 使用内部 _events 列表来记录注册的事件处理器。...使用 webview 标签在Electron 应用中嵌入 "外来" 内容。...使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单。 上面两种方式同时拥有print和printToPdf方法。 ?...9.3 两种打印方案的选择 上面提到,使用webview和webcontent都可以调用打印功能,使用webcontent打印,首先要有一个打印窗口,这个窗口不能随时打印随时创建,比较耗费性能。...可见通信非常繁琐,使用webview进行打印可实现同样的效果但是通信方式会变得简单,因为渲染进程和webview通信不需要经过主进程,通过如下方式即可: const webview = document.querySelector

6.9K50
您找到你想要的搜索结果了吗?
是的
没有找到

使用 React Native 重写大型 Ionic 应用后,我们想分享一下这八个经验

除非,你是在写一些原生的组件,遇到一些莫名其妙地问题。 版本间差异太大,导致下游配套 开始编写 Growth 的时候,使用的 React Native 的版本是 0.42。...幸运的是,我使用原生组件比较少,因此也没有遇到一些组件不能支持新版本的问题。...如,在 Android 版里的 WebView 可以支持 allowUniversalAccessFromFileURLs,即如果我的 WebView 是通过 file 拿到的,有了这个参数就可以发起不是跨域的请求...——可以解决 WebView 的跨域问题。...对于写原生代码来说,这几乎是必备的手段。对于 WebView 来说,并不会存在太大的崩溃问题,除非使用原生组件。

1.8K60

首个hybird商业项目踩坑总结

注:该项目涉及到的技术大概分为以下几个方面,1,微信登录 2,WebView原生代码的交互 3,WebView的优化,下面也分这几个大方面进行一一说明 微信登录 微信登录的准备 准备什么,自然是开发者账号以及认证开发者资质...若为false,则该WebView不可缩放 webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件 //其他细节操作 webSettings.setCacheMode...super.onJsPrompt(webView, s, s1, s2, jsPromptResult); } } WebView原生代码的交互 Java->JS loadUrl //mJSMethodName...Webview发生崩溃时不会导致app闪退,就像第二点说的,因为Webview是在独立进程中,如果发生崩溃,主进程还安然无事,app还在运行中,没有闪退,不闪的才是健康的。...尽管有了上述的一些优化,不过原生WebView的一些不足,如兼容性、流量消耗、以及性能等诸多方面还是不能达到要求,不过腾讯提供的X5WebView算是目前比较好的解决方案了,关于X5WebView详情读者看参看腾讯官网腾讯浏览服务

1.2K10

.NET混合开发解决方案3 WebView2的进程模型

系列目录     【已更新最新开发文章,点击查看详细】   WebView2 运行时使用与 Microsoft Edge 浏览器相同的进程模型。...当WebView2应用程序使用WebView2功能时,WebView2进程组中进程的数量和存在可能会发生变化。(但是,WebView2进程组中只有一个特定的浏览器进程。)...渲染器进程的数量可能会根据以下情况而变化: 在WebView2运行时中使用站点隔离功能。请参见每帧渲染器进程-站点隔离。...如果应用程序使用多个用户数据文件夹,将为每个用户数据文件夹创建 WebView2 运行时进程的集合。   ...请参见每帧渲染器进程-站点隔离 处理进程事件和生命周期 若要对浏览器和渲染器进程中的崩溃和挂起做出反应,请使用 CoreWebView2 的 ProcessFailed 事件。

79110

开发中遇到的问题(二)

,友盟上的崩溃信息,崩溃率1%点多了,赶紧查查吧。...崩溃重现: 切换到有输入的地方,点击输入,切换输入法到手写输入法(系统的,第三方的没事),然后输入,输入一个之后,第二个字就会崩溃。...2. webView加载网页时出现了这个,NSURLConnection/CFURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9813...) 昨天给一个界面,新增一个入口,点击跳转一个网页,需要把登陆状态带到网页里,做好之后,今天提测,测试发现跳转的网页没问题,但是不能添加到购物车,点击网页下面标签中的个人中心没反应。。。...还真有不一样的地方,能够正常跳转的都是http的请求,而个人中心的本来也是http的,但是请求之后有一次重定向(自动跳转),到https的;然后就出问题了,走的webview加载失败的方法,打印的error

14770

H5小游戏的坑点小结

坑点: 1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onTouchEnded调用则是正常的,使用...方法中调用cc.audioEngine.playEffect就正常了 2) iOS中如果启用的是自动渲染模式,在支持webgl中如果启用了webgl,如果关闭电源键后等大概3秒后再进入系统然后导致应用崩溃...(原生的safari好像不会,应用切到后右时间长一些再切到前台也可能会崩溃),微信和自己写的应用都会有这个问题,所以只能改成canvas模式进行渲染,默认使用30帧即可。...崩溃的原因:应用切入到后台后,webview里面的小游戏还在调用渲染,底层会调用到opengl的相关函数,这就导致应用直接崩溃了。

87810

iOS 12.0 WebView键盘弹出,关闭后界面没有回收的问题

iOS 12.0 WebView键盘弹出,关闭后界面没有回收的问题 背景 公司有人反馈,iOS 12.0的手机上,H5页面有个地方键盘弹出了,关闭之后,再次点击输入框,没有反应了,其实是界面上移了之后,...所以导致再次点击输入框时,没有反应 修改 最开始,修改方法时,添加iOS 12.0之后,设置 contentInsetAdjustmentBehavior 为 UIScrollViewContentInsetAdjustmentAutomatic...UIScrollViewContentInsetAdjustmentAutomatic; } 于是笔者再次尝试修改: 参考iOS12 WKWebView出现input 键盘页面上顶不下移解决方法,在H5界面监听键盘弹出和收起,在收起时,对webview...故而再次修改: 笔者发现,有人给出参考方法,由H5端,监听键盘弹起和回收,然后进行处理,但是如果让H5处理,需要每个业务的H5都要单独处理,所以笔者就想,由原生监听键盘收起的通知,然后调用js的方法,代码如下...self.web evaluateJavaScript:jsStr completionHandler:nil]; } 参考 iOS12 WKWebView出现input 键盘页面上顶不下移解决方法 ios 微信webview

2.5K20

助你快速搭建一个健壮可控的WebApp

笔者也从一个WebView+H5的小菜鸟,磨炼成了中等生。   WebApp简单来讲,就是利用原生WebView承载H5的html页面,并且实现JS和原生之间的通信。   ...业务页面来源于H5,原生作为一个承载壳提供流畅性支持,能够低成本的实现跨平台的实施以及快速嵌入微信小程序、钉钉、OA等APP中。...与纯H5的App相比较,它能够更轻易的使用原生底层库,并且更加流畅;而与纯原生的相比较,它实现了跨平台,能够通过H5的特性快速嵌套进其他APP中。 核心类: ?...():重写该方法,拦截浏览器打开以及跳转时的url,可以通过拦截到的url与pre比对,实现js和原生的通信。...H5有一个通病在于在网络不流畅的时候,点击页面跳转时,因为会先请求页面html导致卡顿,整个页面没有反应,跟卡死了一样。IOS稍微好一点,Android尤为明显。

1K30

Fluttter 混合开发下 HybridComposition 和 VirtualDisplay 的实现与未来演进

对于使用过 Flutter 的开发来说,应该对在 Flutter 混合开发中,通过 PlatformView 接入原生控件的方式并不陌生,而如果你是从 Flutter 1.20 之前就开始使用 Flutter...从一个问题开始 恰巧最近一位朋友在 Flutter 2.10.1 上使用 webview_flutter 和 flutter_pdfview 测试时出现了如下的问题: attachToContext:...因为从 Flutter 2.10 开始,官方的 Plugin 如 webview_flutter 默都是使用 hybrid composition 的实现,而第三方的 flutter_pdfview...问题的原因在于:当 rasterizer 任务运行不同的线程时,GrContext 会被重新创建,从而导致 texture 变成没有初始化的状态,进而重复调用 attachToGLContext 导致崩溃...所以如果在低版本不想升级,那么可以选择所有 Plugin 都使用 virtual display 模式或者 hybrid composition 模式,比如 webview_flutter

1.1K10

干货 | 三种主流快平台技术测评,你更青睐谁?

(uni-app是双渲染引擎,webview和weex都内置了,随便开发者使用切换) 所以我们要清楚,提升性能是有代价的,你究竟想要灵活丰富的css3,还是想要固定flex模式排版,抑或是最简单但高性能的...别忘了webview的排版引擎也是世界级工程师用c写的。但通过这种方式提升性能的代价,就是布局复杂的界面时,Flutter的代码嵌套的让人崩溃。...当界面复杂时,Flutter的代码要嵌套几十层,每层的元素的json样式都和元素一起混写在dart代码里,让人崩溃。...我们知道rn和weex,也是原生渲染的,它们的性能高于webview。但同为原生渲染的,怎么会慢于Flutter呢?其实不是原生渲染慢,而是js和原生通信慢。...结论 如果你是一个资源充沛的大公司,原生App中部分不要求动态更新、也没有太多原生交互的页面,可以尝试使用flutter实现。

2.1K20

iOS下JS与OC互相调用(四)--JavaScriptCore

创建一个JSContext对象的方式有: // 1.这种方式需要传入一个JSVirtualMachine对象,如果传nil,会导致应用崩溃的。...2.2 添加JS要调用的原生OC方法。 在HMTL加载成功的回调方法- (void)webViewDidFinishLoad:(UIWebView *)webView中添加要调用的原生OC方法。...奇怪的是竟然可以更新部分UI,例如给view设置背景色,调用webView执行js等,但是弹出原生alertView就会在控制台报子线程操作UI的错误信息。..."]; [context[@"payResult"] callWithArguments:@[@"支付弹窗"]]; 当然,如果是在执行原生OC方法之后,想要在OC执行完操作后,将结果回调给JS...valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; 那么就不能在WKWebView中使用JavaScriptCore

2.8K10

混合开发之解决H5页面出现广告的问题

公司采用了H5和Android混合开发,以原生代码为壳,H5代码编写逻辑的方式做产品。笔者之前写过一篇文章简单聊到了这种方式,有兴趣的朋友可以了解一下,顺便点个赞。...Android原生与H5通信   而在这种方式的使用过程中笔者碰到了一个问题,偶然性的会出现广告,各种各样的广告。并且不是必然触发。   通过查询各种资料(其实就是百度)。...DNS去解析出ip地址来访问,DNS劫持是指在劫持的网络范围内拦截域名解析的请求,分析请求的域名,把审查范围以外的请求放行,否则返回假的IP地址或者什么都不做使请求失去响应,其效果就是对特定的网络不能反应或访问的是假网址...错误”的数据,并以弹出新窗口的形式在使用者界面展示宣传性广告或者直接显示某网站的内容。   ...通过查看Android原生WebView的拦截日志,发现了广告页面的地址是会被拦截到的,而我们自己的H5页面放在自己的服务器上,IP和端口号是固定的当前使用服务器的ip和端口,广告页的ip和端口肯定和我们是不一致的

2.1K10

【Hybird】274-Hybird App 应用开发中 5 个必备知识点复习

无需安装App,不会占用手机内存; 通过浏览器即可访问,无需安装,用户使用成本更低。 缺点: 性能低,用户体验差; 由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好。...缺点: 相比原生,性能仍然有较大损耗; 这种模式受限于 webview 的性能,相比原生而言有不少损耗,体验无法和原生相比。...也可以用来开发原生WebView组件之间的插件接口。...WebView Cordova 用的 WebView 可以给应用提供完整用户访问界面,使得应用混合了 Webview原生的应用组件。...2.3 优缺点 优点: 跨平台,开发简单,学习成本低; 框架多,插件多,可自定义插件; 发展最早,社区资源丰富; 缺点: WebView性能低下时,用户体验差,反应慢; 中文文档资源少; 调试不方便,既不像原生那么好调试

1.3K30

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

无需安装App,不会占用手机内存; 通过浏览器即可访问,无需安装,用户使用成本更低。 缺点: 性能低,用户体验差; 由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好。...缺点: 相比原生,性能仍然有较大损耗; 这种模式受限于 webview 的性能,相比原生而言有不少损耗,体验无法和原生相比。...也可以用来开发原生WebView组件之间的插件接口。...WebView Cordova 用的 WebView 可以给应用提供完整用户访问界面,使得应用混合了 Webview原生的应用组件。...2.3 优缺点 优点: 跨平台,开发简单,学习成本低; 框架多,插件多,可自定义插件; 发展最早,社区资源丰富; 缺点: WebView性能低下时,用户体验差,反应慢; 中文文档资源少; 调试不方便

2.2K00

小程序会带动Hybrid App崛起吗?

混合 App 的原生外壳称为"容器",内部隐藏的浏览器,通常使用系统提供的网页渲染控件(即 WebView 控件),也可以自己内置一个浏览器内核。...在赋予 H5 原生API能力的基础上,进一步通过 JSBridge 将js解析成的虚拟节点树(Virtual DOM)传递到 Native 并使用原生渲染。...在此特别强调一下第三种方案——基于小程序方案,也是通过更加定制化的 JSBridge,并使用WebView 双线程的模式隔离了JS逻辑与UI渲染,形成了特殊的开发模式,加强了 H5 与 Native...小程序在JS-SDK的基础上,一方面进一步开放和拓展原生的能力给到Web前端调用,另一方面,页面渲染(Webview Render)的UI层和逻辑层,使用了两个独立的线程。...最后,由于小程序运行的沙箱机制,保证了不论是哪个小程序出现Bug、崩溃等情况,不会拖累应用本身,即便出现严重问题,也不过就是把它下线即可。

34930

一起脱去小程序的外套和内衣:微信小程序架构解析

视图层使用WebView渲染,逻辑层使用JSCore运行。...将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。...五、小程序开发经验 1、小程序存在的问题 小程序仍然使用WebView渲染,并非原生渲染。 需要独立开发,不能在非微信环境运行。 开发者不可以扩展新组件。...2、小程序可以借鉴的优点 提前新建WebView,准备新页面渲染。 View层和逻辑层分离,通过数据驱动,不直接操作DOM。 使用Virtual DOM,进行局部更新。...类原生应用 - 使用app shell model做到原生应用般的体验。 可安装 - 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。 容易分享 - 通过 URL 可以轻松分享应用。

10.2K64
领券