1、miniProgram --> webviewH5
官网没有提供发送的接口,只能通过修改web-view的src属性,使用&来附加参数,并在网页中解析参数。
这一点可以做到。只是这意味着小程序每次向网页传参,都要刷新一次网页。
2、webviewH5 --> miniProgram
在web-view中添加bindmessage属性,并绑定一个函数,用于监听网页发来的消息。
在网页中引入jweixin-x.x.x.js,然后通过js调用微信JSSDK的wx.miniProgram.postMessage()来向小程序发送数据。
网页向小程序postMessage 时,只有在(小程序后退、组件销毁、分享)这三种情况下,bindmessage才会被触发并接收消息。所以,即使在网页中调用了wx.miniProgram.postMessage(),小程序也不会立即响应,bindmessage所绑定的函数不会执行。
三、传参限制
网页和小程序之间即时传参无法实现,不过小程序可以通过web-view的src属性来切换网页,网页也可以通过wx.miniProgram.navigateTo()来切换小程序的页面。这些功能都是微信通过JSSDK为web-view所内嵌的网页提供的支持,但仅仅是提供了一部分JSSDK的功能,限制同样很多。
1、小程序页面
<web-view
class
=
'webview'
src=
"{{url}}"
bindload=
"bindload"
binderror=
"binderror"
bindmessage=
"getMessage"
></web-view>
data
: {
url
:
''
,
Title
:
''
bindload
(
){
console
.
log
(
'webview load success'
)
binderror
(
){
console
.
log
(
'webview load error'
)
getMessage
:
function
(
res
){
console
.
log
(
"H5传递过来的参数"
,res.
detail
.
data
);
this
.
setData
({
Title
: res.
detail
.
data
[res.
detail
.
data
.
length
-
1
].
foo
* 用户点击右上角分享
onShareAppMessage
(
res
) {
console
.
log
(
"接收H5传入的参数this.data.Title"
,
this
.
data
.
Title
);
return
{
title
:
this
.
data
.
Title
,
path
:
'/pages/index/index?type=index'
,
imageUrl
:
'https://picsum.photos/100/200'
2、webview H5页面
//引入sdk;
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<div class="container">
请输入向小程序传递的变量foo的值:<input type="text" v-model="input1"/> <br/>
<input type="button" class="btn_send" value="sendMessage" @click="send1"> <br/>
</div>
<script>
var vm = new Vue({
el: ".container",
data: {
input1: '333333',
created() {
methods: {
send1() {
console.log("this.input1",this.input1);
wx.miniProgram.postMessage({ data: { foo: this.input1 } })
mounted() {
</script>
参考:www.jisuapp.cn/news/6784.h…