uniapp跨平台开发---webview调用app方法

1.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].methodlet value = e.detail.data[0].valueswitch (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)

2.1 manifest.json配置

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

2.2 模板index.html配置

注意:uni.webview.1.5.2.js 文件路径,放在static文件下

资源文件放在:https://www.alipan.com/s/3DaYWBod57B

<!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代码实现,调用app端方法

注意:调用uni.postMessage 一定要加上webView

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

现在就可以实现在H5端调用app端的方法

3.遇见的问题及解决方案

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

解决方案,增加通信,每一个新页面H5将网页标题传递给app端,然后app端手动更改标题(暂时想到的笨办法,有其他解决方案的欢迎交流)

app端实现代码

onPostMessage(e) {let method = e.detail.data[0].methodlet value = e.detail.data[0].valueswitch (method) {case 'getTitle':this.pageTitle = valueuni.setNavigationBarTitle({title: value})break;default:break;}}

H5端,在每个单页面onShow都获取网页标题,其实也可以直接把每个标题具体值直接传过去

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

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},