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

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

猜你喜欢

转载自blog.csdn.net/m0_72698039/article/details/128801849
今日推荐