HTML静态网页怎么添加微信分享小图标和分享描述标题
文章来源:小灰博客| 时间:2020-03-11 17:03:33| 作者:Leo | 5 条评论
时间过的真快,转眼间2020年了,翻开博客看了下上一篇的文章是记录在2019年1月份,1年多过去了,很少接触一些技术性的东西了,正置疫情期间,大都没上班,我给客户做了一个专题页,涉及到一个问题是HTML静态页面在微信分享的时候没有图标和描述,只有标题和网址,非常的丑,网上翻了一些教程,大都是需要后台,服务端之类的,有一些纯静态的写的也不完整,今天我来补充下,做一套完整的静态页面微信分享标题描述和图片。
第一,首先你的有一个认证的微信公众平台,备案过的域名,服务器,(域名和服务器是一个网页必须具备的,公众平台是因为你要在微信分享,需要配置一些东西)
第二,在公众平台里找到 设置-公众号设置-功能设置-JS安全域名,这里填好你网页的域名(保存的时候需要验证文件,下载好上传到网页目录即可,这一步不会的百度百度百度怎么配置JS安全域名,说三遍)
第三,在开发-基本设置-IP白名单里加上你服务器的IP地址(必须加)
第四,除了你的HTML页面外,你还需要几个必须加载的文件,jssdk.php,jquery-1.11.3.min.js,jsapi_ticket.json,access_token.json,这几个是什么东西呢,我也不详细说他是干嘛的了,我就告诉你jssdk.php这里需要打开最最下面写上你的APPID和开发者密钥,这两个在公众号后台的开发-基本设置里能找到,然后jquery这个就是加载jquery,弄对路径就行,后面的jsapi_ticket.json和access_token.json,就是两个空白文件,用记事本创建好,一起把他传到服务器上,需要注意jssdk.php、jsapi_ticket.json和access_token.json这三个必须要在同一目录,而且后两个需要有写入权限,最后这几个文件哪里来?我知道你们懒 我给你打包好了,你下载就行(点此下载)
第五,最后一步就是在你的HTML里加分享代码了,把下面代码加到文件里就OK了,或者你怕复制错的话上面下载的包里也有这个文件内容,叫index.html(下面代码有需要自己修改的都标注注释了 好好看清楚)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script src="js/jquery-1.11.3.min.js"></script> <!-- 刚才的jquery放到哪里就加载哪里的--> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><!--加载微信的JS 照抄--> <script> var url=encodeURIComponent(window.location.href.split('#')[0]);//分享成功之后再次分享,微信会再url附带额外参数造成二次分享签名错误,这里处理下避免config:invalid signature签名失效 $.ajax({ type : "get", url : "http://xxx.com/jssdk.php?url="+url,//替换网址,刚才把下载好的jssdk.php放到哪里就加载哪里 dataType : "jsonp", jsonp: "callback", jsonpCallback:"success_jsonpCallback", success : function(data){ wx.config({ debug: false, // 开启调试模式,有问题的时候能看到报错,正式上线后记得改成fales关闭,不然上线了分享的时候会有英文提示 appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ "onMenuShareTimeline", //分享给好友 "onMenuShareAppMessage", //分享到朋友圈 "onMenuShareQQ", //分享到QQ "onMenuShareWeibo" //分享到微博 ] }); }, error:function(data){ alert(JSON.stringify(data)); //alert("连接失败!"); } }); wx.ready(function (){ var shareData = { title: '分享标题 这里自定义', desc: '分享描述这里自定义',//这里请特别注意是要去除html link: 'http://xxx.com',//分享后打开的链接 imgUrl: 'http://xxxx.com/images/banner.jpg'//分享图标 }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData); wx.onMenuShareQQ(shareData); wx.onMenuShareWeibo(shareData); }); </script> |
同时也欢迎各位技术爱好者加入IT技术群(点击即可):70035098 互相交流学习!
5条评论
thx8xj
imgUrl: ‘http://xxxx.com/images/banner.jpg’//分享图标
这个URL不要用HTTPS,我用了https不显示图片,用http就正常了,感谢博主提供解决办法!现在已经完美实现了想要的!
不成功。。。哪里错了,,,是因为这个教程过时了吗
错了分享下代码或者报错信息啊,没有过时的,我一直在用
“onMenuShareTimeline:fail, the permission value is offline verifying”