微信开发使用 JSSDK 自定义分享内容

Question

最近做一个砍价的小程序，需要用户分享自己的砍价页面，然后让朋友帮忙砍价，默认情况下微信的分享只有标题可用，描述部分会显示当前的网址，而且还没有缩略图，据说网页中如果有超过 300X300 的图片，会自动生成缩略图，我在微信的 PC 端试过，可以实现自动添加缩略图，但是在手机上就显示一个链接的图标。

微信的分享地址默认是当前的网页，如果是使用 Web APP 开发的手机网页，由于微信浏览器对于 HTML5 中的 History API 支持并不友好，这一点在官方文档里面也有说明，最好的方式就是我们自定义分享的链接。

必备条件

1. 并不是什么公众号都能做分享，据官方的开发文档说明，只有认证过的订阅号或者认证过的服务号，才有分享接口权限
2. 分享网页会到微信的服务器上获取一些信息，这需要开启 SSL 安全连接访问，所以我们还必须有一台服务器，可以自己配置我们的运行环境。
3. 最后要有一个备案的域名，没有备案的域名在天朝是没有任何用处的。

微信公众号设置

首先在公众号管理后台 公众号设置 的 功能设置 里填写 JS接口安全域名，域名需要通过 ICP 备案，没有备案域名可以用 SAE、BAE 等平台。此外自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的 JS 接口安全域名设置这里填上你的域名和共享同一个开发者 ID。

引入分享 JS 文档

在需要调用JS接口的页面引入微信 JSSDK 的 JS 文件：http://res.wx.qq.com/open/js/jweixin- 1.2.0.js，这个文件在需要分享的页面是必须要引用的。

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

部署后台代码

微信的分享不像其他的分享平台，为了数据的安全性，微信总是需要做签名验证，所以我们需要在后台去生成一些东西，然后输出给前台网页。

这里可以直接下载官方的示例代码快速开发，不过如果是大型的项目，还是要自己去再次梳理编写一遍，这里就以 PHP 语言为例：

https://www.wenjiangs.com/wp-content/uploads/2018/03/jssdk-php.zip

将上面的文件下载本地，然后解压到任意的目录中，这里推荐大家直接解压到网站的根目录，这样方便引入和查找文件，解压之后看到以下文件：

前端网页

在你需要自定义分享的网页源文件上引用 JSSDK ，传入 AppID 和 yourAppSecret 并且初始化 JSSDK 类，调用 GetSignPackage() 方法获取微信分享配置信息：

require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();

接下来配置微信分享参数

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', //判断当前客户端版本是否支持指定JS接口
 'onMenuShareTimeline', //分享给好友
 'onMenuShareAppMessage', //分享到朋友圈
 'onMenuShareQQ', //分享到QQ
 'onMenuShareWeibo' //分享到微博
 ]
});

预定义要分享网页的内容

window.share_config = {
 "share": {
 "imgUrl": "http://www.pptg315.com/weixin/bargain/images/logo-s.png",
 "desc" : "启发右脑深层次记忆，通过对右脑想象力与思维能力训练，开启大脑图像记忆功能，使受训者轻松学会无规律记忆数字，中文词语，现代文，古诗词。",
 "title" : '199元让孩子成为最强大脑记忆大师！亲，帮我砍一刀',
 "link": 'http://www.pptg315.com/weixin/bargain/activity.php?id=' + order_id,
 "success":function(){},
 'cancel': function(){ }
 }
};

通过 ready 接口处理成功验证，config 信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。

wx.ready(function () {
 wx.onMenuShareAppMessage(share_config.share); //分享给好友
 wx.onMenuShareTimeline(share_config.share); //分享到朋友圈
 wx.onMenuShareQQ(share_config.share); //分享给手机QQ
});

通过 error 接口处理失败验证

wx.error(function(res){
 alert(res.errMsg);
 //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
});

微信分享大致就是这样，以上是常规的在动态页面的调用方法，为了更方便的多页面调用，建议通过 AJAX 跨域请求来实现调用权限，其实在 PHP 文件夹下 sample.php 是调用 API 接口的示例文件，不明白的可以看看这个文件。