浅析网页与小程序间怎么进行通信
我们的微信小程序采用的web-view的方式内嵌H5项目,从而减少开发量,在实际只用中会遇到网页与小程序通信的功能需要,下面我简单总结了我遇到的问题以及解决方案。
小程序提供的功能
微信提供了网页向小程序发送消息的方法:wx.miniProgram.postMessage,该方法向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件。
具体API详情可以查看 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
简单介绍一下如果使用,以分享为例,如果页面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方法只有特定场景可以获取消息,所以如果非特定场景怎么获取通信呢?
一种简单的获取通信的方法
我提供的解决方案可能不是最优的也不是最通用的,但是如果遇到了问题时可以作为一个备选方案。
1、场景还原
我们的小程序中有城市定位,第一次进入小程序需要选择所在城市,选择城市之后会缓存到本地,之后再次进入小程序不再需要重选选择城市。功能如下截图
选择城市之后会在首页右上角展示
由于城市选择页面和首页都是通过web-view内嵌小程序的方式,所以显然在H5页面中进入缓存,在小程序中是无法获取到缓存信息的。
2、解决方案
解决方案很简单,我跟后端的同伴沟通后,拜托他提供给我一个接口,把城市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); } }, });
总结
“温故而知新,可以为师矣。”
有时候回过头来看看某些知识点,也许就会有新的思路,与君共勉。ヾ(◍°∇°◍)ノ゙
一首小诗
看了一眼日期,发现12月,2021年最后一个月了,我之前写过了一首小诗,有点符合我现在的心境,也有一些祝福送给自己也送给大家。
眼前是一扇窗, 窗外是变换的景色, 夜晚, 墨绿的树, 散落灯光的高楼大厦, 疾驰的汽车, 或匆忙或悠闲的行人。 我好像记住了每一座楼宇, 却不记得每一张面孔, 不变的建筑, 变换的路人。 今年, 有一些变化, 每一颗追求人生的心, 都值得期待, 每一个不舍的眼神, 笑容也无法遮掩。 致, 所有开发的伙伴, 一期一祈, 勿怀犹也, 幸福美好。
【相关学习推荐:小程序开发教程】
以上就是浅析网页与小程序间怎么进行通信的详细内容,更多请关注其它相关文章!
上一篇: 怎么把pycharm卸载干净
下一篇: python中阶乘怎么表示