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].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
        },
相关推荐
Heyuan_Xie3 小时前
uni-app 选择国家区号
uni-app·uni-app插件·区号选择
2501_9160137411 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0113 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
從南走到北13 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
htt232115 小时前
用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
华为·uni-app·harmonyos
2501_9151063215 小时前
Fiddler 中文版抓包实战 构建标准化调试流程提升团队协作效率
android·ios·小程序·https·uni-app·iphone·webview
FinelyYang2 天前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
浩星2 天前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
IT 前端 张2 天前
uni-app在安卓设备上获取 (WIFI 【和】以太网) ip 和 MAC
android·tcp/ip·uni-app