如下是用uni-app开发的H5页面uni.navigateBack和uni.postMessage都不能用
<template>
<view class="content">
<button class="left" type="primary" @click="clickToEdit">重新编辑</button>
<button class="right" type="primary" @click="clickToSubmit">确认制作</button>
</view>
</template>
<!-- 微信 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>
export default {
data() {
return {
}
},
onLoad(option) {
},
methods: {
// ****************************************** Action ******************************************
//重新编辑
clickToEdit() {
uni.navigateBack({
delta: 1
})
},
//确定制作
clickToSubmit() {
uni.postMessage({
data: 1
});
},
}
}
</script>
<style>
.content {
background-color: #eeeeee;
}
</style>
10 个回复
3***@qq.com - 一只前端小白
请问楼主解决了吗
ThorUI_echo - 开源项目： https://thorui.cn/doc
https://github.com/dingyong0214/uni.webview.js
5***@qq.com
这个真不错,uniapp开发的网页端 和 app nvue端 两者通信卡了半天 网页端 一直报 uni.postMessage 方法不存在,用了这个封装后的就好了
2021-03-19 17:16
Qiuh
uni-app开发的H5页面可以参考这篇文章，使用window.postmessage进行通信：https://www.jianshu.com/p/e849cdb0e81e
8***@qq.com
请教下，最后是怎么解决的？
1***@qq.com
https://github.com/dingyong0214/uni.webview.js
2021-09-28 10:49
1***@qq.com
Vggghh
DCloud_uniCloud_WYQ
可以配置H5模版页面， 在模板内插入uni.webview.js , 封装一次uni.webview.js内的接口。然后在H5内调用封装后的接口。
参考链接
一零四三
用了最新的 不行啊
2020-10-26 17:54
2***@qq.com
回复 一零四三: 最后有解决方案吗？
2020-11-16 10:10
1***@qq.com
https://github.com/dingyong0214/uni.webview.js
2021-09-28 10:49
h***@haomo-studio.com - 热爱技术的企业家
引入了最新的 https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js，依然无法使用 uni.postMessage....
2***@qq.com
请问最后解决了吗？怎么解决的？
2020-11-16 10:10
1***@qq.com
https://github.com/dingyong0214/uni.webview.js
2021-09-28 10:49
6***@qq.com
回复 1***@qq.com: 也不好用啊，小程序接收不到消息
2021-12-01 13:20
d***@qq.com
这个方法有用!测试了
app是uni开发的,H5也是uni开发的, 用他这个方法能通信
8***@qq.com
为啥我的行不通呢，小程序是uniapp开发的，h5也是；
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<button @click="sendMsg">点我</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
</script>
小程序的：
<template>
<web-view
src="http://127.0.0.1:8080/"
@message="handleMessage"
></web-view>
</template>
<script>
export default {
methods: {
handleMessage(e) {
console.log(e);
},
},
};
</script>
<style></style>
2021-10-29 23:15
echolaw
回复 8***@qq.com: https://ask.dcloud.net.cn/article/39273
2022-02-25 13:30
8***@qq.com
请问为啥我的接收不到参数呢
这是web-view的页面
<template>
<view class="about">
<button @click="sendMsg">点击</button>
</view>
</template>
<script>
export default {
data() {
return {
</script>
这是引用的页面
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<web-view src="http://192.168.2.200:8081/" @message="msg"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// document.querySelectorAll("webview")[1].showDevTools(true);
console.log('index-test')
},
methods: {
msg(e) {
alert('触发传值')
console.log(e);
}
}
}
</script>
6***@qq.com
解决了吗？
2021-12-01 13:20
echolaw
回复 6***@qq.com: https://ask.dcloud.net.cn/article/39273
2022-02-25 13:30
echolaw
uni开发的小程序、h5相互通讯，已经有题主完美解决了。厉害！
https://ask.dcloud.net.cn/article/39273