网页与小程序间怎么进行通信？下面本篇文章给大家介绍一下关于网页与小程序通信的相关知识，希望对大家有所帮助！
我们的微信小程序采用的web-view的方式内嵌H5项目，从而减少开发量，在实际只用中会遇到网页与小程序通信的功能需要，下面我简单总结了我遇到的问题以及解决方案。
小程序提供的功能
微信提供了网页向小程序发送消息的方法：wx.miniProgram.postMessage，该方法向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件。
具体API详情可以查看微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
简单介绍一下如果使用，以分享为例，如果页面A需要特别设置分享内容，比如转发标题、缩略图等。可以再网页中设置好变量值，通过发送给小程序
网页
letshareData={path:'转发路径',title:'自定义转发标题',imageUrl:'缩略图url',};wx.miniProgram.postMessage({data:JSON.stringify(shareData)});
小程序
index.wxml
通过bindmessage绑定接收事件
<web-viewbindmessage='getMessage'src='{{src}}'></web-view>
index.js
//获取从网页发送来的消息getMessage(e){constgetMessage(e){//data是多次postMessage的参数组成的数组const{data}=e.detail;//需要取最后一条数据letshareMessage=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，进而再小程序里面缓存处理，这样用户再次进入小程序的时候无需再次选择城市
网页
//保存城市信息constsaveCityHandle=()=>{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);}},});总结
“温故而知新,可以为师矣。”
有时候回过头来看看某些知识点，也许就会有新的思路，与君共勉。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/40068.html；
