如何在uniapp中优雅地使用WebView
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
从webview页面传值到uniapp中
官方文档已经很详细了,这里给大家上我的实战代码,首先在webview页面中引入相关依赖:
<!-- uniapp各平台依赖 -->
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
然后通过uni.postMessage
向uniapp传值:
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
}
}); uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
在uniapp中监听message:
<template lang="pug">
view
web-view.webview(:src="url" @message="getMessage")
</template> <script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
}
},
methods: {
getMessage(event) {
let data = event.detail.data
console.log(data);
}
}
}
</script> <style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>
从uniapp中动态传值到webview页面
按照官方文档,从uniapp传值到webview中,只能通过query:
<template lang="pug">
view
<!-- #ifdef APP-PLUS -->
web-view.webview(:src="url")
<!-- #endif -->
</template> <script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
}
}
}
</script> <style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
width 750rpx
height $webviewHeight
</style>
在webview中解析query:
let data = getQuery('data')
console.log(data); // 获取 uni-app 传来的值 // 取url中的参数值
function getQuery(name) {
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
但是,我发现,通过向web-view的src中传值,只能传一次,如果参数改变了,没法动态传到webview。
对于这种需要动态传递参数的需求,我们可以使用动态创建webview达到目的,而不是通过webview组件。
实现如下:
<template lang="pug">
view
</template> <script>
export default {
data() {
return {
url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",
}
},
mounted() {
// #ifdef APP-PLUS
var w = plus.webview.create(this.url + '?data=good');
w.show(); setTimeout(() => {
plus.webview.close(w);
setTimeout(() => {
w = plus.webview.create(this.url + '?data=123');
w.show();
}, 1000)
}, 1000)
// #endif
}
}
</script>
以上,通过plus.webview.create
创建一个webview,然后显示。如果数据更新了,可以先关闭之前的一个webview,然后重新创建一个,再显示。
也可以直接使用open刷新页面:
// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=good');
setTimeout(() => {
w = plus.webview.open(this.url + '?data=123');
}, 1000)
// #endif
相关API:
// 创建窗口
WebviewObject plus.webview.create( url, id, styles, extras ); // 创建并打开窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB ); // 显示窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras ); // 隐藏窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras ); // 关闭窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );
调用webview中的方法
动态传值还有一种解决方案,就是通过evalJs
方法直接调用webview中方法。
具体实现如下:
在模板中,通过ref暴露web-view元素:
<template lang="pug">
web-view(:src="url" ref="wb")
</template>
在mounted生命周期的时候获取此元素:
// #ifdef APP-PLUS
this.wb = this.$refs.wb
// #endif
在需要调用webview中方法的时候使用evalJs
:
// #ifdef APP-PLUS
this.wb.evalJs(`showAlert(${this.num})`)
// #endif
在webview页面定义对应的方法即可:
function showAlert(num) {
alert(num)
}
从uniapp动态传值,可以使用这种方式。
注意:
在nvue中,只有通过ref暴露webview节点才能拿到webview本身
注意
evalJs
的拼写方式,官方文档是evalJS
,但通过ref获取时,S
应该为小写
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
如何在uniapp中优雅地使用WebView的更多相关文章
- 如何在MyBatis中优雅的使用枚举
问题 在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: public enum ComputerState { OPEN(10), //开启 CLOSE( ...
- 如何在 Swoole 中优雅的实现 MySQL 连接池
如何在 Swoole 中优雅的实现 MySQL 连接池 一.为什么需要连接池 ? 数据库连接池指的是程序和数据库之间保持一定数量的连接不断开, 并且各个请求的连接可以相互复用, 减少重复连接数据库带来 ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能
Uni-app想开发社交应用.IM.店铺客服.嵌入式社交模块.在线直播互动,这些功能Uni-app官方也没提供SDK,怎么办呢?找IM老大腾讯云啊,今天我们就在Uni-app中把腾讯云即时通讯TXIM ...
- eslint配置介绍-如何在uniapp中配置eslint
eslint uniapp-eslint及vue-eslint配置 ESLint 是一个开源的 JavaScript 代码检查工具.可以让程序员在编码的过程中发现问题而不是在执行的过程中. 1. es ...
- 如何在K8S中优雅的使用私有镜像库 (Docker版)
前言 在企业落地 K8S 的过程中,私有镜像库 (专用镜像库) 必不可少,特别是在 Docker Hub 开始对免费用户限流之后, 越发的体现了搭建私有镜像库的重要性. 私有镜像库不但可以加速镜像的拉 ...
- 如何在Uniapp中访问CabloyJS后端API管理系统
介绍 CabloyJS是一款免费开源的NodeJS全栈开发框架,采用前后端分离设计,具备开箱即用的后台管理系统 Cabloy-SDK是专门为Uniapp应用量身定制的前端SDK,用于便捷的访问Cabl ...
- 如何在SpringBoot中优雅地重试调用第三方API?
前言 作为后端程序员,我们的日常工作就是调用一些第三方服务,将数据存入数据库,返回信息给前端.但你不能保证所有的事情一直都很顺利.像有些第三方API,偶尔会出现超时.此时,我们要重试几次,这取决于你的 ...
- 如何在 Swift 中优雅地处理 JSON
阅读目录 在Swift中使用JSON的问题 开始 基础用法 枚举(Enumeration) 下标(Subscripts) 打印 调试与错误处理 后记 因为Swift对于类型有非常严格的控制,它在处 ...
- 如何在php中优雅的地调用python程序
1.准备工作 安装有python和php环境的电脑一台. 2.书写程序. php程序如下 我们也可以将exec('python test.py') 换成 system('python test.p ...
随机推荐
- SP16113 SUBTLEBA - Trucks Transportation 题解
题目传送门 前言 本题样例有问题,如果想要样例可以去 vjudge 上. 本题提交后可能会出现 UKE ,建议前往 link 提交,而且本篇题解中所提供的代码也为 link 代码. 前置知识 Krus ...
- JS leetcode 翻转字符串里的单词 题解分析
壹 ❀ 引 今天来做一道难度中等,但实际难度并不是很高的题目,题目来源leetcode151. 翻转字符串里的单词,题目描述如下: 给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: & ...
- NodeJs web项目框架Express笔记
安装 以下都使用Yarn进行. 环境前提: 已经安装NodeJS(及自带的npm), 已经安装Yarn # 全局安装 yarn global add express-generator@4 #查看版本 ...
- Laravel入坑指南(4)——数据库(Mysql)
来来来,新的一节出炉了.这一节大家一起了解,Laravel如何对Mysql进行CURD. 我们回顾一下,PHP操作Mysql无非就是通过五个要素:host(地址).username(用户名).pass ...
- maven打包时打包指定的lib文件夹
今天在打包自己的spring boot项目时遇到了问题, 报找不到类和符号. 因为我有些依赖是放在项目lib文件夹中,那么打包的时候要连把它一起打包. 修改pom.xml, 添加一下内容: <b ...
- 之前练手使用基于gin的go web项目
目录结构: `-- demo |-- cmd | |-- api.go | `-- root.go |-- common | `-- consts | `-- consts.go |-- config ...
- xml开发笔记(一):tinyXml2库介绍、编译和工程模板
前言 Qt开发Xml相关技术,使用到tinyxml2库. TinyXML TinyXML是一个简单的.小的C++的XML解析器,可以集成到其他程序中.它是ROS的标准XML解析器. 最新 ...
- 【LeetCode链表#8】翻转链表(双指针+递归)/K个一组翻转
翻转链表 力扣题目链接(opens new window) 题意:反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4-> ...
- 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、强大、跨平台的快速开发框架
前言 今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离.开源免费(MIT License).强大.跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工 ...
- TCP的链接和断开_wireShark实践
目录 准备 TCP连接的三次握手 WireShark验证 TCP的四次挥手 WireShark验证 状态解释 其他的 # 概述 终于到了学习总结时间了 准备 TCP连接的三次握手 转自https:/ ...