uniapp vue3中使用webview在微信小程序中实现双向通讯

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

          evalJs(改变webview背景颜色)  import { ref } from 'vue'const webview = ref(null)const handlerMessage = (e:any) => {  console.log('快来---------')  console.log('webview的', e)  console.log('webview的webview', webview.value)}.test {  position: relative;}.button {  position: absolute;  top: 1200rpx;  left: 0;}

注意这里的script标签，需要引入

              Document        点击    测试fabric 来一个window            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))      })    })  

需要说明一下的是你在html中写console.log的时候，在微信小程序不触发是正常的，不要想着用console.log去调试了，alert是可以用的

因为小程序内嵌的是一个网页，网页是支持放大缩小的，但是没有办法规定***不让他放大缩小，只能在mate标签上加点限制了