微信分享自定义标题、描述、图片

发表于   |   分类于   |     |   阅读次数

微公众平台的账号终于申请下来的，需求“微信微信分享自定义标题、描述、图片”可以开做了。
过后发现，该微信接口的开发挺依赖后台技术（php、java、nodejs、python）支持的，对于前端er还是有点折腾的。

自定义获取 config 参数值

微信公众平台开发者文档，说明得挺详细的；只是对于前端er还是有点挑战的。

获取以下的config接口注入参数过程是最繁琐的：

1
2
3
4
5
6
7
8
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

以上出现是在 JSSDK使用步骤 的 步骤三 中，进入过程如下：
微信公众平台首页 -> 左侧底部：开发者工具 -> 开发者文档 -> 微信网页开发 -> 微信JS-SDK -> 即可看到详尽的说明文档

第一次看到这 步骤三 时，完全懵了，timestamp nonceStr signature 这三数据去哪获取到的？也看不到明显指示。最终折腾翻翻，是在说明文档的后面 附录1-JS-SDK使用权限签名算法 这里有详细说明的。

接下来，按部就班，根据 AppID AppSecret 去获取到 access_token 和 jsapi_ticket 。(俺是直接打开 写入了参数的 url 直接获取到返回的 json 值的)。

然后，利用 noncestr jsapi_ticket url 拼接成字符串，以签名算法 sha1() 处理得到 signature 。（php 代码，俺直接 copy ，粘贴到在线环境执行的，最终得到了 signature ）.

然而，这种自定义获取 config　参数值，失败了，觉得自己弄的 php 糊里糊涂没谱；这时候，才发现原来官方提供了 demo 啊！

参照官方ｄｅｍｏ来改造　

在 JSSDK使用步骤 的最底部中，提供有　ｄｅｍｏ页面　和　示例代码　。

示例代码提供了４种，php、java、nodejs、python；这里以 php 为例:

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
<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$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.0.0.js"></script>
<script>
  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 都要加到这个列表中
    ]
  });
  wx.ready(function () {
    // 在这里调用 API
  });
</script>
</html>

咋一看，只需要在代码第三行传入 AppID AppSecret 即可！
config 中的参数已经帮忙用 php 写好啦！（对于还没深入学过 php 的前端er是多么幸福的事儿。）

当然，把这个代码实例移植时，出现了一大推 php 的报错；咋一看应该是路径没设置好；果断抓来一 php 同事搞定好；好，之前报的错误全没了！

用手机微信打开测试，遇到的弹出 debug ，也能一一通过 附录5-常见错误及解决方法 按部就班解决了。

最后一个 debug 弹出的是：invalid url domain
之前担心的一个问题终于来了：微信公众号绑定的域名是线上正式域名，该接口只能在所绑定的域名下被调用。所以在自己本机本地环境无法进行自定义分享的测试，弹出 debug invalid url domain 。

决定找 php 同事帮忙，好像有方法了，待成功了再分享……