uniapp vue3中使用webview在微信小程序实现双向通讯功能
作者：Motion_zq
微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用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
<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是可以用的
因为小程序内嵌的是一个网页，网页是支持放大缩小的，但是没有办法规定死不让他放大缩小，只能在mate标签上加点限制了
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
总结
到此这篇关于uniapp vue3中使用webview在微信小程序实现双向通讯功能的文章就介绍到这了,更多相关uniapp vue3 webview小程序双向通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！