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的证书问题

  • 相关阅读:
    三元表达式 列表和字典推导式 函数对象 名称空间 作用域 global和nonlocal 函数装饰器 枚举对象
    函数参数 打散机制 字符串比较 返回值
    函数简介
    三种字符串的介绍 文件的读写
    字符编码
    数据类型及其常用方法 数据类型转换 可变与不可变 值拷贝与深浅拷贝
    流程控制 while和for循环
    变量命名规范 常量 输入和输出 注释 数据类型 运算符 逻辑运算符
    语言分类 编译型和解释型语言分析 环境变量 代码执行的方式 pip介绍 变量
    Python django tests
  • 原文地址:https://www.cnblogs.com/fanbi/p/9496394.html
Copyright © 2011-2022 走看看