快捷導(dǎo)航

uni-app?web-view的使用示例詳解

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

這篇文章主要介紹了uni-app web-view的使用，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

uni-app web-view的使用

在上一頁點擊需要跳轉(zhuǎn)到app內(nèi)置的瀏覽器里（app跳h5頁面），uniapp提供了web-view

需要新建頁面，在新頁面里引用web-view，在新頁面里才加上網(wǎng)址（h5）

1，在所需頁面引入

//如果不暫存在本地，會在瀏覽器上被轉(zhuǎn)譯
uni.setStorageSync('PAYWEBURL', res.data.data.url)//考慮到所傳網(wǎng)址需要轉(zhuǎn)譯嗎（不需要）
// let enUrl = encodeURIComponent(res.data.data.url)//轉(zhuǎn)譯
uni.navigateTo({
    //url: '/pages/cashier/payapp'+enUrl//需要在調(diào)轉(zhuǎn)頁里轉(zhuǎn)譯回去
    url: '/pages/cashier/payapp'//如果不需要轉(zhuǎn)譯先把網(wǎng)址暫存在本地，在跳轉(zhuǎn)頁面里取出，防止瀏覽器轉(zhuǎn)譯
})

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)// 傳過來的值是轉(zhuǎn)譯過的，需要轉(zhuǎn)回原值
      this.webViewUrl = uni.getStorageSync('PAYWEBURL')//如果是不需要轉(zhuǎn)譯的，直接獲取
      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

<!-- 用于支付結(jié)束后跳轉(zhuǎn)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('當(dāng)前環(huán)境：' + JSON.stringify(res));//判斷當(dāng)前是在網(wǎng)頁還是app還是小程序
	  })
    //在網(wǎng)頁做什么，（跳轉(zhuǎn)到指定頁）
    uni.redirectTo({
      url:'/pagesOrder/order/list'
    })
	})
</script>
</html>

uniapp與webview之間的相互傳值

1.uniapp發(fā)送數(shù)據(jù)到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中的參數(shù)進行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中的參數(shù)值
            function getQuery(name) {
                // 正則：[找尋'&' + 'url參數(shù)名字' = '值' + '&']（'&'可以不存在）
                let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                console.log(r);
                if(r != null) {
                    // 對參數(shù)值進行解碼
                    return decodeURIComponent(r[2]);
                }
                return null;
            }

2.H5端發(fā)送數(shù)據(jù)到uniapp

1.web-view

<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        //向uniapp傳值
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('當(dāng)前環(huán)境：' + JSON.stringify(res));
        });
    });
</script>

1.uniapp接受值

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

到此這篇關(guān)于uni-app web-view的使用的文章就介紹到這了,更多相關(guān)uni-app web-view的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: