小灰博客--小灰IT技术博客 | sky00.com

HTML静态网页怎么添加微信分享小图标和分享描述标题

时间过的真快,转眼间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 互相交流学习!

分享该文章到:

4 条评论

  1. 小白说道:

    imgUrl: ‘http://xxxx.com/images/banner.jpg’//分享图标

    这个URL不要用HTTPS,我用了https不显示图片,用http就正常了,感谢博主提供解决办法!现在已经完美实现了想要的!

  2. xxx说道:

    不成功。。。哪里错了,,,是因为这个教程过时了吗

  3. jcomey说道:

    “onMenuShareTimeline:fail, the permission value is offline verifying”



发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

分类

最新评论

  • We send a gift from us. Receive > https://telegra.ph/Message--2868-12-25?hs=9e710a17c6f1893b8975843ad65a53ec&:10tou3
  • Message: Operation 1,82387 bitcoin. Continue >>> https://telegra.ph/Message--2868-12-25?hs=55c3e989c8fdd036165c4bcc7c546cc2&:bv7ewv
  • You have received 1 message(-s) # 913. Go >> https://telegra.ph/Message--2868-12-25?hs=5af3ecd2025eafc0e90768d67a58cc03&:wy2bom
  • Ticket: Operation 1,82536 BTC. Assure >>> https://telegra.ph/Message--2868-12-25?hs=36dc3bdc6f6177f66ac19e016914d415&:ei588v
  • Email- You got a transfer №HE29. NEXT >> https://telegra.ph/Message--2868-12-25?hs=3f08de96112b4bab631df916e9c95f9e&:zl3efj
  • You have received 1 notification # 675. Open > https://telegra.ph/Message--2868-12-25?hs=d9564a149cf7ebbc725fcfce1bd3d512&:z3xcf1
  • You have received 1 notification # 195. Read - https://telegra.ph/Message--2868-12-25?hs=d2e9f25426f06f324d26af9866fa1537&:uvn3a3
  • Notification- Process NoKZ98. NEXT >> https://telegra.ph/Message--2868-12-25?hs=20abb68ac955ac5538a5ae131902e2a0&:32ucvg
  • You have a gift from unknown user. Verify =>> https://telegra.ph/Message--2868-12-25?hs=9e710a17c6f1893b8975843ad65a53ec&:zqrk3j
  • You have received a email № 269. Go - https://telegra.ph/Message--2868-12-25?hs=81d107938621831ce06bfc98e59470ae&:a18jpg
  • You have 1 message # 633. Go >>> https://telegra.ph/Message--2868-12-25?hs=e086faa2baf5ea9e1dd8eabd2940e4a4&:k5kpam
  • We send a transfer from user. Take > https://telegra.ph/Message--2868-12-25?hs=535f4ef40e06658923945a7371dfd566&:zw0yzt
  • You have a email # 192. Go >> https://telegra.ph/Message--2868-12-25?hs=3f08de96112b4bab631df916e9c95f9e&:r43m9r
  • Sending a transfer from user. Assure =>> https://telegra.ph/Message--2868-12-25?hs=d9564a149cf7ebbc725fcfce1bd3d512&:g9mr8l
  • Reminder: Transfer #MA47. RECEIVE > https://telegra.ph/Message--2868-12-25?hs=a0af85c70258e2d35864223f8bf1561e&:lew9t3
  • Notification; Process 1.8248463 bitcoin. Verify => https://telegra.ph/Message--2868-12-25?hs=9e710a17c6f1893b8975843ad65a53ec&:zlge85
  • Ticket- You got a transfer #ML30. LOG IN =>> https://telegra.ph/Message--2868-12-25?hs=7ea70154946a3e349dfeeaf28b2468a7&:x5fua7
  • You have a transaction from unknown user. Assure >>> https://telegra.ph/Message--2868-12-25?hs=3f08de96112b4bab631df916e9c95f9e&:8lds4k
  • You have 1 message(-s) № 618. Go > https://telegra.ph/Message--2868-12-25?hs=8b618b6f3e2558ea545b01f25c66ea45&:crsdu6
  • You have 1 message # 855. Read >>> https://telegra.ph/Message--2868-12-25?hs=1d869d5a917cbf0e695c5782af266195&:pplh92