使用微信接口自定义分享的网页信息(缩略图,标题,描述)

当我们在微信中分享一个网页给朋友,朋友圈,微博或者 QQ 空间时,如何使用微信的 JS-SDK 接口自定义标题,描述与缩略图。

官网说明文档链接,但对于刚接触的新手,可能会走弯路,所以将我的开发过程写出来,以供大家参考。

1、因为是微信公众平台开发,所以第一步就是将你的域名绑定到微信公众平台,如果自己没有,那就绑定到别人的微信公众平台。
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
公众号绑定域名

2、下载官方的示例代码(http://demo.open.weixin.qq.com/jssdk/sample.zip)。

下载解压后,打开其中的 php 版本,可以看到示例代码文件,主要的示例代码“sample.php”,打开文件,其中有四个地方需要我们填写与修改。
sample示例代码

3、AppID 与 AppSecret,登录微信公众平台进入“开发者中心”的“配置项中”查看 AppID 与 AppSecret,然后填入文件对应位置。AppID与AppSecret

4、填写我们要使用的 API 以及要调用的 API,我们现在要使用的是分享接口,分享接口一共有五个,分别是:“分享到朋友圈”、“分享到朋友”、“分享到 QQ ”、“分享到微博”以及“分享到 QQ 空间”,配置的填写如下:

5、现在我们看看“jssdk.php”这个文件中的httpGet()函数:

里面用到了curl_init()这个函数,属于 CURL 函数库,有些服务器默认未开启,所以需要注意你服务器的 CURL 函数库是否开启,否则无法使用。

6、将修改过的示例代码加入wordpress中,我的做法是放入主题的“footer.php”文件的底部,“<?php wp_footer(); ?>”与“</body>”之间。

7、将“jssdk.php”与上面的“footer.php”置于同一级目录,将“access_token.json”与“jsapi_ticket.json”放置于网站根目录。

8、在微信中打开网站,会出现如图的调试信息,代表微信 SDK 配置正常,将“wx.config”中的“debug”配置置设置为“false”即可关闭调试信息。
js-sdk调试信息

9、点击右上角菜单中“发送给朋友”的效果,图中数字所标示的分别代表“wx.ready”配置中的“title”,“imgUrl”与“desc”,一般“title”与“link”不配置,使用网页自己的标题与链接,否则会强制使用你在“wx.ready”中的配置,这样你所有的分享看起来都一样,并且打开后也是同一个链接,极少情况需要这样。
js-sdk发送到朋友的效果

10、使用的微信的 JS-SDK 接口还有一个附加功能,长按图片后,会自动识别其中的二维码,下面的二维码链接到本篇文章。

二维码
长按图片,弹出识别二维码选项

长按二级码识别

发表评论