微信开发使用 JSSDK 自定义分享内容 - 文章教程

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

发布于 2018-03-19 字数 4448 浏览 3485 评论 0

最近做一个砍价的小程序,需要用户分享自己的砍价页面,然后让朋友帮忙砍价,默认情况下微信的分享只有标题可用,描述部分会显示当前的网址,而且还没有缩略图,据说网页中如果有超过 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 自定义分享内容

前端网页

在你需要自定义分享的网页源文件上引用 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 接口的示例文件,不明白的可以看看这个文件。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论