uni-app web-view的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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'//如果不需要转译先把网址暂存在本地，在跳转页面里取出，防止浏览器转译
})

1，在项目里（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文章来源地址https://www.toymoban.com/news/detail-504874.html

<!-- 用于支付结束后跳转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>

到了这里，关于uni-app web-view的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！