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

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

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

必备条件

并不是什么公众号都能做分享,据官方的开发文档说明,只有认证过的订阅号或者认证过的服务号,才有分享接口权限

分享网页会到微信的服务器上获取一些信息,这需要开启 SSL 安全连接访问,所以我们还必须有一台服务器,可以自己配置我们的运行环境。

最后要有一个备案的域名,没有备案的域名在天朝是没有任何用处的。

微信公众号设置

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

引入分享 JS 文档

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

部署后台代码

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

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

http://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: '', timestamp: , nonceStr: '', 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 接口的示例文件,不明白的可以看看这个文件。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180622G1YUN300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券