3.遇到的问题及解决方案
发布时间：2025-06-24 19:12:09 作者：北方职教升学中心 阅读量：755
3.1 H5有多个页面，
代码实现。
app端实现代码。3.遇到的问题及解决方案。添加通信，根据网页标题判断是否退出当前页面，onShow() { var pages = getCurrentPages() var page = pages[pages.length - 1] var title = page.$holder.navigationBarTitleText uni.webView.postMessage({ data: { method: 'getTitle', value: title } }); }。onBackPress(event) { if (this.pageTitle == 'Invitar amigos') { uni.switchTab({ url: '/pages/home/index' }) } else { this.$refs.webview.evalJs("javascript:history.back(-1)"); } return true },app点击退出webview页面。每个新页面H5将网页标题传输到应用程序端，
onPostMessage(e) { let method = e.detail.data[0].method let value = e.detail.data[0].value switch (method) { case 'getTitle': this.pageTitle = value uni.setNavigationBarTitle({ title: value }) break; default: break; } }。否则控制webview页面退出。然后应用程序端手动更改标题（暂时想到愚蠢的方法，
注：调用uni.postMessage 必须添加webview。注：uni.webview.1.5.2.js 在static文件下放置文件路径
资源文件：https://www.alipan.com/s/3DayWBod57B。
H5端，app点击退出webview页面。3.2 H5跳转到二级页面，调用app端方法。
2.1 manifest.json配置
将模板路径指向项目中的index.html。
1.实现app终端
注：为实现实时通信，注：调用uni.postMessage 必须添加webview。
2.2 index模板.html配置。
3.2 H5跳转到二级页面，其实也可以直接传递每个标题的具体值。在每个单页onshow获取网页标题，欢迎与其他解决方案沟通）。app端使用.nvue无法显示网页标题。app退出拦截，app终端页面为.nvue。解决方案，
<template> <view class="content"> <view class="web-view"> <web-view class="web-view" :src="url" ref="webview" @onPostMessage="onPostMessage"></web-view> </view> </view></template><script> export default { data() { return { url: '', } }, methods: { onPostMessage(e) { let method = e.detail.data[0].method let value = e.detail.data[0].value switch (method) { case 'test': console.log("test") break; case 'back': uni.switchTab({ url: '/pages/home/index' }) break; case 'copy': uni.setClipboardData({ data: value, showToast: false, success: function() { uni.showToast({ title: 'copy', duration: 2000 }); } }) break; default: break; } } } }</script><style scoped lang="scss"> .content { width: 750rpx; flex: 1; background-color: #f7f7f7f7; display: flex; align-items: center; height: 100vh; .web-view { height: 100%; width: 750rpx; flex: 1; } }</style>
2.H5端实现(基于uniapp的H5)。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title> <%= htmlWebpackPlugin.options.title %> </title> <script> var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />') </script> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> </head> <body> <div id="app"></div> </body> <script type="text/javascript" src="./static/js/uni.webview.1.5.2.js"></script> <script> document.addEventListener('UniAppJSBridgeReady', function() { uni.webView.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); }); </script></html>
2.3 实现H5代码，
uni.webView.postMessage({ data: { method: 'getTitle', value: title } });
现在可以在H5端实现APP端的调用方法。
