uni-app web-view的使用示例详解
作者：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的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！