微信分享自定义图片标题摘要-微信官方API

2023-01-09 18:26:24

我们平时在使用微信内置浏览器打开网页想要分享给好友或者发到朋友圈的时候经常会遇到这样的问题，

别人的网页分享的时候是这样的：

而我们自己的网页分享后这这样的：

看到有人说不做任何设置，微信分享时会自动抓取网页中的Title作为标题，IP地址作为概述，网页的第一个大小小于300*300的图片会作为分享中的图片，但是除了标题和概述可以，图片怎么设置分享后图片都是上图灰色的曲别针图案，所以今天来说一下如果自定义图片，标题和概述。

要实现上述功能需要使用微信官方的SDK，具体步骤如下：

第一步：微信公众号中设置js绑定域名，只有绑定的域名下的网页才可以调用微信官方的js，目前域名可以绑定3个（绑定步骤如下）

①进入公众号，点击左边主菜单栏“设置”→“公众号设置”

然后点击上方的“功能设置”

设置好后，进入下一步。

第二步：在自己的网页中引入微信官方js，http://res.wx.qq.com/open/js/jweixin-1.0.0.js，这步最简单

第三步：在页面添加配置信息和js代码

wx.config({

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

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

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

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

            signature: '0f9de62fce790f9a083d5c99e95740ceb90c27ed',// 必填，签名

            jsApiList: ['onMenuShareAppMessage'] // 必填，需要使用的JS接口列表

        });

        wx.ready(function(){

            wx.onMenuShareAppMessage({

                title: '测试标题', // 分享标题

                desc: '测试描述', // 分享描述

                link: 'http://zicp.zicp.net/ycdh_real/mobile/productInfo?id=1e72e158-f3f5-46df-8385-7fe1059e142f', // 分享链接

                imgUrl: 'http://zicp.zicp.net/ycdh_real/res/images/website/h.jpg', // 分享图标

                type: 'link', // 分享类型,music、video或link，不填默认为link

                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

                success: function () {

                    alert("分享成功！");

                },

                cancel: function () {

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

                }

            });

            wx.error(function(res){

                // config信息验证失败会执行error函数，如签名过期导致验证失败

            });

        });

这里主要来说明一下配置参数中的signature，签名，

获取签名的步骤:

①首先通过公众号的AppID(应用ID)和AppSecret(应用密钥)得到access_token，具体方法获取access_token方法

②通过上一步得到的access_token得到api_ticket，具体方法：

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

返回值json格式：

{

"errcode":0,

"errmsg":"ok",

"ticket":"sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg",

"expires_in":7200

}

③通过前两步的到的jsapi_ticket获取签名signature

　　示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

　　? 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

　　string1=jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

　　?对string1进行sha1签名，得到signature：

　　signature=sha1(string1);

　　经过上述算法得出 signature=0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

微信官方推出了 JS 接口签名校验工具地址

到这为止微信分享就完成了，上述只是分享给好友，分享到朋友圈和这个类似，结合SDK官方文档照着写就可以了，分享效果出来了，看下图

参考资料：

http://www.bitscn.com/weixin/583327.html

http://chitanda.me/2015/06/19/wechat-share-diy/

码农公寓

相关文章