微信网页分享标题图片自定义设置(最新)

1 前言

刚好有微信网页分享标题图片自定义设置这个需求,然后查找文档,发现有两种方案[1],但是第一种方案已经失效了,只能走第二种方案,然后根据实战配置好了,本文会写上配置中遇到的问题和解决方案,也作为记录使用,方便自己也方便他人。

2 步骤

2.1 准备工作

2.1.1 微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

2.1.2 附录6-DEMO页面和示例代码:在JS-SDK说明文档中的附录6下载示例代码,下载链接:http://demo.open.weixin.qq.com/jssdk/sample.zip

  • 直接下载会出现警告(chrome浏览器下),如下图:
  • 此时建议用IE或者其它浏览器下载下来,然后里面有4种常用代码的demo包可供使用
  • 备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。

2.1.3 Demo页面:http://demo.open.weixin.qq.com/jssdk,建议直接用微信扫其二维码

2.1.4 你需要分享的链接的域名需要在微信上JS安全域名进行设置,然后把类似MP_verify_HD1YQU88nBxyhisnY.txt文件放到项目的根目录下即可

2.2 以php为例

2.2.1 在sample.php文件中的代码嵌入到你需要分享的网页(暂定成为share.html)里面去,本文是直接把share.html合并到sample.php中去,然后直接修改sample.php为share.html(好处是不需要修改里面的引入类的路径)

2.2.2 只需要在sample.php中把AppID和Key配置一下即可$jssdk = new JSSDK("your appid", "your key");

