如何实现微信自定义分享标题、图片、描述等信息

必要的前提准备

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API

这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:

微信认证过的公共号

必须是认证过的,未认证或者认证过期都不行

一个域名

需要备案过的

一台服务器

因为前端页面需要的appId、signature是需要后台传递过来的。官方默认后台程序有PHP、Python、Node、Java版本,不过我这里以PHP作为演示(后台其实不在本文的解释范围内,超纲了

实现工具:GetwxLink

配置过程

1. 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)

2. 获取access_token

这部分工作属于后台开发,主要功能是利用公共号APPID、APPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。

下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP为例)。

将下载得到的压缩包解压后复制php文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为.php(必须。因为后台不完善所以不能直接ajax获得access_token的值,这里假设需要分享的html页面是index.php)

打开index.php,在html的DOCTYPE声明之前添加一段PHP代码:

<?php

require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/

$jssdk = new JSSDK("你的APPID", "你的APPSECRET");

$signPackage = $jssdk->GetSignPackage();

?>

这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存access_token,很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)

3. 前端配置验证权限

这里是前端的工作,主要是利用前一步得到的access_token来获取签名等认证信息,只有正确的配置才可以正常获取到使用官方js-sdk的权限。

1.引入JS文件

在index.php文件里添加一个script标签,引用官方js:

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

 1.通过config接口注入权限验证配置

<script>

    wx.config({

        debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息

        appId: '<?php echo $signPackage["appId"];?>',

        timestamp: '<?php echo $signPackage["timestamp"];?>',

        nonceStr: '<?php echo $signPackage["nonceStr"];?>',

        signature: '<?php echo $signPackage["signature"];?>',

        jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来

            'checkJsApi',

            'onMenuShareTimeline',//

            'onMenuShareAppMessage',

            'onMenuShareQQ',

            'onMenuShareWeibo'

        ]

    });

</script>

上面的属性都是必须的,不过都不需要自行填写。这里只使用了几个分享相关的jsApiList,完整列表见官网说明

2.配置分享信息并通过ready接口处理

<script>

window.share_config = {

    "share": {

        "imgUrl": "http://www.yourwebsite.com/share.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。

        "desc" : "你对页面的描述",//摘要,如果分享到朋友圈的话,不显示摘要。

        "title" : '分享卡片的标题',//分享卡片标题

        "link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。

        "success":function(){//分享成功后的回调函数

        },

        'cancel': function () {

            // 用户取消分享后执行的回调函数

        }

    }

}; 

    wx.ready(function () {

    wx.onMenuShareAppMessage(share_config.share);//分享给好友

    wx.onMenuShareTimeline(share_config.share);//分享到朋友圈

    wx.onMenuShareQQ(share_config.share);//分享给手机QQ

});

</script>

share_config里的四个属性在分享卡片里代表的含义如下图所示:

到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。

分享信息配置失败的调试方法

有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图,而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面,微信也给了调试接口,官方也有部分说明。

打开wx.config里的debug

将debug设置为true之后,手机进入页面,会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息,参考意义不是很大——不过可以拿来查看链接是否有误)。

如果正确的话,会提示{"errMsg":"config:ok"}。

提示{"errMsg":"config:invalid url domain"}

这个最常见,主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的APPID对应的公共号绑定,不过我实际使用中发现应该也可以分离。另外如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名)

提示{"errMsg":"config:invalid signature"}

造成这个情况的可能性比较多。不过主要有以下三个原因:

APPID和APPSECRET填错了。

可以到官方的调试页面获取access_token看看是否是正确的

超过了每日的access_token获取上限

官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。

微信公共号状态不正常。

比如验证过期了,被封禁了等等。

常用的接口调试链接以及说明文档:

获取access_token

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

根据返回的结果可以判断页面内的APPID和APPSECRET有没有出错

 获取jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容

  • 1. 准备工作 1.1 查看公众号分享接口权限 要使用微信SDK必须要有经过微信认证的非个人服务号 登陆服务号后,...
    sxplus阅读 6,229评论 0 2
  • 先引入JS 文件 this.wxShare() 在created里调用 首先登陆微信公众号 JSSDK使用步骤 步...
    寄鱼予海与你阅读 6,681评论 1 3
  • 我加入易效能其实已经很久了,中间停止了一段时间。后面发现人又开始颓废了,真的是一个人走不远,一群人在一起才...
    A45陈莉阅读 90评论 0 0
  • 原以为自己会很留恋那个地方,也许是最近这几天要走了,所以自己也迫不及待的想要离开那个地方,是因为吵闹,还是因为不通...
    希雅的花园阅读 240评论 0 0
  • 一直以来,为了孩子的成长,想给孩子最好的教育,我和妻子一度活得没有了自我。 从妻子怀孕开始,我们都无...
    简洁的书写阅读 1,060评论 5 46