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项目实现搜索内容变红色显示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)
这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下2023-08-08
下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 验证两次输入的密码是否一致的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在vue中，我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的，使用的时候是自己全局注册组件时的名称，而不是组件名，这篇文章主要介绍了vue3中批量全局注册组件,需要的朋友可以参考下2023-05-05
vue + element-ui 季度选择器组件 el-quarter-picker示例详解
本文介绍如何在Vue项目中使用基于Element-UI的季度选择器组件ElQuarterPicker,通过引用并调用ElQuarterPicker.vue组件来实现季度选择功能,感兴趣的朋友跟随小编一起看看吧2024-09-09
这篇文章主要介绍了vue2.0实现的tab标签切换效果,结合实例形式分析了vue.js实现内容可自定义的tab点击切换功能相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了在vue中嵌入外部网站的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了利用Dectorator分模块存储Vuex状态的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论