小灰博客--小灰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”



发表评论

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