位置: IT常识 - 正文

如何在uniapp中优雅地使用WebView(uniapp如何使用)

编辑:rootadmin
如何在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-PLUSvar 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-PLUSthis.wb = this.$refs.wb// #endif在需要调用webview中方法的时候使用evalJs:// #ifdef APP-PLUSthis.wb.evalJs(`showAlert(${this.num})`)// #endif在webview页面定义对应的方法即可:function showAlert(num) { alert(num)}从uniapp动态传值,可以使用这种方式。注意:在nvue中,只有通过ref暴露webview节点才能拿到webview本身注意evalJs的拼写方式,官方文档是evalJS,但通过ref获取时,S应该为小写如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
本文链接地址:https://www.jiuchutong.com/zhishi/287282.html 转载请保留说明!

上一篇:vue 在for循环中设置ref并获取$refs(vue for循环遍历对象取值)

下一篇:最贵的域名是什么(最贵的域名是什么名字)

  • 小米穿戴怎么解除绑定(小米穿戴怎么解绑手环)

    小米穿戴怎么解除绑定(小米穿戴怎么解绑手环)

  • 支付宝关联账号怎么弄(支付宝关联账号是什么意思)

    支付宝关联账号怎么弄(支付宝关联账号是什么意思)

  • 学习通考试可以分屏吗

    学习通考试可以分屏吗

  • 抖音隐藏作品在哪里(抖音隐藏作品在哪里我怎么看不到)

    抖音隐藏作品在哪里(抖音隐藏作品在哪里我怎么看不到)

  • 抖音私信对话框在哪(抖音私信对话框颜色深了)

    抖音私信对话框在哪(抖音私信对话框颜色深了)

  • 微信公众号星标什么用(微信公众号星标有什么用)

    微信公众号星标什么用(微信公众号星标有什么用)

  • 华为手机可以登录两个微信吗(华为手机可以登录两个微信怎么登录)

    华为手机可以登录两个微信吗(华为手机可以登录两个微信怎么登录)

  • 加入淘宝联盟的条件(加入淘宝联盟有什么好处)

    加入淘宝联盟的条件(加入淘宝联盟有什么好处)

  • 荣耀v30怎么装手机卡(荣耀v30怎么装手写笔)

    荣耀v30怎么装手机卡(荣耀v30怎么装手写笔)

  • 公众号能设几个管理员(公众号可以多个人管理吗)

    公众号能设几个管理员(公众号可以多个人管理吗)

  • 安卓系统和苹果系统的区别(安卓系统和苹果系统笔记本电脑)

    安卓系统和苹果系统的区别(安卓系统和苹果系统笔记本电脑)

  • 秘乐短视频安全密码是什么(秘乐短视频违法不违法)

    秘乐短视频安全密码是什么(秘乐短视频违法不违法)

  • 键盘上下左右键移动不了格子位置怎么办(键盘上下左右键不动怎么办)

    键盘上下左右键移动不了格子位置怎么办(键盘上下左右键不动怎么办)

  • 快手关注作品顺序乱了(快手关注作品顺序怎么调)

    快手关注作品顺序乱了(快手关注作品顺序怎么调)

  • 同轴喇叭和全频喇叭区别(同轴喇叭和全频喇叭哪个低音好)

    同轴喇叭和全频喇叭区别(同轴喇叭和全频喇叭哪个低音好)

  • opporeno3pro和opporeno3有什么区别(opporeno3pro和opporeno3元气版区别)

    opporeno3pro和opporeno3有什么区别(opporeno3pro和opporeno3元气版区别)

  • iphonex尺寸(iphonex尺寸长宽厘米)

    iphonex尺寸(iphonex尺寸长宽厘米)

  • vivo手机克隆在哪里找(vivo手机克隆在哪个里面呢)

    vivo手机克隆在哪里找(vivo手机克隆在哪个里面呢)

  • 小米手机怎么远程管理(小米手机怎么远程开机)

    小米手机怎么远程管理(小米手机怎么远程开机)

  • oppoa3怎么恢复出厂设置(oppoa32怎么还原手机)

    oppoa3怎么恢复出厂设置(oppoa32怎么还原手机)

  • iphone11几倍变焦(苹果11有几倍变焦)

    iphone11几倍变焦(苹果11有几倍变焦)

  • 云闪付停止运行是怎么回事(云闪付崩溃了)

    云闪付停止运行是怎么回事(云闪付崩溃了)

  • 如何设置手机的首选网络(如何设置手机的通知信息)

    如何设置手机的首选网络(如何设置手机的通知信息)

  • 华为智能遥控不见了(华为智能遥控不小心删了怎么找回)

    华为智能遥控不见了(华为智能遥控不小心删了怎么找回)

  • 抖音评论被禁言多久恢复(抖音评论被禁言多久可以解除)

    抖音评论被禁言多久恢复(抖音评论被禁言多久可以解除)

  • 小米离线视频文件在哪(小米离线视频文件位置)

    小米离线视频文件在哪(小米离线视频文件位置)

  • 如何添加一个离线账户(怎么添加一个)

    如何添加一个离线账户(怎么添加一个)

  • Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!(vue-introjs)

    Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!(vue-introjs)

  • yolo-pose环境搭建及训练和测试(yolov4环境搭建)

    yolo-pose环境搭建及训练和测试(yolov4环境搭建)

  • 一般纳税人减免增值税政策
  • 纳税人享受的权利有哪些
  • 消费税基本特点?
  • 跨月如何开具增值税发票
  • 个体工商户季度不超过30万免增值税吗
  • 高档化妆品增值税税率是13%
  • 小规模季超30万,蔬菜还免增值税吗
  • 用于后勤管理部的工作
  • 采用托收承付方式怎么做分录?
  • 出口退税代理费用大概多少
  • 未结清全额是逾期吗
  • 小规模纳税人开专票
  • 水利行政事业性收费收入会计分录
  • 请问什么是全员安全生产责任制
  • 如何检验发票真伪
  • 政府专项拨款账务处理
  • 出口退税过期了怎么办理
  • windows10你需要trustedinstaller提供的权限才能更改
  • 增值税转出未交增值税是什么意思
  • 进项税额认证了也就是抵扣了吗?
  • 无法安装字体,显示字体无效win10
  • 收到投资方投入原材料
  • 设备安装用工程造价吗
  • Win10 KB5005033 给某些用户带来了新问题的解决方法
  • php的工作流程
  • php文件在线解密
  • 直线法摊销的账面价值
  • 赞助支出计入应纳税所得额吗
  • 申报补缴是什么意思
  • 银行本票出票金额大于账户余额
  • php远程命令执行
  • 工会经费计税依据是上年工资还是当年工资
  • 企业取得交易性金融资产时
  • 滚动条基本样式有哪些
  • 人脸检测5种方式
  • ChatGPT会取代你的岗位吗?
  • 安装cuda和cudnn
  • series转换为dataframe
  • 江西税务官网
  • java io读写
  • 帝国cms移动端
  • 预缴所得税亏损费用金额大会被监测到吗?
  • 资产减值损失应在计算()时扣除
  • win2008安装sql2008教程
  • SQL Server 2005 镜像构建手册(sql2005数据库同步镜像方案)
  • 会计做账可以写负数吗
  • 个人的车由公司来投保可以吗
  • 不得抵扣增值税的情形
  • 增值税进项税转出有哪些
  • 换货与退货
  • 实收资本(或股本)是什么意思
  • 收到公司的钱写收据
  • 企业计提什么意思
  • 本月暂估入库,下月
  • 现金日记账谁负责
  • 项目资本金如何确定
  • mysql安装不成功怎么办
  • mysql中json格式是多少长度
  • mysql导出语句
  • sql中出现将截断字符串或二进制
  • mysql数据库基本知识点总结
  • windows7怎么打符号
  • window10右击
  • ubuntu安装ubuntu-desktop
  • win7无法运行
  • window7发布
  • win8系统怎么设置
  • ubuntu zed
  • 老旧的诗琴五个琴谱大全
  • linux 使用
  • windows7播放器无法打开
  • win10极限模式
  • win10笔记本键盘失灵按什么键恢复
  • vue条形码
  • angularjs简介
  • jQuery实现获取table表格第一列值的方法
  • css怎么设置
  • 汽车发票包含增值税吗
  • 土地储备中心出让公告
  • 山东地税局网上办税平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设