一、web-view
小程序开放能力,web-view可用于在小程序中内嵌网页,会自动铺满整个小程序页面。
二、小程序与网页之间的数据交互
-
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>
//js 文件
data: {
url: '',
Title:''
}
//webview 组件的三个原生事件
bindload(){
console.log('webview load success')
}
binderror(){
console.log('webview load error')
}
//网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组
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: {
//向小程序传递参数foo
send1() {
console.log("this.input1",this.input1);
wx.miniProgram.postMessage({ data: { foo: this.input1 } })
},
},
mounted() {
},
})
</script>