uniapp vue3中使用webview在微信小程序中实现双向通讯
直接上图，注意事项是这里
官网链接: https://uniapp.dcloud.net.cn/component/web-view.html
传递方法的话好像只能通过url来传，其它方式不支持，，，我这个参数没做处理，用的话记得把参数做一下处理
也就是说传递数据之后需要 uni.redirectTo({ url: '/pages/testFabric/index' }) 特定时机，当然用其他的也行，比如uni.navigateBack()，但是在我这不好使。这样vue中 @message="handlerMessage"才会触发
下面是代码
vue3 ts代码 src就是项目启动的网络地址，他必须要用网络地址，
scr后面拼接参数记得做处理，转成json
<template>
<view>
<web-view
src="http://xxxx:5173/src/static/fabric.html?iii=0"
@message="handlerMessage"
ref="webview"
></web-view>
<view class="button">evalJs(改变webview背景颜色)</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const webview = ref(null)
const handlerMessage = (e:any) => {
console.log('快来---------')
console.log('webview的', e)
console.log('webview的webview', webview.value)
}
</script>
<style lang="scss" scoped>
.test {
position: relative;
}
.button {
position: absolute;
top: 1200rpx;
left: 0;
}
</style>
注意这里的script标签，需要引入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="btn" id="btn">点击</button>
测试fabric 来一个window
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script
type="text/javascript"
src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
></script>
<script>
const button = document.getElementsByClassName('btn')
const button2 = document.querySelector('.btn')
button2.addEventListener('click', () => {
console.log('h5 click')
uni.postMessage({
data: {
action: 'autoLogin'
}
})
// uni.navigateBack()
// 可以跳转
uni.redirectTo({
url: '/pages/testFabric/index'
})
uni.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res))
})
})
</script>
</html>
需要说明一下的是你在html中写console.log的时候，在微信小程序不触发是正常的，不要想着用console.log去调试了，alert是可以用的文章来源：https://www.toymoban.com/news/detail-849688.html
因为小程序内嵌的是一个网页，网页是支持放大缩小的，但是没有办法规定死不让他放大缩小，只能在mate标签上加点限制了文章来源地址https://www.toymoban.com/news/detail-849688.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
到了这里，关于uniapp vue3中使用webview在微信小程序中实现双向通讯的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
