背景
H5开发中几乎所有项目都要用到自定义分享,见过的分享接口有php引入和ajax调用两种,使用不方便且对代码环境有要求。故共享一版可通过javascript文件引入方式来实现自定义分享的接口(这是15年底做的接口,一直在使用,如果有更简单便捷的方法欢迎交流)。
使用这个接口,不管你是php开发的项目还是纯前端的html项目,不管是把代码放服务器还是放到OSS CDN,都是OK的,是一件一劳永逸的事情。
实现方法
根据微信JS-SDK开发文档,实现分享主要有几个步骤:步骤一,绑定域名。步骤二,引入JS文件。步骤三,权限验证。步骤四,设置自定义分享信息。
首先是要有一个认证的微信公众号,进入 公众号设置/功能设置/JS接口安全域名,填入项目域名。然后就是第三步,用接口实现权限验证。
这里不探讨具体的实现方法(实现已封装到jssdk.php文件),只说明 接口配置和项目调用方法。
接口配置只需填写公众号AppID、AppSecret两个参数,
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret", $url); // 公众号AppID、AppSecret
$signPackage = $jssdk->GetSignPackage();
echo "var signPackage=";
die(json_encode($signPackage)); // 返回微信分享所需参数
项目调用接口更方便,只需在index.html里通过javascript引入接口地址即可,
<script>
document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");
</script>
<script>
var baseUrl = "http://xxx/"; // 项目地址
var wxData = {
"imgUrl" : baseUrl + 'share.jpg', // 分享图标
"link" : baseUrl, // 分享地址
"title" : '微信分享接口-分享标题', // 分享标题
"desc" : '分享文案' // 分享文案
};
wx.config({
debug: false,
appId: signPackage.appId,
timestamp: parseInt(signPackage.timestamp),
nonceStr: signPackage.nonceStr,
signature: signPackage.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.ready(function () {
wx.onMenuShareTimeline({
title: wxData.title,
link: wxData.link,
imgUrl: wxData.imgUrl,
success: function () {
}
});
wx.onMenuShareAppMessage({
title: wxData.title,
desc: wxData.desc,
link: wxData.link,
imgUrl: wxData.imgUrl,
type: 'link',
dataUrl: '',
success: function () {
}
});
});
</script>
Demo二维码
源码下载地址
https://download.csdn/download/gaofei880219/10383643
参考链接
微信JS-SDK说明文档:https://mp.weixin.qq/wiki?t=resource/res_main&id=mp1421141115
微信JS SDK PHP Demo:http://wwwblogs/txw1958/p/weixin-js-sdk-php-demo.html
------------------------------- 时间分界线:2018.6.26 -------------------------------
最近一个项目投放微信朋友圈,代码部署腾讯服务器,用到负载均衡共4台IP不同的服务器。那么问题来了,分享接口代码部署到4台服务器,用于存储access_token和jsapi_ticket缓存的json文件在不同的地方,那签名过期重新生成数据必定不同而导致分享配置出错。
解决思路,把access_token和jsapi_ticket缓存到一个固定的地方,分享接口都去调用这个地方的签名缓存文件。
具体实现,使用阿里云的RDS云数据库,上面的问题得以解决,而且也能应对高并发。
数据表设计,如下图:
代码实例见 https://github/YanKaiwei/Demo/tree/master/shareDemoRDS
更多推荐
H5微信分享接口开发JS-SDK PHP[附源码]
发布评论