关于网页与小程序的通信【玩转小程序】
前言
我们的微信小程序采用的web-view的方式内嵌H5项目，从而减少开发量，在实际只用中会遇到网页与小程序通信的功能需要，下面我简单总结了我遇到的问题以及解决方案。
小程序提供的功能
微信提供了网页向小程序发送消息的方法：wx.miniProgram.postMessage，该方法向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件。
具体API详情可以查看微信开放文档。
简单介绍一下如果使用，以分享为例，如果页面A需要特别设置分享内容，比如转发标题、缩略图等。可以再网页中设置好变量值，通过发送给小程序
网页
let shareData = {
path: '转发路径',
title: '自定义转发标题',
imageUrl: '缩略图url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });小程序
index.wxml
通过bindmessage绑定接收事件
<web-view bindmessage="getMessage" src="{{ src }}"></web-view>index.js
// 获取从网页发送来的消息
getMessage(e) {
const getMessage (e) {
// data是多次postMessage的参数组成的数组
const { data } = e.detail;
// 需要取最后一条数据
let shareMessage = data[data.length - 1];
this.shareMessage = JSON.parse(shareMessage);
};
// 设置分享
onShareAppMessage(options) {
return {
title: this.shareMessage.title,
path: this.shareMessage.path,
imageUrl: this.shareMessage.imageUrl,
};
}这样一次定制化分享功能就完成了，但是postMessage方法只有特定场景可以获取消息，所以如果非特定场景怎么获取通信呢？
一种简单的获取通信的方法
我提供的解决方案可能不是最优的也不是最通用的，但是如果遇到了问题时可以作为一个备选方案。
场景还原
我们的小程序中有城市定位，第一次进入小程序需要选择所在城市，选择城市之后会缓存到本地，之后再次进入小程序不再需要重选选择城市。功能如下截图
选择城市之后会在首页右上角展示
由于城市选择页面和首页都是通过web-view内嵌小程序的方式，所以显然在H5页面中进入缓存，在小程序中是无法获取到缓存信息的。
解决方案
解决方案很简单，我跟后端的同伴沟通后，拜托他提供给我一个接口，把城市id和用户信息关联起来，这样我就可以再用户进行小程序的时候获取用户上次选择的城市id，进而再小程序里面缓存处理，这样用户再次进入小程序的时候无需再次选择城市
网页
// 保存城市信息
const saveCityHandle = () => {
saveCity({
cityId: cityId,
userId: userId,
}).then(() => {});
};小程序
获取城市id之后通过wx.setStorageSync缓存下来，以便后续使用。
wx.login({
success(res) {
if (res.code) {
wx.request({
url: `${that.domain()}/getUserInfo`,
data: {
body: { jsCode: res.code },
},
success(res) {
wx.setStorageSync('cityId', res.data.cityId);
},
});
} else {
console.log('登录失败！' + res.errMsg);
}
},
});总结
“温故而知新,可以为师矣。”
有时候回过头来看看某些知识点，也许就会有新的思路，与君共勉。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）