uni-app web-view跳转自定义html

最新推荐文章于 2024-08-02 10:43:40 发布

维～易

最新推荐文章于 2024-08-02 10:43:40 发布

阅读量2.4k

点赞数 1

分类专栏： web-view跳转自定义html 文章标签： uni-app webview html

本文链接：https://blog.csdn.net/weixin_44981586/article/details/120180439

版权

web-view跳转自定义html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

uni-app web-view跳转自定义html

第一步注册点击事件跳转到web-view所在的页面

注册点击事件进行跳转 使用导航栏进行返回
demo(data) {
  uni.navigateTo({
  	url: `/pages/privacy/privacy?data=${res.data}` 
  })
},
需要pages.json 注册 
{
  "path": "pages/privacy/privacy",
  "style": {
    "navigationBarTitleText": "隐私协议",
    "navigationBarBackgroundColor": "#FFFFFF"
  }
}

第二步需要一个web-view的跳转页面

提示： html文件只能放在hybrid的html文件下，不能放在pages下面

<template>
    <view>
        <web-view :src="url" ></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                },
                url: '../../hybrid/html/privacy.html', // 地址 html文件只能放在hybrid下
				transferData: '', //传递数据
            }
        },
        onLoad(options) {
			//options是传递过来的参数
			//因为是url传参，存在中文乱码问题 这里需要用encodeURIComponent（）进行处理 接收参数时也需要用decodeURIComponent（）进行转译
			this.url = `../../hybrid/html/need-know.html?data=`+encodeURIComponent(options.data)
        },
        //监听html返回上一页的事件 跳转到相对于的页面
        onBackPress(options) {
			if(options.from === 'backbutton') {
				uni.redirectTo({
					url: `/pages/login/login`
				});
			} 
		},
    }
</script>

第三步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<mete http-equiv="contentType" content="textml;charst=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐私政策</title>
    <style>
    </style>
</head>
<body>
    <div id='replace'></div>
</body>
<!-- uniapp的引用 -->
<script
  type="text/javascript"
  src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
></script>
<script>
	//获取元素 其实以下得看自身情况需求来做更改 但大体就是使用 window.location.search.substring(1)截取到凭借的参数 然后使用decodeURIComponent方法进行转译
	let replace = document.getElementById('replace')
	function getUrlParam(name) {
		// 取得url中?后面的字符
		let query = window.location.search.substring(1);
		// 把参数按&拆分成数组3
		let param_arr = query.split("=");
		//将地址栏参数解码 因为只有一个参数
		let data = decodeURIComponent(param_arr[1]);
		replace.innerHTML = data
		
		// 多个参数可以使用
		// var query = window.location.search.substring(1);
        // // 把参数按&拆分成数组
        // var param_arr = query.split("&");
        // for (var i = 0; i < param_arr.length; i++) {
        // 	var pair = param_arr[i].split("=");
        // 	if (pair[0] == name) {
        // 		return pair[1];
        // 	}
        // }
	}
	//获取数据进行赋值
	getUrlParam()
</script>
</html>