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

最新推荐文章于 2024-08-26 15:31:47 发布

前端无涯

最新推荐文章于 2024-08-26 15:31:47 发布

阅读量613

点赞数 3

分类专栏： uniapp 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_44439817/article/details/140261788

版权

uniapp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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].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)

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