H5 在微信上分享如何自定义标题+内容+图片
1、在微信上分享的时候发现只有头部标题显示,没有内容和图片,那么如何自定义内容和图片呢? 首先第一步在 index.html先引入微信JS sdk
1 | <script type= "text/javascript" src= "http://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script> |
2、加上一下js代码,就可以达到自定分享效果了
$(function() { //创建分享 function funcShare() { $.ajax({ async: false, url: "../ShareHandler.ashx", data: { dataurl: location.href.split("#")[0] }, success: function(res) { var json = eval("(" + res + ")"); console.log(json); var jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone" ]; wx.config({ debug: false, appId: json.wxappid, timestamp: json.timestamp, nonceStr: json.noncestr, signature: json.strSige, jsApiList: jsApiList }); } }); } //签名完成 wx.ready(function() { // console.log("验证完成!!!"); //分享的头部标题 var title = "标题"; //分享的内容 var desc = "内容"; var link = location.href.split("#")[0]; //分享要显示的右下角小图片(服务器图片路径) var imgUrl = "http://www.baidu.com/..../logo.png"; //朋友圈 wx.onMenuShareTimeline({ title: title, link: link, imgUrl: imgUrl }); //朋友 wx.onMenuShareAppMessage({ title: title, desc: desc, link: link, imgUrl: imgUrl }); //QQ wx.onMenuShareQQ({ title: title, desc: desc, link: link, imgUrl: imgUrl }); //微博 wx.onMenuShareWeibo({ title: title, desc: desc, link: link, imgUrl: imgUrl }); //QQ空间 wx.onMenuShareQZone({ title: title, desc: desc, link: link, imgUrl: imgUrl }); }); funcShare(); })
分类:
H5移动端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期