微信小程序组件 Web-view 定义：承载网页的容器
1.相关 api
接口名 | 说明 |
|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 |
wx.miniProgram.switchTab | 参数与小程序接口一致 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 |
wx.miniProgram.postMessage | H5 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件 |
wx.miniProgram.getEnv | 获取当前环境 |
2.小程序->H5 通过 URL 拼接参数携带信息 navigateTo、reLaunch、redirectTo
实现方式：
代码语言：javascript复制wx.miniProgram.navigateTo({ url: '/h5/loading-page', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=ccccc', })
wx.miniProgram.navigateTo({ url: '/h5/loading-page?type=aaaaaa', })缺点：url 数据量有限，且需要打开界面
3.H5->小程序 wx.miniProgram.postMessage api
H5 页面传参：
代码语言：javascript复制//js项目直接引入sdk;
//vue项目使用引入sdk //需要安装依赖 npm install weixin-webview-jssdk
//使用的页面引入 import wx from "weixin-webview-jssdk"; //H5页面
var vm = new Vue({
el: ".container",
data: {
input1: "333333",
},
created() {},
methods: {
//向小程序传递参数foo
send1() {
wx.miniProgram.postMessage({ data: { foo: this.input1 } });
},
},
});小程序页面接收参数：
代码语言：javascript复制// 获取应用实例
const app = getApp()
export default {
//页面的初始数据
data() {
return {
url: '',
Title:''
}
},
//生命周期函数--监听页面加载
onLoad: function (options) {
if (options.from && options.from === 'electron') {
this.url = decodeURIComponent(options?.url)
console.log('webview url', this.url)
} else {
this.url = options?.url || app.globalData.H5LinkUrl
}
},
// 用户点击右上角分享
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'
}
},
//webview 组件的三个原生事件
bindload(){
console.log('webview load success')
}
binderror(){
console.log('webview load error')
},
methods: {
//网页向小程序 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
})
}
}
}优点：接入成本低 缺点：向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件，只能这些特定时机；
方式三：内存共享
无法实现，原因 wx.setStorage 与 localStorage 隔离
代码语言：javascript复制localStorage.setItem('h5key','value')
wx.setStorageSync('wx-key', 'value')4.长连-Websocket
- Websocket 简介：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；
- 建立在 TCP 协议之上，服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
- 数据格式比较轻量，性能开销小，通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是 ws（如果加密，则为 wss），服务器网址就是 URL。 优点：可以实现实时通信 缺点：成本高，服务器压力大等；放弃此方式。
5.现状及其展望
- 微信并不鼓励在小程序中大范围嵌入 H5，为了避免开发者把小程序变成“浏览器”，微信对小程序与内嵌 H5 的通讯做了诸多限制
- 尽量使用单一方式实现，比如纯小程序原生，将 h5 功能移至小程序原生
- 原生页面与 H5 之间通过 URL 进行通信
- 不要尝试越过 wx 限制
- 不得不用混合开发时，尽量做好优化，引入骨架屏等优化方式提高用户体验感
- 以上三种方式均未很好实现 web-view 与 H5 双向通信
