新版微信分享--图片和描述

微信6.5.6更新后,微信H5页面分享出去没有图片。之前微信会默忍抓取页面第一张大于等于300*300的图片,更新微信版本后,分享出去图片没有抓取到。这是微信为了规范自定义分享链接功能在网页上的使用,修改了分享规则,6.5.6版本之后,分享功能必须引入微信SDK。对于未接入微信JSSDK或已接入但JSSDK调用失败的网页,被用户分享时,分享卡片将统一使用默认缩略图和标题简介,不允许自定义。

分享一下接入流程:

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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
});  

上面代码的timestamp、nonceStr、signature等参数的获取在后面给出

步骤四:通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

步骤五:通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

步骤六:分享接口

1、获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({

    title: ‘‘, // 分享标题

    link: ‘‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl: ‘‘, // 分享图标【一定要带http的完整路径】

    success: function () { 

        // 用户确认分享后执行的回调函数

    },

    cancel: function () { 

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

    }

});

 2、获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: ‘‘, // 分享标题
    desc: ‘‘, // 分享描述
    link: ‘‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: ‘‘, // 分享图标
    type: ‘‘, // 分享类型,music、video或link,不填默认为link
    dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

  3、获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: ‘‘, // 分享标题
    desc: ‘‘, // 分享描述
    link: ‘‘, // 分享链接
    imgUrl: ‘‘, // 分享图标
    success: function () {
       // 用户确认分享后执行的回调函数
    },
    cancel: function () {
       // 用户取消分享后执行的回调函数
    }
});

  还有分享到腾讯微博什么的就不一一列举了

步骤七:获取相关参数【PHP】

首先,去这里把jssdk.php放在项目里

然后通过下面方法获取相关参数

$appid = "appid";
$secret = "secret";
$jssdk = new JSSDK($appid,$secret);
$signPackage = $jssdk->GetSignPackage();

$signPackage变量里面就包括了上面需要的几个关键参数,直接用就可以了。  

时间: 2024-10-12 17:37:35

新版微信分享--图片和描述的相关文章

使用微信JSSDK自定义微信分享标题、描述、和图标

最近做一个项目的时候用到微信的分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一.如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用这个统一的网页服务接口. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 步

简单设置微信分享图片

设置微信分享企业网站时,微信缩略图, 图片: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>测试</title> <meta name="descri

Android 微信分享图片

private String APP_ID = "00000000000000000"; //微信 APPID private IWXAPI iwxapi; private void regToWx() { iwxapi = WXAPIFactory.createWXAPI(context, APP_ID, true);//这里context记得初始化 iwxapi.registerApp(APP_ID); } IMServer.getDiskBitmap(IMServer.url);

微信JSSDK自定义微信分享

使用微信JSSDK自定义微信分享标题.描述.和图标 微信公众号jssdk自定义分享,二次分享自定义失败解决技巧 原文地址:https://www.cnblogs.com/hool/p/12629615.html

微信分享到朋友圈,分享给好友设置标题图片描述参数

var imgUrl = "http://xxxxx.com/activity/images/logo.jpg"; var lineLink = window.location.href; var descContent = '来宜人贷参与抢钱活动100%获得10000金币,还可以兑换成现金哦~'; var shareTitle = '来宜人贷 拼人品抢现金'; var appid = 'wx237b223ad5773cf5'; function shareFriend() { Wei

如何控制微信分享网页时,展示的标题,描述和图片

在需要被微信分享的页面中,加入下面这一段JS代码就可以进行控制了. var imgUrl = 'http://xxx/share_ico.png'; // 分享后展示的一张图片 var lineLink = 'http://xxx'; // 点击分享后跳转的页面地址 var descContent = "xx!"; // 分享后的描述信息 var shareTitle = 'xx'; // 分享后的标题 var appid = ''; // 应用id,如果有可以填,没有就留空 func

微信分享链接带图片文字和描述

微信最近推出的一个社交工具网站 www.faxinxi.la ,能发投票.活动.文章. 但在微信外的浏览器包括PC端和移动端的都无法浏览这个网站任何内容,那是通过什么来控制的呢?通过微信内输出特定JS接口不太可能,那就只能通过Header信息里的User-agent了,实验后证实没错,通过探测可以知道微信内的User-agent信息: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML

微信分享自定义图片和摘要

参考: 微信分享实现 微信现在是众多公司营销的重点.遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少.而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点.不过很多人会发现分享的图片和摘要达不到预期.这篇文章就讲下这个,供初次接触微信开发的前端参考.(其实官方的文档也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑) 必要的前提准备 PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端.旧

微信朋友圈如何同时分享(图片+文字) Android版

以下是:微信朋友圈SDK 分享图片的代码,但只能分享图片,不能分享文字,如何才能图片和文字同时分享?求各位大神指教! public class MainActivity extends Activity {     private static final int THUMB_SIZE = 150;     private static final String SDCARD_ROOT = Environment.getExternalStorageDirectory().getAbsolute