zoukankan      html  css  js  c++  java
  • 微信网页分享标题图片自定义设置(最新)

    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-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
       * 邮箱地址:weixin-open@qq.com
       * 邮件主题:【微信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的证书问题

  • 相关阅读:
    触发器_01(trigger)
    24.Show table status解析
    Mysql排名问题
    zabbix监控
    MyFlash工具
    23.Sharding:谁都能读懂的分库、分表、分区
    Mysql集群结构说明
    Percona XtraDB Cluster(PXC) Mysql集群
    mysql-router
    MGR搭建的过程中遇见的错误以及处理方法
  • 原文地址:https://www.cnblogs.com/fanbi/p/9496394.html
Copyright © 2011-2022 走看看