uniapp vue3中使用webview在微信小程序实现双向通讯功能
更新时间：2024年07月11日 11:13:30 作者：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小程序双向通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
放大镜在很多地方都可以使用的到，本文主要介绍了vue结合leaflet实现地图放大镜，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了Vue项目中components组件(模板)的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue项目中如何配置src文件下的@别名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于vue中跳转界面的3种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
这篇文章主要介绍了详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
element-ui复杂table表格动态新增列、动态调整行以及列顺序详解
这篇文章主要给大家介绍了关于element-ui复杂table表格动态新增列、动态调整行以及列顺序的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要介绍了利用vueJs实现图片轮播实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家介绍了vue3 diff 的算法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论