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的引用 -->
<scripttype="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);// 把参数按&拆分成数组3let 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>

uni-app web-view跳转自定义html相关推荐

uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
【Unity 实用工具】 Unity 十款浏览器相关插件整理（web view browser）
目录 ??前言 ??浏览器相关插件 ??第一款:Embedded Browser (ZFBrowser) ??第二款:UniWebView ??第三款:Texture Web View (Androi ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式
原文:为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式说起JSBridge,大家最熟悉的应该就是微信的WeixinJSBridge,通过它各个公众页面 ...
Appium——unknown error: cannot activate web view
测试步骤: 1. 打开必应APP(如果出现欢迎界面和定位服务弹窗,需要点掉) 2. 点击搜索按钮 3. 输入JAVA到搜索框 4. 点击搜索网页 5. 观察显示搜索出来的结果是否含有java 6. ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
微信小程序android错误,app安卓端跳转到微信小程序失败
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] app安卓端跳转到 ...
android 外部内容分享到app内,外部跳转APP
需求广告推广.华为微服务:通过外部网页或者卡片跳转到我们的app指定界面.如果app已经存在打开app,app不存在跳转下载界面. APP配置 android:name=".Launche ...

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

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

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

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

uni-app web-view跳转自定义html相关推荐

最新文章

热门文章

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

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

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

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

uni-app web-view跳转自定义html相关推荐

最新文章

热门文章

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

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