uni-app web-view的使用示例详解

更新时间：2023年07月08日 09:11:53 作者：m0_72698039

这篇文章主要介绍了uni-app web-view的使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

uni-app web-view的使用

在上一页点击需要跳转到app内置的浏览器里（app跳h5页面），uniapp提供了web-view

需要新建页面，在新页面里引用web-view，在新页面里才加上网址（h5）

1，在所需页面引入

//如果不暂存在本地，会在浏览器上被转译
uni.setStorageSync('PAYWEBURL', res.data.data.url)//考虑到所传网址需要转译吗（不需要）
// let enUrl = encodeURIComponent(res.data.data.url)//转译
uni.navigateTo({
    //url: '/pages/cashier/payapp'+enUrl//需要在调转页里转译回去
    url: '/pages/cashier/payapp'//如果不需要转译先把网址暂存在本地，在跳转页面里取出，防止浏览器转译
})

2，在项目里（uni-app）运用（子传父）

<template>
  <view>
     <web-view @message="getMessage" :src="webViewUrl"></web-view>
  </view>
</template>
<script>
	export default {
		data() {
		  return {
            webViewUrl: ''
          }
		},
    onLoad() {
      // this.webViewUrl = decodeURIComponent(options.url)// 传过来的值是转译过的，需要转回原值
      this.webViewUrl = uni.getStorageSync('PAYWEBURL')//如果是不需要转译的，直接获取
      console.log(this.webViewUrl)
    },
		methods: {
			getMessage(e) {
			  console.log('webView传递过来的消息',e)
			}
		}
	}
</script>

3，html页面

https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

<!-- 用于支付结束后跳转app -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web-view</title>
//重点，一定要引入
  <script src="./js/uni.webview.1.5.4.js"></script>
</head>
<body>
</body>
<script>
	document.addEventListener('UniAppJSBridgeReady', function() {
	  uni.getEnv(function(res) {
	    console.log('当前环境：' + JSON.stringify(res));//判断当前是在网页还是app还是小程序
	  })
    //在网页做什么，（跳转到指定页）
    uni.redirectTo({
      url:'/pagesOrder/order/list'
    })
	})
</script>
</html>

uniapp与webview之间的相互传值

1.uniapp发送数据到H5端

其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中：

1.uniapp端

其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中：

<template>
	<view class="advertisement" style=" 100%;">
		<web-view :src="url" @message="message"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url:'/hybrid/html/local.html?data='
		};
	},
	onLoad(data) {
　　　　　　　　　　//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
		this.url+=encodeURIComponent(data.data)
	},
	mounted() {},
	methods: {
		message(event){
			console.log(event.detail.data);
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>

2.H5端接受值

console.log(getQuery('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;
            }

2.H5端发送数据到uniapp

1.web-view

<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        //向uniapp传值
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
    });
</script>

1.uniapp接受值

//message接受方法
<template>
    <view class="advertisement" style=" 100%;">
        <web-view :src="url" @message="message"></web-view>
    </view>
</template>

到此这篇关于uni-app web-view的使用的文章就介绍到这了,更多相关uni-app web-view的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

概述一个页面从输入URL到页面加载完的过程
本文主要对一个页面从输入 URL 到页面加载完的过程中都发生了什么事情进行概述，对我们学习网络语言有一定的帮助，下面就跟小编一起来看下吧
2016-12-12
原生js实现对Ajax的封装(仿jquery)
这篇文章主要为大家详细介绍了原生js实现对Ajax的封装，模仿jquery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JS与C#编码解码
这篇文章主要是对JS与C#编码解码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
基于JavaScript实现轮播图效果
这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
js模式化窗口问题![window.dialogArguments]
这篇文章主要介绍了js模式化窗口问题![window.dialogArguments],需要的朋友可以参考下
2016-10-10
原生JS实现的放大镜效果实例代码
放大镜大家在各大网站都能见到，下面小编给大家分享一段，代码是基于原生js实现的放大镜效果，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-10-10
JS实现文档加载完成后执行代码
本文给大家讲述的是使用javascript实现文档加载完成后再执行代码的方法和示例，非常简单实用，有需要的小伙伴可以参考下。
2015-07-07
javascript表单验证和Window详解
这篇文章主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
2014-12-12
js实现图片拖动改变顺序附图
需要改变多个元素的位置，可以通过元素拖动来实现，下面以图片拖动为例，用jQuery来实现,需要的朋友可以参考下
2014-05-05
微信小程序wxml列表渲染原理解析
这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11