关于网页与小程序的通信【玩转小程序】

举报
叶一一 发表于 2023/02/15 19:35:05 2023/02/15
【摘要】 分享我在小程序开发中,总结的关于网页与小程序的通信的解决方案。

前言

我们的微信小程序采用的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方法只有特定场景可以获取消息,所以如果非特定场景怎么获取通信呢?


一种简单的获取通信的方法

我提供的解决方案可能不是最优的也不是最通用的,但是如果遇到了问题时可以作为一个备选方案。

场景还原

我们的小程序中有城市定位,第一次进入小程序需要选择所在城市,选择城市之后会缓存到本地,之后再次进入小程序不再需要重选选择城市。功能如下截图

image.jpeg


选择城市之后会在首页右上角展示

image.jpeg

由于城市选择页面和首页都是通过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畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。