如何使用微信JSSDK正确分享自定义网页到朋友圈

2017-11-07 点击:3592

把WordPress网页微信分享到朋友圈,正确显示图片和文字,看似非常简单的问题,而且理所当然的应该这样,但就是这样一个小问题确不是那么简单。很多时候我们看到朋友圈分享的网页是没有图片的,如下图:
v2-80aa23c802b9a29fe308c4cd7ecab9e0_hd

为什么会有这种情况呢?其实在微信6.5之前分享网页就容易多了,一个网页只要安照微信要求的格式都可以分享出图片,但是微信6.5之后这种情况完全改变,微信规定微信6.5之后所有自定义网页必须使用JSSDK才能正常分享图片。

先看微信调整的策略:原文链接

为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失败。

例如,当前页面是 http://www.abc.com/123,其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com,则分享自定义链接 http://www.abc.com/456 可以成功,分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。

 

下面演示将一个普通的网页加入微信JSSDK的过程;按照微信开发文档说明:https://mp.weixin.qq.com/advanced/wiki?t=t=resource/res_main&id=mp1421141115

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

    appId: '', // 必填,公众号的唯一标识

    timestamp: , // 必填,生成签名的时间戳

    nonceStr: '', // 必填,生成签名的随机串

    signature: '',// 必填,签名,见附录1

    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

js代码,把这段js代码放到html的最后面面。访问这个页面,用-微信调试工具-打开查看JS-SDK是否成功ok

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
window.onload=function(){//进入页面就执行ajax,目的为了传送当前页面url#前的完整url
var ajaxurl =  '/index.php?ctl=weixin'; 
var query = new Object();
var urll = location.href.split('#')[0]; //页面url#前的完整url,可alert弹出查看
query.urll = $.trim(urll);
query.post_type = "json";
$.ajax({ 
url: ajaxurl,
data:query,
type: "POST",
dataType: "json",
success: function(ress){//成功则执行JS-SDK
console.log(ress);//查看返回结果

//执行JS_SDK
wx.config({
debug: true, 
appId: ress.appid,
timestamp: ress.timestamp,
nonceStr: ress.nonceStr, 
signature: ress.signature,
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] 
}); 
}
,error:function(){
console.log("通信失败");
}
});
}
/* alert(location.href.split('#')[0]); */ //弹出的url必须与访问地址一致
</script>

这是微信 JS 接口签名校验工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 

控制器中的代码 php。都是json格式返回的,变量都封装到$root中,通过output()返回

php中执行获取appid、timestamp、nonceStr、signature操作,

<?php
class weixin{
public function index()
{
//微信
$url = $GLOBALS['request']['urll'];//获取当前页面的url,接收请求参数
$root['url'] = $url;
//获取access_token,并缓存
$file = 'access_token';//缓存文件名access_token
$expires = 3600;//缓存时间1个小时
if(file_exists($file)) {
$time = filemtime($file);
if(time() - $time > $expires) {
$token = null;
}else {
$token = file_get_contents($file);
}
}else{
fopen("$file", "w+");
$token = null;
}
if (!$token || strlen($token) < 6) {
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='自己的appid'&secret='AppSecret'");//自己的appid,通过微信公众平台查看appid和AppSecret
$res = json_decode($res, true);
$token = $res['access_token'];
// write('access_token', $token, 3600);
@file_put_contents($file, $token);
}

//获取jsapi_ticket,并缓存
$file1 = 'jsapi_ticket';
if(file_exists($file1)) {
$time = filemtime($file1);
if(time() - $time > $expires) {
$jsapi_ticket = null;
}else {
$jsapi_ticket = file_get_contents($file1);
}
}else{
fopen("$file1", "w+");
$jsapi_ticket = null;
}
if (!$jsapi_ticket || strlen($jsapi_ticket) < 6) {
$ur = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi";
$res = file_get_contents($ur);
$res = json_decode($res, true);
$jsapi_ticket = $res['ticket'];
@file_put_contents($file1, $jsapi_ticket);
}

$timestamp = time();//生成签名的时间戳
$metas = range(0, 9);
$metas = array_merge($metas, range('A', 'Z'));
$metas = array_merge($metas, range('a', 'z'));
$nonceStr = '';
for ($i=0; $i < 16; $i++) {
$nonceStr .= $metas[rand(0, count($metas)-1)];//生成签名的随机串
}

$string1="jsapi_ticket=".$jsapi_ticket."&noncestr=$nonceStr"."&timestamp=$timestamp"."&url=$url";
$signature=sha1($string1);
$root['appid'] = $appid;
$root['nonceStr'] = $nonceStr;
$root['timestamp'] = $timestamp;
$root['signature'] = $signature;


output($root);
}
}
?>

总结:自定义网页如要正确使用微信分享,必须满足2个条件:

1、使用微信JSSDK

2、公众号网页授权域名必须一致。(公众号授权域名是A,所有非A域名均不能正常分享。)

迅虎开发的WordPress QQ/微博/微信/手机登录插件,严格按照微信JSSDK开发,完美实现WordPress微信分享,是WordPress网站必装插件之一。


立即加【QQ:6347007】试用WordPress支付插件

相关产品

  • WordPress QQ/微博/微信/钉钉/手机登录插件
    WordPress QQ/微博/微信/钉钉/手机登录插件

相关博客

  • Wechat social login分享网页到微信朋友圈怎样才能带缩略图

  • WordPress手机登录新增国际短信验证支持全球40多个国家