-
2022-04-23 00:22:01
<template> <view class="content"> <web-view :src="url"></web-view> </view> </template> <script> var wv; //计划创建的webview export default { data() { return { url: 'https://www.baidu.com/', canBack: false, } }, onLoad() { }, methods: {}, onBackPress(options) { //let h = plus.webview.getWebviewById(wv.id) //let url = h.getURL() //let url = wv.getURL() if (this.canBack) { wv.back() return true //不返回提示再按一次退出应用 } return false }, onReady() { // #ifdef APP-PLUS let currentWebview = this.$scope .$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效 let that = this setTimeout(function() { wv = currentWebview.children()[0] wv.addEventListener('progressChanged', function(e) { wv.canBack(function(e) { that.canBack = e.canBack }) }) }, 1000); //如果是页面初始化调用时,需要延时一下 // #endif } }; </script> <style> </style>
更多相关内容 -
uniapp 使用webView通讯
2022-04-04 03:54:31uniapp 使用webView通讯 -
uniapp webview缩放
2021-08-03 09:20:51var currentWebview = this.mp.page.mp....在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.mp.page.mp.page.mp.page.getAppWebview() setTimeout(function() { wv = currentWevar currentWebview = this. m p . p a g e . mp.page. mp.page.getAppWebview()//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this. m p . p a g e . mp.page. mp.page.getAppWebview()
setTimeout(function() {
wv = currentWebview.children()[0]
wv.setStyle({top:50})
//top,height,bottom,width等都可以设置,不能带单位
}, 1000); //如果是页面初始化调用时,需要延时一下 -
uniapp webview全屏
2021-08-12 10:18:20// #ifdef APP-PLUS var currentWebview = this....在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function() { let wv = curr// #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function() { let wv = currentWebview.children()[0]; wv.setStyle({ videoFullscreen: 'landscape' }); }, 1000); //如果是页面初始化调用时,需要延时一下 // #endif
-
关于uniapp webview页面与小程序之间传值
2022-01-17 15:15:39最近项目有遇到 小程序内嵌套webview的场景,整站嵌套的,这样就避免不了H5和小程序之间通信,小程序用的uniapp写的,H5是用vue写的, 首先在H5页面引入微信的JS <script src=...最近项目有遇到 小程序内嵌套webview的场景,整站嵌套的,这样就避免不了H5和小程序之间通信,小程序用的uniapp写的,H5是用vue写的,
首先在H5页面引入微信的JS
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
然后再引入uniapp 的JS
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
然后在H5页面 因为我的H5是用VUE写的 所以这段代码要放在VUE的mounted钩子函数里执行
document.addEventListener('UniAppJSBridgeReady', function() { uni.postMessage({ data: { options:'来自H5的问候' } }); uni.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); });
uni.postMessage({ data: { options:'来自H5的问候' } });
这个就是H5页面向uniapp页面传值的方法 要传的值一定要写到data里面!!!!!;
这样H5 就布置完了 主要是uniapp 端取值
先附上uniapp webview的文档 https://uniapp.dcloud.io/component/web-view
如文档所说的 在webview标签上绑定 @message,来获取H5传来的值
getMessage(e) { console.log(e) let data = e.detail.data },
这样还不行!!!!
因为绑定的方法getMessage只有在特定情况下才被会调用
分享不适合我现在的需求 销毁。。没试,我是在后退这个时机调用取值的
首先把webview页面复制一份,一毛一样的,第一个webview 标签上不绑定message,在复制的webview页面绑定message 取值
第一个webview
<web-view :src="src"></web-view>
复制的webview
<web-view :src="src" @message="getMessage"></web-view>
然后在第一个webview页面里让页面一加载完就跳到复制的webview页面,额。。要加个判断条件 不然两个页面一直互跳...
//主webview <template > <view> <web-view :src="src"></web-view> </view> </template> <script> export default { data() { return { src:'https://xxxx', nav:true, }; }, onLoad(options) { if(this.nav){ this.navto() } }, methods:{ navto(){ uni.navigateTo({ url:'../nwebview/nwebview' }) }, } } </script>
然后进入复制的webview
<template > <view> <web-view :src="src" @message="getMessage"></web-view> </view> </template> <script> export default { data() { return { src:'https:xxx', }; }, onLoad(options) { setTimeout(()=>{ this.navto() },3000) }, methods:{ navto(){ var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 // 然后改变第一个webview的nav状态 ,这样返回之后就不会再次跳过来了 prevPage.nav = false; uni.navigateBack({ delta:1 }) }, getMessage(e) { console.log(e.detail.data) }, } } </script>
这样从第一个webview跳过来后 再使用navigateback就达到@message的调用条件了 其他细节就不说了
这样就可以通过getMessage方法来获取H5 传来的值了,
uniapp 给H5传值更简单 只要在webview的src地址上拼接就行了
-
uniapp与webview之间的相互传值的实现
2020-10-15 04:24:42主要介绍了uniapp与webview之间的相互传值的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
uniapp webview使用
2021-01-08 16:04:07<web-view src=""></web-view> 可以跳转到非uniapp内的页面 -
uniapp webview与uniapp相互传参
2021-06-18 10:20:47web-view :src="webviewurl" class="webview" @message="getclose"></web-view> onLoad() { // #ifdef APP-PLUS let obj = xxxx() this.webviewurl = `/hybrid/html/${domain.baseUrl.indexOf('10.') =... -
uniapp webView获取不到cookie
2021-09-10 10:57:30不知道你的H5页面是在哪里运行的,如果是正常的浏览器是没有问题的,如果是微信内部或者webview内部,建议用户信息和token等别放在cookie中,因为这两个环境不支持cookie,可以storage进行存储,发起请求时放到... -
uniapp webview视频全屏
2020-12-25 15:34:41代码 <script> var wv; onLoad() { // #ifdef APP-PLUS var currentWebview = ...在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview() set -
uniapp webview如何直接关闭而不是一直后退
2021-09-23 23:41:042.获取webview的子元素 3.关闭页面 4.返回页面 /* 自定义返回 */ back() { let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentPages = page.$getAppWebview() ... -
实现uniapp webview与html通信的问题(webview发消息到uniapp,uniapp发消息到webview)
2020-12-29 22:04:33实现uniapp webview与html通信的问题(webview发消息到uniapp,uniapp发消息到webview) html文件 <html> <head> <title>测试数据</title> <script type="text/javascript" src=... -
uniapp webview监听页面加载后回调
2021-03-29 13:44:20在android 或者flutter 中使用webview的时候,通常都是能获取到页面加载前和加载后,通过此事件来做一些拦截控制 伪代码 var currentWebview = this.$scope.$getAppWebview(); let wv = currentWebview.children()[0] ... -
uniapp WebView嵌入,ios端click事件点击延迟,无法连续点击
2021-02-20 16:19:04做出来之后在测试阶段的时候发现除了ios端app WebView内嵌h5页面无法连续点赞之外,ios其他环境都没问题。(bug总是神奇的出现) 因为没啥经验,开始考虑以为是我司ios开发在app端做了不能连续点击限制,于是去问了... -
Uniapp webview 开启沉浸式 和 全面屏配置设置透明标题栏 透明状态栏
2019-10-09 17:04:19Uniapp webview 开启沉浸式 和 全面屏配置 直接看注释 { "@platforms": ["android", "iPhone", "iPad"], "id": "xxxxx", /*应用的标识*/ "name": "云管家", /*应用名称,程序桌面图标名称*/ "version": { ... -
uniapp webview跳转时错误出现badwrong
2020-04-24 15:50:21当路径是动态渲染时,出现此错误是因为,页面尚未渲染完成,直接跳转了 解决方案: -
uniapp webview 直接调用原生摄像头拍照 拍视频 img video,通过ajax获取blob(file为特殊的blob)对象并...
2021-06-07 19:34:04let cmr = plus.camera.getCamera() //获取相机对象 cmr.captureImage( //调用拍照方法,获得临时路径 function (p) { plus.io.resolveLocalFileSystemURL(p, function (entry) { //通过临时路径,获得文件系统... -
uniapp webview.create显示空白页,返回才显示页面解决办法,亲测好用!!!
2020-01-08 10:49:26待webview页面加载完毕后,进行show显示,过早show()页面未加载完,是空白页。 show_webView(){ var nwating = plus.nativeUI.showWaiting(); var w=plus.webview.create(this.path,'webviewId',{height: '93%'..... -
(uniapp框架)手动封装webview页面与App交互sdk
2022-01-30 13:54:19自己项目开发中使用的,需求是打通App和webview页面两者之间的数据交互 H5调用App的方法(反之App可以使用该页面的方法) -
uniapp webview访问h5 input file 选择相册图片 未授权不会触发onchange回调
2021-12-20 09:13:29uniapp 使用 plus.webview.loadURL(url) 加载h5页面,在未授权获得相册图片的情况下,input type=file 时选择图片不会触发 onchange 回调 解决方案 1、初始化时候获取手机读写权限,但是现在审核严格,不能做初始化... -
uniapp的webview和H5相互通讯
2022-06-02 14:39:27uniapp的webview和H5相互通讯 -
uniapp给webview进行传参。
2021-10-14 15:46:28uniapp 页面操作 webview页面操作 onshow(){ getQuery(name) { // 正则:[找寻’&’ + ‘url参数名字’ = ‘值’ + ‘&’](’&'可以不存在) console.log(window,location)//看是否有data=1233的... -
uniapp实现像浏览器一样前进后退的功能 uniapp在webview怎么后退返回
2021-09-01 13:47:47在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键; 要实现这个功能,最主要的是完成应用与H5 的通讯问题。 H5向应用发送消息 首先处理uni-app:需要在webview标签上加入... -
uniAPP的webview封装使用
2021-07-19 16:54:38uniAPP通过webview跳转到其他网址 uniApp的webview封装 一般分为微信小程序的和App的,微信小程序、H5使用.vue文件,运行时到App上会自动采用.nvue, 不采用.nvue文件时,在App中html页面的标题会自动填充到系统标题... -
uniapp 使用webview
2020-06-29 14:44:47web-view title="hehe" :webview-styles="webviewStyles" :src="url" @message="message" @onPostMessage = "onPostMessage"> </web-view> </view> </template> <... -
uniapp通过webview调用H5页面
2020-06-20 16:16:05uniapp通过webview调用H5页面 使用uniapp开发小程序,需要从小程序跳转到H5页面,并且在H5页面可以返回小程序进行交互;对于该需求就选择了 webview 这个组件,具体怎么使用文档上也有详细描述,但在项目中还是需要... -
uniapp实现webview和APP之间的传值通信 / VUE和HTML页面通信
2021-12-03 11:36:111* uni 中的 web-view 来引入网页,网页中需要调用扫码功能,但是webview是不能直接调用手机的扫码功能的 2* 点击网页的扫码按钮触发事件,事件给app发送一个我要使用扫码的需求,然后再uni中收. -
uniapp的webview嵌套页面中的广告资源如何屏蔽
2021-11-15 17:48:02uniapp的webview嵌套页面中的广告,js文件、图片文件等如何屏蔽 场景: webview嵌套了一个在线播放页面,但是播放页面中还有广告js,广告图片等 解决方法: 使用webviewObject的overrideResourceRequest 实现 ... -
uniapp的webview 嵌入商城登录异常cookie丢失
2021-02-24 14:50:51uniapp的webview 嵌入商城登录异常cookie丢失背景原因解决方案 背景 公司让用uniapp开发一个app 其中用webview嵌入了一个商城,这个商城代码比较老是前后端不分离的,使用的是cookie进行的用户数据流转。实际过程中...