当前位置:网站首页>uni-app进阶之内嵌应用【day14】
uni-app进阶之内嵌应用【day14】
2022-06-30 16:43:00 【华为云】

如今,各大app平台都有自己的小程序系统,各种应用可以直接嵌入app中,实现一站式体验。使用uniapp开发的应用程序如何实现这样的功能?答案是嵌入式web视图。
获取android页面中的中的webView嵌入H5页面。
WebView webView = findViewById(R.id.webView_h5);//webView.loadUrl("http://127.0.0.1/asset/pages/forAndroidAndH5.html");//嵌入H5页面添加辅助处理JS,否则一些JS函数会失败,如alert()方法
webView.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(WebView view, String url, String message, JsResult result){ return super.onJsAlert(view, url, message, result); }});每个Vue页面实际上都是一个WebView,Vue页面中的web视图组件实际上是WebView中的一个子WebView。子WebView附加到父WebView。
Vue页面将自动覆盖整个页面,并使用@消息接收web视图页面通信;
Nvue页面需要指定页面宽度和高度,使用@onpostmessage接收web视图页面通信;
app Vue中的web视图组件不支持自定义样式,但v-show的本质是更改组件样式。也就是说,该组件支持V-IF而不是V-show。
默认情况下,<web view>组件是全屏的,并且高于前端组件。应用程序端需要使用plus规范来调整大小或覆盖其上的内容。
H5端的web视图实际上使用当前浏览器转换为iframe;
应用程序端IOS分为uiwebview和wkwebview。自2.2.5版本起,默认为wkwebview;
Nvue web视图必须指定样式宽度和高度;
应用程序网页向应用程序发送实时消息;
默认情况下,App nvue web视图没有大小。可以按样式设置大小。如果要填充整个窗口,可以将flex设置为:
1。标题栏不会在web视图页面中自动显示标题。如果要填充整个窗口并显示标题,建议使用Vue页面的web视图(无法控制默认全屏),如果要自定义web视图的大小,请使用nvue web视图;
如果参数是字符串,则需要“单引号”。如果参数是数值,则不需要该参数。如果没有参数,只需留下一个()
使用无/无参数和返回值调用JS函数
int arg1 = 10;int arg2 = 12;String methodH5 = "androidtoh5WithResult(" + arg1 + "," + arg2 + ")";webView.evaluateJavascript(methodH5, new ValueCallback<String>() { @Override public void onReceiveValue(String s) { System.out.println("=====s:" + s); }});边栏推荐
- Solution: STM32 failed to parse data using cjson
- 每日面试1题-蓝队基础面试题-应急响应(1)应急响应基本思路流程+Windows入侵排查思路
- Zero foundation can also be an apple blockbuster! This free tool can help you render, make special effects and show silky slides
- 后渗透之文件系统+上传下载文件
- Design and principle of tubes responsive data system
- 送受伤婴儿紧急就医,滴滴司机连闯五个红灯
- New research of HKUST & MsrA: about image to image conversion, finishing is all you need
- ABAP-发布Restful服务
- Nielseniq welcomes dawn E. Norvell, head of retail lab, to accelerate the expansion of global retail strategy
- 【剑指Offer】53 - I. 在排序数组中查找数字 I
猜你喜欢

基于SSH的客户关系CRM管理系统

Post office - post office issues (dynamic planning)

6 張圖帶你搞懂 TCP 為什麼是三次握手?

Small tools (3) integration knife4j3.0.3 interface document

Deep understanding of JVM (I) - memory structure (I)

Deep understanding of JVM (V) - garbage collection (II)

Generate confrontation network, from dcgan to stylegan, pixel2pixel, face generation and image translation.

2022上半年盘点:20+主流数据库重大更新及技术要点汇总

Nft: unlimited possibilities to open the era of encryption Art

TCP session hijacking based on hunt1.5
随机推荐
Advanced Mathematics (Seventh Edition) Tongji University General exercises one person solution
Do fresh students get a job or choose a job after graduation?
Deep understanding of JVM (V) - garbage collection (II)
.NET ORM框架HiSql实战-第一章-集成HiSql
基于SSH的客户关系CRM管理系统
Rainbow Brackets 插件的快捷键
[PROJECT] Xiaomao school (IX)
【剑指Offer】53 - I. 在排序数组中查找数字 I
Nielseniq welcomes dawn E. Norvell, head of retail lab, to accelerate the expansion of global retail strategy
Apache 解析漏洞(CVE-2017-15715)_漏洞复现
每日面试1题-蓝队基础面试题-应急响应(1)应急响应基本思路流程+Windows入侵排查思路
Six pictures show you why TCP has three handshakes?
Apache parsing vulnerability (cve-2017-15715)_ Vulnerability recurrence
Ten thousand volumes - list sorting [01]
Synchronized summary
vue3 响应式数据库—— reactive
Partition marble (multiple knapsack + binary optimization)
Redis (VII) - sentry
Communication network electronic billing system based on SSH
Switching routing (VLAN) experiment