微信分享自定义图片标题摘要-微信官方API
我们平时在使用微信内置浏览器打开网页想要分享给好友或者发到朋友圈的时候经常会遇到这样的问题,
别人的网页分享的时候是这样的:
而我们自己的网页分享后这这样的:
看到有人说不做任何设置,微信分享时会自动抓取网页中的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,不填默认为linkdataUrl: '', // 如果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官方文档照着写就可以了,分享效果出来了,看下图
OK
参考资料:
http://www.bitscn.com/weixin/583327.html
http://chitanda.me/2015/06/19/wechat-share-diy/
转载于:https://www.cnblogs.com/webapi/p/5669150.html
微信分享自定义图片标题摘要-微信官方API相关推荐
- 微信分享自定义标题摘要和缩略图
新建一个fx.php并且写入以下代码 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID&q ...
- 原 微信分享自定义样式amp;微信分享给朋友自定义图文信息
下图为效果图:上图为没有设置得样式,下图是设置样式分享后的效果,差距甚远. 做的过程也遇到了一些问题,我会在博文最下方标明. 下面是我的代码: <!DOCTYPE html> <ht ...
- 基于静态URL的微信分享自定义缩略图及标题和摘要
在静态页中实现微信分享自定义缩略图比动态页分享要复杂.下面是示例页面: 分享的效果(缩略图及标题.摘要是自己指定): 实现难点: (1)URL是变化的,我们分享一次后,微信会自动在分享的地址后增加了一 ...
- PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法,php/thinkphp实现微信分享自定义文字和图片...
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法, php/thinkphp实现微信分享自定义文字和图片. 一.先看微信JS-SDK文 ...
- vue项目全局配置微信分享_Vue 项目实现微信自定义分享
最近公司项目中有在微信中自定义分享的需要,遇到的问题记录一下. ¶一.实现效果 ¶二.遇到的问题 1.需求:项目需要带参分享,进行好友拆礼盒的类似操作,需要带个参与活动的 id,其实这种分享微信是不太 ...
- H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
- 微信分享自定义标题和图片,开发者工具没问题,真机调试失败
昨天亲身经历,微信分享开发者工具调试没问题,但是真机调试失败,说明配置是没问题的,历经一天发现是缓存的问题 解决方案: 删除掉微信进程后,缓存没有被彻底清除 安卓手机打开 debugtbs.qq.co ...
- Android开发知识(十一):让你的应用接入微信分享,完美绕过微信分享的大坑
文章目录 一.申请应用 二.配置微信分享的SDK 三.微信分享示例 四.微信分享的结果回调 五.微信分享的踩坑总结 一.申请应用 1.首先到 [ 微信开放平台官网] 申请注册帐号,这些流程就忽略了到官 ...
- 微信分享次数统计、微信公众号分享关注统计
作为系列文章的第五篇,本文重点探讨数据采集层中的微信分享追踪系统.微信分享,早已成为移动互联网运营的主要方向之一,以Web H5页面(下面称之为微信海报)为载体,利用微信庞大的好友关系进行传播,实现宣 ...
最新文章
- 二极管ss14测量_各种常用二极管的检测方法
- RDKit | 基于RDKit描述三维分子形状(3D描述符)
- 【原】display:inline-block下的IE元素
- Repeater使用 AspNetPager分页控件
- linux相关面试题总结!
- Python: 编程遇到的一些问题以及网上解决办法?
- 安卓app开发工具_怎么开发app软件需要多少钱?主流app开发工具盘点
- java继承序列化_java中序列化之子类继承父类序列化
- 【Linux】与用户管理相关的命令总结
- SQL Server报表生成器中的R脚本词云
- 阿里OSS对象存储,实现图片上传代码;
- ubuntu安装后要做什么
- 关于《高油压调速器机械液压系统的优化设计》的疑问
- library genesis (libgen)及Book系列网站的使用方法,外文图书下载神器,Springer学术书籍免费下载
- 飞思卡尔S12系列(基于MC9S12XET256MAA和/MC9S12XEP100)RTI资料总结和分享
- bios设置raid启动模式Linux,RAID BIOS检测硬盘以及设置RAID模式
- Qt 之 QQ系统表情—实现动态显示效果
- Calamari 安装
- 无粉丝无流量怎么加入快手小黄车?怎么开通小黄车?
- 1U,2U,3U,4U机箱面板,U的含义