uniapp 即时通讯_uniapp中与webview的即时通讯
这是五月的最后一天,本来想着一个月至少要写一篇博客的,还好在最后一天想起来了…
最近在用uniapp开发一款APP,因为需要兼容旧的H5页面,所以在uniapp中用到了webview,但是发现webview与uniapp的通信还是有一些局限性:
1.开发文档中说过了,webview只有在plusready后,才能对plus.storage进行操作,或者调用uniapp的一些代码,但是webview加载plus的时间.实在是太慢了…快的时候,四五秒,慢的时候…二三十秒都有在测试中出现过
2.虽然webview中能调用一些uniapp的代码.但也仍然不是全部,所以交互功能应该也还是受限的
然后最近几天一直在看文档发现5+App 里网页可直接调用 5+Runtime 的相关原生能力,然后我又去看了5+Runtime的webview的api:https://www.html5plus.org/doc/zh_cn/webview.html,终于找到了一个比较好的方法:
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.overrideUrlLoading
overrideUrlLoading:
拦截Webview窗口的URL请求
void wobj.overrideUrlLoading(options, callback);
说明:
拦截URL请求后,Webview窗口将不会跳转到新的URL地址,此时将通过callback回调方法返回拦截的URL地址(可新开Webview窗口加载URL页面等)。 此方法只能拦截窗口的网络超链接跳转(包括调用loadURL方法触发的跳转),不可拦截页面请求资源请求(如加载css/js/png等资源的请求)。 注意:多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。
这个地方有两个参数:
options:
拦截Webview窗口URL请求的属性
属性:
effect:
(String 类型 )拦截URL请求生效时机
可取值: “instant” - 表示立即生效,即调用overrideUrlLoading方法后立即生效; “touchstart” - 表示用户操作Webview窗口(触发touchstart事件)后生效,如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。 默认值为”instant”。
mode:
(String 类型 )拦截模式
可取值: “allow”表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调; “reject”表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载。 默认值为”reject”。
match:
(String 类型 )区配是否需要处理的URL请求
支持正则表达式,默认值为对所有URL地址生效(相当于正则表达式“.*”)。
如果mode值为”allow”则允许区配的URL请求跳转,mode值为”reject”则拦截区配的URL请求。
exclude:
(String 类型 )排除拦截处理请求类型
不拦截处理指定类型的URL请求,直接使用系统默认处理逻辑。 可取值: “none”表示不排除任何URL请求(即拦截处理所有URL请求); “redirect”表示排除拦截处理301/302跳转的请求(谨慎使用,非a标签的href触发的URL请求可能会误判断为302跳转)。 默认值为”none”。
OverrideUrlLoadingCallback
Webview窗口拦截URL链接跳转的回调函数
参数:
event:
( Event ) 必选 Webview窗口拦截URL跳转事件数据
可通过event的url属性获取拦截的URL地址。
通过这个到底能做什么呢?我们先来看一张下面的效果图:
图中顶部文字在uniapp中,中间的页面为webview,页面中并没有加载plus的东西.只是一个简单的链接,而我们点击链接的时候,页面并没有跳转,但是数据已经被uniapp拿到了.
整个页面代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{{param}}
export default {
data() {
return {
webview: null,
param:''
}
},
onLoad() {
let curwebview = this.$mp.page.$getAppWebview();
this.webview = plus.webview.open('https://blog.coder666.cn/webviewtest/index.html', '',{top:'246px',bottom:'100px'});
curwebview.append(this.webview);
this.webview.show();
this.webview.overrideUrlLoading({mode:'reject'}, (e)=>{
//根据参数的不同,做不同的操作!url中,把双引号用别的字符串替换.就OK了.再替换回来可以转json
console.log(e);
this.param ='参数为:'+ e.url;
uni.showToast({
icon:'none',
title:'参数为:'+e.url
})
});
},
methods: {
}
}
.content {
text-align: center;
height: 400upx;
}
代码关键部分就只有onLoad中了.这里的mode我设置为了reject,即页面的所有的url都不跳转,然后拿到url,大家可以看到url上带了参数,所以webview可以通过这种方式来进行数据传输,不过唯一的美中不足就是url有最大长度限制,至于多长…请大家自行百度…我百度到的,是字符串不能超过1855,不过也够你放很多东西了吧…一般说来是够的.
通讯已经搞定了.接下来还要再说一点的是,overrideUrlLoading这个方法,在reject模式下,或者是allow模式下,都可以有match配置,即,符合设置的字符串的才进行拦截或者通过.
match的配置,示例:
‘match:’.*(/member/index|/back.html)’
上面的match, 表示网址以/member/index结尾或者是/back.html结尾就会匹配.
然后去判断e.url,比如是/member/index就去用户中心,如果是back.html,就返回到上一个uniapp的页面,等等操作.webview无需等待plus加载.
代码已经放在了github上.
github地址:https://github.com/xieyushi/uniappwebviewconnect
uniapp 即时通讯_uniapp中与webview的即时通讯相关推荐
- uniapp 即时通讯_uniapp与webview的实时通讯
[TOC] ## test.nvue > 如果调用webview的页面使用nvuew才可以实现彼此实时通讯: > nvue 调用 webview 需要手动指定宽高,不像vue页面的 web ...
- uni-app应用中控制webview的H5页面返回
在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键: 要实现这个功能,最主要的是完成应用与H5 的通讯问题. 1.H5向应用发送消息 首先 ...
- uni-app 之 web-view 与h5 通讯
官网文档:https://uniapp.dcloud.net.cn/component/web-view.html#getenv web-view 是一个 web 浏览器组件,可以用来承载网页的容器, ...
- SpringCloud工作笔记060---SpringBoot中使用WebSocket实现即时通讯_实现呼叫中心业务封装
JAVA技术交流QQ群:170933152 ---------------我们主要用这个来转接,呼叫中心发过来的分机电话 呼叫中心:呼叫过程,首先呼叫中心运营商给个,api手册,api会规定,首先登陆 ...
- UNI-APP在自定义组件中内嵌H5/Html网页,可自定义webview大小,加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
- 在uniAPP中使用使用低功耗蓝牙通讯
在uniAPP中使用使用低功耗蓝牙通讯 1.初始化蓝牙监听器 onLoad(){//蓝牙是否在扫描设备uni.onBluetoothAdapterStateChange((res)=>{cons ...
- 将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法 前言 Hash History 完事 前言 之前有个项目要同时做小程序和APP,本着节省时间的想法,研究了下un ...
- 关于即时通讯系统中消息发送、转发、展示、提示等专利初探
关于即时通讯系统中消息发送.转发.展示.提示等专利初探 即时通讯是目前Internet上最为流行的通讯方式,实时通信(Instant Messaging,简称IM)是一个实时通信系统,允许两人或多人使 ...
- Java中使用webview内嵌vue页面
技术服务于业务,在什么情况下我们需要使用webview去内嵌vue页面呢.众所周知webview作为一个组件,可以看成是一个微型浏览器内核.那么如果在我们的程序中集成webview,那么我们的程序是不 ...
- 在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别 前言 一.环境 二.使用步骤 三.permission.js源代码 四.face.vue源代码 五.代码效果 总结 前言 在uni ...
最新文章
- 你最喜欢的 iOS 开发的技巧和提示有哪些?
- 戛古 Kakku, Kekku-掸邦 shan state
- Python for循环本质
- c语言递归最小值,递归求最大最小值算法 分治策略(c语言实现)
- 【ACM】会场安排问题
- iris数据_MAT之ELM:ELM实现鸢尾花(iris数据集)种类测试集预测识别正确率(better)结果对比...
- STATIC_URL/STATIC_ROOT/STATICFILES_DIRS/urls.py中的static区别
- python调用其他程序或脚本方法(转)
- 如何做优化,UITabelView才能更加顺滑
- C-Free 您不能使用调试解决方案
- .Net MVC新建视图时出现“AutoMapper已拥有为System.ValueTuple定义的依赖项”的错误提示
- 复杂的三元转化为if() eles()
- Shiro 权限验证原理
- iOS微信安装包瘦身
- fiddler对模拟器抓包
- 用友u8怎么导出凭证_用友U8V10.1ERP怎么生成期间损益结转凭证的图文操作教程
- 利用公网Msf+MS17010跨网段攻击内网(不详细立马关站)
- 配置cfree 5 支持C++11
- FAT文件系统存储原理
- 如何免费下载论文资料
热门文章
- wing ftp server网页无法访问
- mac用什么软件测试硬盘好坏,谁说果粉不在意性能?6款macOS下硬盘测速软件介绍...
- pc端下载微信视频号中的视频
- SAP凭证的冲销-FB08
- Spring Data Elasticsearch 基本语法及使用
- 为知笔记使用自建docker服务后,如何迁移原有账号数据
- 金蝶标准版7.0计算机快捷,掌握金蝶KIS基本的技巧,快速操作金蝶软件!
- 微信端input输入框在ios手机上连续输入卡顿
- Linux王冠-RHCE认证概况及费用一览
- Win10系统精简优化工具 NTLite v1.5.0 企业版