uniapp与webview通信

webview中html必须引入uni.webview.js文件。uniapp有提供的官方下载地址,去官网找一下。

html 复制代码
<script type="text/javascript" src="js/webview.js"></script>

1、uniapp发消息给webview

uniapp发送代码如下:

html 复制代码
<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>

<script>
    onLoad() {
        /* #ifdef APP-PLUS */
        
        this.webSrc = plus.io.convertLocalFileSystemURL('_www/hybrid/html/camera.html');
        var currentWebview = this.$scope.$getAppWebview()
        setTimeout(()=>{
            this.wv = currentWebview.children()[0];
        },1000)
        
        /* #endif */
    },
    methods: {
         /**
         * TODO 发送消息到webview
         * @param event
         */
        sendWebViewMessage(event){
            this.wv.evalJS("receiveAppMessage('" + JSON.stringify(event) + "')")
        },
    }
</script>

这里省略data中的数据。需要注意的是必须延时一秒再设定this.wv

webview接收代码如下:

复制代码
/**
 * 接收App的消息
 */
function receiveAppMessage(event) {
    console.log("收到消息:" + event);
    event = JSON.parse(event);
}

2、webview发消息给uniapp

webview发送代码如下:

js 复制代码
function sendAppMessage(event) {
    uni.postMessage({
        data: event
    });
}

uniapp接收代码如下:

vue 复制代码
<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>

handlePostMessage: function (event) {
    console.log('接收webview发送的消息:', JSON.stringify(event.detail.data));
},
相关推荐
游戏开发爱好者88 小时前
iOS 开发推送功能全流程详解 从 APNs 配置到上架发布的完整实践(含跨平台上传方案)
android·macos·ios·小程序·uni-app·cocoa·iphone
栈狮8 小时前
uniApp使用支付宝云开发问题集合
uni-app
Heyuan_Xie8 小时前
uni-app facebook登录
uni-app·uni-app插件
Heyuan_Xie8 小时前
uni-app OCR图文识别
uni-app·ocr·uni-app插件
一只程序熊9 小时前
uniapp引入uniim后聊天列表无法加载出来
uni-app
学会煎墙1 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝1 天前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
晨枫阳1 天前
uniapp兼容问题处理总结
前端·vue.js·uni-app
iOS阿玮1 天前
苹果 Swift 安卓SDK上线,用一套 Swift 代码开发安卓 App 成为可能!
uni-app·app·apple
2501_915921431 天前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview