如何在网页和小程序之间通信（小程序与网站同步）

网页和小程序之间如何通信？下面这篇文章给大家提供了一些关于网页和小程序之间通信的信息，希望对大家有所帮助！

我们的微信小程序以web -视图的方式嵌入了H5项目，减少了开发量。在实际使用中，我们将满足网页和小程序之间通信的功能需求。下面我简单总结一下我遇到的问题和解决方法。

小程序提供的功能微信提供了一种从网页向小程序发送消息的方法:wx.miniProgram.postMessage该方法向小程序发送消息，小程序将在特定时间触发组件的消息事件（小程序返回、组件销毁和共享）。

如果使用的话简单介绍一下。以分享为例。如果A页需要设置特殊的分享内容，如转发标题和缩略图等。您可以在网页中设置变量值并将其发送到小程序。

网页

let shareData = { path:& # 39；前进道路& # 39；，标题:& # 39；自定义转发标题& # 39；，imageUrl:& # 39；缩略图url & # 39,};wx . mini program . postmessage（{ data:JSON . stringify（shareData）}）；小程序；迷你程序

index.wxml

通过bindmessage绑定接收事件

索引. js

//获取消息getmessage（e）{ const getmessage（e）{//数据是由多个postMessage的参数组成的数组const { data } = e.detail//你需要获取最后一段数据，让shareMessage = data。

选择城市后，它将显示在主页的右上角。

因为城市选择页面和主页都通过web -视图嵌入了小程序，所以当您进入H5缓存页面时，显然无法获取缓存的信息。

2.解决方法

解决办法很简单。我和后端的合作伙伴沟通后，请他给我提供一个接口，将城市id和用户信息关联起来，这样我就可以在用户执行小程序时获取用户上次选择的城市id，然后缓存在小程序中，这样用户再次进入小程序时就不需要再次选择城市了。

网页

//保存城市信息const savecitiyhandle =（）=》{保存城市（{Cityid: Cityid，userid: userid，}）。然后（（）=》{ }）；};小程序；迷你程序

获取城市id后，通过wx.setStorageSync进行缓存以备后续使用。

wx . log in（{ success（RES）{ if（RES . code）{ wx . request（{ URL:` $ { that . domain（）} }/get userinfo `，data: { body: { jsCode: res.code }，}，success（RES）{ wx . setstoragesync（& # 39；cityId & # 39，RES . data . city id）；}, });} else { console . log（& # 39；登录失败！'+RES . errmsg）；} },});总结“温故而知新，可以为师。”

有时候当你回顾一些知识点时，你可能会有新的想法和你分享。ヾ(◍ ∇ ◍)ﾉﾞ

一首小诗扫了一眼日期，发现2021年的最后一个月12月，我之前写了一首小诗，有点符合我现在的心情，也有一些对自己和大家的祝福。

我们面前是一扇窗户，窗外是变幻的风景，夜晚，深绿色的树木，灯光分散的高楼大厦，飞驰的汽车，或匆忙或悠闲的行人。我似乎记得每一栋建筑，但我不记得每一张脸，同一栋建筑和不断变化的路人。今年，有一些变化。每一颗追求生活的心都值得期待，每一个不情愿的眼神和笑容都无法掩饰。致所有发展伙伴，请第一时间祈祷，不要怀孕，要幸福美丽。【相关学习推荐:小程序开发教程】

以上是网页和小程序如何通信的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• VuePress制作个人网页（使用vue作为网站）
• WIN10无法显示网页，提示此网站不安全（连接到网络的计算机显示此网站不安全）。
• 网页没有声音（如何调谐没有声音的网页）
• VuePress制作个人网页(vuepress博客)
• WIN10无法显示网页，告诉我这个站点不安全怎么办(电脑打开网页显示这个站点不安全)

本文由主机参考刊发，转载请注明：如何在网页和小程序之间通信（小程序与网站同步） https://zhujicankao.com/105738.html