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的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈js promise看这篇足够了
下面小编就为大家分享一篇浅谈js promise的使用。具有很好的参考价值，看完这篇都懂了。希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
javascript动态分页的实现方法实例
最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件,通过JS自己简单实现了效果,这篇文章主要给大家介绍了关于javascript动态分页的实现方法,需要的朋友可以参考下
2022-06-06
JavaScript实现多行文本溢出
这篇文章主要为大家详细介绍了如何使用JavaScript实现多行文本溢出省略号的样式,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
2024-03-03
使用Javascript监控前端相关数据的代码
本篇文章详细的介绍了使用Javascript监控前端相关数据，可以及时的监控前端的错误，加载时间等，有需要的可以了解一下。
2016-10-10
Javascript类型转换详解
这篇文章主要为大家介绍了Javascript类型转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
给localStorage设置一个过期时间的方法分享
我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢？下面这篇文章主要给大家介绍了关于如何给localStorage设置一个过期时间的相关资料，需要的朋友可以参考下
2018-11-11
详解JS对象遍历的顺序问题
你知不知道JS对象遍历顺序，本文就来详细的介绍了一下JS对象遍历顺序问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
微信小程序仿美团分类菜单 swiper分类菜单
本文主要介绍了微信小程序仿美团分类菜单（swiper分类菜单）的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
JavaScript中判断整数的多种方法总结
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下
2014-11-11
使用apifm-wxapi模块中的问题及解决方法
这篇文章主要介绍了使用apifm-wxapi模块中的问题及讲解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08