微信公众平台开发[2] —— 微信端分享功能

2023-11-08 21:50:52

初次尝试微信公众号的开发，对于学习方法的探索都是来源于网上的博客、问答，对于参差不齐的信息，自己也是有苦说不出，抽出一点时间写点文章，既是对自己的学习总结，也希望给予同是菜鸟的学渣一点帮助。—— 前言.

背景介绍：

今天想添加微信分享的功能，如果不进行自定义设计，那么当我们点击分享朋友圈、好友或者QQ好友、空间时，默认的标题就是<title>标签中的信息，而显示的描述信息就是链接，图片多是默认为页面中显示的第一张图片，显然这样的处理是不合理的，所以需要查询开发文档进行编码设计。

操作步骤：

一.参考微信公众号开发文档

1.登录微信公众号，打开 “开发者工具->开发者文档->微信网页开发->微信JS-SDK说明文档”，找到对应的位置，首先要了解官方的需求说明才能进行下一步的开发。

2.建议详细参考文档后再考虑代码的编写，提示：下拉上图中的网页最下端，下载官方提供的参考demo。本文的最后我会提供一份稍作修改的仅针对于php的实现代码，可作参考。

二.代码实现（PHP）及部分问题引导

1.我提供的代码就是下图中的几个简单文件，主要来源于微信公众号的开发文档，上面提到过一次。其中，我们操作的分享页面代码只需参考 sharePage.php就好，对于官方的实现可以去阅读其他文件，毕竟我们实现功能只需导入文件，调用所提供类及方法就好。

2.在此提供 sharePage.php简单代码，以便参考讲解。其中提出几点需要注意的是：

(1).需要提供$appid,$secret

（2）.代码中需要引用微信端提供的js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ，当然也可以下载其源代码，放于本地链接获取就可以。

（3）.保证wx.config的信息配置的正确，debug如果为true可以提示操作的过程，测试没有问题后可以改为false,这样才是合理的操作，另外jsApiList中要补全自己需要的功能

（4）.之前我把分享功能的代码写在wx.config平级中无法实现，之后测试发现应该写在wx.reday(function（）)中，具体的代码模式都应该参考开发文档。

<span style="font-size:14px;"><?php
require_once "jssdk.php";

//获取到网页授权的access_token
$appid = "wx36xxxxxxxxxx199";//   输入公众号、服务号、或者测试号的appid  
$secret = "9caxxxxxxxxxxxxxxxxxx8a2";//   输入公众号、服务号、或者测试号的 secret


$jssdk = new JSSDK($appid, $secret);
$signPackage = $jssdk->GetSignPackage();

//此处用于输出得到的数据  用来测试签名证书是否正确 
/*
echo '   appId:'. $signPackage["appId"].'<br/>';
echo '   jsapi_ticket:'. $signPackage["jsapiTicket"].'<br/>';
echo '   url:'. $signPackage["url"].'<br/>';
echo '   timestamp:'. $signPackage["timestamp"].'<br/>';
echo '   nonceStr:'. $signPackage["nonceStr"].'<br/>';
echo '   signature：'. $signPackage["signature"];
echo '<br/>';
echo '<br/>';
echo '<br/>';
exit;
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  Hello Hello Hello
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.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',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
        ]
    });

    wx.ready(function () {
        // 在这里调用 API
        //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline({
            title: '快来!分享朋友圈', // 分享标题
            link: 'http://www.baidu.com', // 分享链接
            imgUrl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //获取“分享给朋友”按钮点击状态及自定义分享内容接口
        wx.onMenuShareAppMessage({
            title: ' 微信分享给朋友', // 分享标题
            desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
            link: 'http://www.baidu.com', // 分享链接
            imgUrl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        });
        wx.onMenuShareQQ({
            title: 'QQ我要跳转到百度页面了啊！', // 分享标题
            desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
            link: 'http://www.baidu.com', // 分享链接
            imgUrl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg', // 分享图标
        });
        wx.onMenuShareQZone({
            title: 'QZone我要跳转到百度页面了啊！', // 分享标题
            desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
            link: 'http://www.baidu.com', // 分享链接
            imgUrl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg', // 分享图标
        });
    });
</script>
</html>
</span>

3.正常操作中，可能会有 “errMsg config:invalid signature"签名错误，可以参考博文《微信js sdk invalid signature签名错误》，网上多数的建议是检查签名证书是否正确，用作者的话就是“确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验”。