2.2.3 配置自定义信息

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("your appid", "your key");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
  /*
   * 注意:
   * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
   * 邮箱地址:[email protected]
   * 邮件主题:【微信JS-SDK反馈】具体问题
   * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
   */
  wx.config({
    debug: true,
    appId: ‘<?php echo $signPackage["appId"];?>‘,
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: ‘<?php echo $signPackage["nonceStr"];?>‘,
    signature: ‘<?php echo $signPackage["signature"];?>‘,
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
		‘checkJsApi‘,
		‘onMenuShareTimeline‘,
		‘onMenuShareAppMessage‘
    ]
  });

  var imgUrl = ‘http://app.example.com/images/logo.jpg‘;
    var lineLink = ‘http://app.example.com/html/share.html‘;
    var descContent = ‘我是副标题,我是小小地描述,分享好友才能看到我‘;
    var shareTitle = ‘我是正标题,分享朋友圈和好友都能看到我‘;

  wx.ready(function () {
    // 在这里调用 API
	wx.onMenuShareTimeline({
                            title: shareTitle, // 分享标题
                            link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: imgUrl, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        wx.onMenuShareAppMessage({
                            title: shareTitle, // 分享标题
                            desc: descContent, // 分享描述
                            link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: imgUrl, // 分享图标
                            type: ‘‘, // 分享类型,music、video或link,不填默认为link
                            dataUrl:‘‘ , // 如果type是music或video,则要提供数据链接,默认为空
                            success: function () {
                                // 用户确认分享后执行的回调函数

                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
  });
</script>
</html>  

2.2.4 用浏览器打开要分享的链接,此时会出现报错,Notice:curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;

解决方案[3]

第一种是:

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);  

第二种是:

按照文档提示,直接在http://curl.haxx.se/ca/cacert.pem下载证书,放在和jssdk.js同个目录下

private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    // 为保证第三方服务器与微信服务器之间数据传输的安全性,所有微信接口采用https方式调用,必须使用下面2行代码打开ssl安全校验。
    // 如果在部署过程中代码在此处验证失败,请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
    curl_setopt($curl, CURLOPT_URL, $url);

    $res = curl_exec($curl);
    curl_close($curl);

    return $res;
  }  

2.2.5 然后就可以直接分享到朋友圈或者好友,就可以看到效果了

3 遇到的问题及解决方法

采用2.2.4的第二种加入证书方式,由于access_token和公众号开发没有统一(这个分享页面是一个独立的项目)没有统一,导致了报错Notice:curl_setopt():CURLOPT_SSL_VERIFYHOST no longer accepts the value1,value2 will be used instead in xxx_file_postion on line yyy;此时使用2.2.4的第一种取消SSL验证就可以通过了,同时也修改了access_token统一管理,让微信公众号后台和其能获取到一样的access_token。

4 参考

新版本微信下,如何设置"分享到朋友圈"的缩略图?

2 微信分享网页时自定义标题、描述和图片

微信curl的证书问题

原文地址:https://www.cnblogs.com/fanbi/p/9496394.html

时间: 2024-11-08 20:44:40

微信网页分享标题图片自定义设置(最新)的相关文章

js-sdk探索之微信网页分享

微信是一个很不错的传播平台,最近公司需要做一个新年贺卡,使用html5制作一个很小的动画,然后发送给客户,不需要和后台有任何的联系,一个很简单的功能,需要利用微信的分享功能,毕竟微信分享的带小图片.简介.标题比发送一个链接要比一个光秃秃的链接要高大上的多.好了,废话不多说了,进入正题吧. 刚开始我也到网上去搜了一下,看到好多这个版本的,我也贴一下: var shareData = { "appid": appid, //公众号的appID "img_url": im

微信网页分享

在微信中分享某个网页,如果不调用微信的接口,分享的网页会默认显示.默认的标题是网页的title,图片会默认选取网页中大于300*300的图片,如果图片小,取不到图片,在微信中会显示默认的灰色图案.网页的简介部分会默认为网页的链接.调用微信的接口以后,分享的标题.图片.简介都可以自定义设置.下面结合在项目中的开发实践,简要总结一下如何进行微信接口的调用,实现自定义网页分享. 调用微信接口,就是进行微信公众平台的开发,主要参考微信公众平台技术文档,https://mp.weixin.qq.com/w

html微信浏览器分享显示图片的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>demo</title> &

微信分享 分享icon和分享标题的简单设置

前几天做的一个活动,用到微信分享功能,分享的icon.分享的标题和内容是自定义的.我上网查了一下,好多是注册微信公众号,使用微信api来实现的,注册微信号比较麻烦,最简单的方法就是 页面的title改成你想分享出去的title,分享的icon是获取本页面第一个符合要求的图片,但是必须在body标签里.一般分享的icon大小在300*300左右,更小的我没试过,大一些也应该可以,然后修改样式style="display:none"就可以了.但是分享的内容貌似没办法解决.希望有解决办法的同

微信网页中点击图片放大

1. 引用微信的JS <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 2.初始化点击放大监听方法(加载完成后调用此方法) /*调用微信预览图片的方法*/ function funcReadImgInfo(){ var imgs = []; var imgObj = $(".userImg img&

微信网页分享到朋友圈、分享给朋友代码

<script> m = window.location.href; document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { window.shareData = { "timeLineLink": m, "sendFriendLink": m, "weiboLink": m, "Title": "标题&quo

微信网页分享 jssdk config:invalid signature 签名错误

invalid signature签名错误.建议按如下顺序检查: 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验. 确认config中noncestr, timestamp与用以签名中的对应noncestr, timestamp一致. 确认url是页面完整的url,包括GET参数部分. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致. 确

微信分享网页自定义分享标题,图片,说明

在微信中,分享网页到朋友或朋友圈时,微信会自动获取该网页的图片和标题,但是有时候我们需要自己定义分享的图片和标题的话,就需要调用微信的接口来实现,weixin_share.js地址: 调用方法 <script src="/crowd/js/weixin_share.js"></script> $(document).ready(function () { wx_share_handle() }); function wx_share_handle(){ var

微信分享到朋友圈,分享给好友设置标题图片描述参数

var imgUrl = "http://xxxxx.com/activity/images/logo.jpg"; var lineLink = window.location.href; var descContent = '来宜人贷参与抢钱活动100%获得10000金币,还可以兑换成现金哦~'; var shareTitle = '来宜人贷 拼人品抢现金'; var appid = 'wx237b223ad5773cf5'; function shareFriend() { Wei