1.实现app终端

注：为实现实时通信，app终端页面为.nvue。

代码实现。

2.H5端实现(基于uniapp的H5)。

2.1 manifest.json配置

将模板路径指向项目中的index.html。

2.2 index模板.html配置。

注：uni.webview.1.5.2.js 在static文件下放置文件路径

资源文件：https://www.alipan.com/s/3DayWBod57B。

2.3 实现H5代码，调用app端方法。

注：调用uni.postMessage 必须添加webview。

注：调用uni.postMessage 必须添加webview。

uni.webView.postMessage({ data: { method: 'getTitle', value: title } });

现在可以在H5端实现APP端的调用方法。

3.遇到的问题及解决方案。

3.1 H5有多个页面，app端使用.nvue无法显示网页标题。

解决方案，添加通信，每个新页面H5将网页标题传输到应用程序端，然后应用程序端手动更改标题（暂时想到愚蠢的方法，欢迎与其他解决方案沟通）。

app端实现代码。

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; } }。

H5端，在每个单页onshow获取网页标题，其实也可以直接传递每个标题的具体值。

onShow() { var pages = getCurrentPages() var page = pages[pages.length - 1] var title = page.$holder.navigationBarTitleText uni.webView.postMessage({ data: { method: 'getTitle', value: title } }); }。

3.2 H5跳转到二级页面，app点击退出webview页面。

3.2 H5跳转到二级页面，app点击退出webview页面。

解决方案，app退出拦截，根据网页标题判断是否退出当前页面，否则控制webview页面退出。onBackPress(event) { if (this.pageTitle == 'Invitar amigos') { uni.switchTab({ url: '/pages/home/index' }) } else { this.$refs.webview.evalJs("javascript:history.back(-1)"); } return true },

分享让更多人看到