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

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.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].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页面了

解决方案,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
        },