小程序中嵌套的h5页面设置分享转发
场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义。
实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享。
- h5发送给小程序通信代码
引用微信js1.3.2以上才支持,<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
判断h5是在小程序环境中打开代码:
//判断是否是小程序环境 function doMiniProgram(callback) { try { //小程序环境设置分享 var ua = window.navigator.userAgent.toLowerCase(); //判断是否是微信环境 if (ua.match(/MicroMessenger/i) == 'micromessenger') { //微信环境 wx.miniProgram.getEnv(function (res) { if (res.miniprogram) { callback(); } }) } } catch (ex) { console.log(ex); } }
给小程序发送数据设置小程序分享:
//设置小程序分享 function setMiniProgramShare(shareTitle, imageUrl, shareUrl) { try { doMiniProgram(function () { // 小程序环境下逻辑 wx.miniProgram.postMessage({ data: { title: shareTitle, path: shareUrl, imageUrl: imageUrl } }) }); } catch (ex) { console.log(ex); } }
- 小程序接收&处理逻辑
小程序页面: <web-view src="{{url}}" bindmessage="message"/>
小程序js定义message函数:
Page({ data: {shareData:{}}, onShareAppMessage(options) { return this.shareData }, message (e) { var that = this console.log(e) that.shareData = e.detail.data[0] } })
作者:简简人事
出处:http://www.cnblogs.com/codeon/
知乎:https://www.zhihu.com/org/jian-jian-ren-shi
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
出处:http://www.cnblogs.com/codeon/
知乎:https://www.zhihu.com/org/jian-jian-ren-shi
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
分类:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!