写点什么

「小程序开发」关于网页与小程序的通信

作者:叶一一
  • 2022-10-14
    北京
  • 本文字数:1443 字

    阅读完需:约 1 分钟

「小程序开发」关于网页与小程序的通信

前言

我们的微信小程序采用的 web-view 的方式内嵌 H5 项目,从而减少开发量,在实际只用中会遇到网页与小程序通信的功能需要,下面我简单总结了我们项目中遇到的问题以及解决方案。

该方案来自当时开发的同事,博主通过需求迭代优化时,进行代码阅读和功能总结。


小程序提供的功能

微信提供了网页向小程序发送消息的方法:wx.miniProgram.postMessage,该方法向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件。

具体 API 详情可以查看微信开放文档

简单介绍一下如果使用,以分享为例,如果页面 A 需要特别设置分享内容,比如转发标题、缩略图等。可以再网页中设置好变量值,通过发送给小程序

web 页面

  • 全局引入微信 JSSDK;

  • web 页面使用 wx.miniProgram.postMessage 进行与小程序的通信。

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,进而再小程序里面缓存处理,这样用户再次进入小程序的时候无需再次选择城市

web 页面

// 保存城市信息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);    }  },});
复制代码

总结

“温故而知新,可以为师矣。”

偶尔阅读老代码,梳理功能点,收获新思路,是一个不错的提升方式 。

发布于: 刚刚阅读数: 3
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「小程序开发」关于网页与小程序的通信_前端_叶一一_InfoQ写作社区