如何微信分享网页链接自定义图片和文字描述？生成微信自定义卡片链接流程（附教程与工具）

网页分享到微信要怎么才能自定义标题，内容和图片呢？

需求概述

微信中可以直接转发网页链接，用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友，朋友圈，QQ等。但直接这样分享的话，用户看到的只是一条链接，没有任何的图文内容。

前提：

有两个前提条件的，认证公众号及备案域名，没有这两个可以用这个飞哥工具

http://www.fgcq39.cn/index/index.html

方案实现

要达到上图自定义文案与图标的效果，必须要采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。（如果你不懂技术或者没有认证的公众号，使用wecard工具也可以实现相关的效果。）

具体步骤：

1、准备一个备案的域名和空间，绑定域名到该空间去。

2、登录微信公众平台，进入“公众号设置”的功能设置里面填写js接口安全域名，这个要填写的是你微信浏览器要打开的域名地址，不能添加IP地址。

3、引入js文件，在需要调用js接口的页面接入JS文件。

1	`http://res.wx.qq.com/open/js/jweixin-1.2.0.js`

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

4、通过config接口注入权限并验证配置（这一步算是整个步骤中最关键的一步，必须正确的配置信息才可以进行调用JS-SDK。）

wx.config({

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

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

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

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

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名，见附录1 jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 });

详细接入代码

+ (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"));

shareLink = shareLink + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"));

var shareImgUrl = "${IMGPATH!}/images/banner2.png";

var shareGid = "";

wx.ready(function () {

//分享给朋友

wx.onMenuShareAppMessage({

title: shareTitle,

desc: shareDesc,

link: shareLink,

imgUrl: shareImgUrl,

success: function (res) {

shared(shareLink, "friend", shareGid);

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

//分享到朋友圈

wx.onMenuShareTimeline({

title: shareTitle,

desc: shareDesc,

link: shareLink,

imgUrl: shareImgUrl,

success: function (res) {

shared(shareLink, "Timeline", shareGid);

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

//分享到QQ

wx.onMenuShareQQ({

title: shareTitle,

desc: shareDesc,

link: shareLink,

imgUrl: shareImgUrl,

success: function (res) {

shared(shareLink, "QQ", shareGid);

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

//分享到腾讯QQ

wx.onMenuShareWeibo({

title: shareTitle,

desc: shareDesc,

link: shareLink,

imgUrl: shareImgUrl,

success: function (res) {

shared(shareLink, "Weibo", shareGid);

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

//分享到QZone

wx.onMenuShareQZone({

title: shareTitle,

desc: shareDesc,

link: shareLink,

imgUrl: shareImgUrl,

success: function (res) {

shared(shareLink, "QZone", shareGid);

},

fail: function (res) {

alert(JSON.stringify(res));

}

});

function shared(url, type, gid){

var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);

if(!!gid) {

rUrl += "&gid=" + gid;

}

$.ajax({

type: "GET",

url: rUrl,

dataType: "json",

success: function(rs){

//alert("分享成功");

}

});

}

" _ue_custom_node_="true">

如何微信分享网页链接自定义图片和文字描述？生成微信自定义卡片链接流程（附教程与工具）相关推荐

微信分享网页链接自定义图片和文字描述
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必 ...
html页面微信分享如何隐藏链接,微信分享网页链接缩略图不显示解决方法
微信分享网页不显示缩略图片的原因为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义的分享 ...
微信分享网页链接不显示小图标怎么办
我们自己做的网站在微信中属于第三方网站,第三方网站想要显示缩略图和描述需要有两个前提条件. 微信分享网页链接不显示缩略图怎么办 1.认证的公众号 2.备案的域名有了公众号和域名才能去调用微信接口,也 ...
微信分享网页链接缩略图不显示解决方法
微信分享网页链接缩略图不显示解决方法参考文章: (1)微信分享网页链接缩略图不显示解决方法 (2)https://www.cnblogs.com/68xi/p/11596254.html 备忘一下.
网页在微信中转发，自定义图片和文字
需求:网页在微信聊天和朋友圈中转发,自定义图片和文字,需要用到微信jssdk. 条件:1.认证的订阅号或者认证的服务号,需要有这样的接口权限 2.appid 和appsecret ...
微信浏览器网页点击图片缩放
微信浏览器网页点击图片缩放 <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></scri ...
python自带的PIL库扩展图片大小给图片加上文字描述
利用python自带的PIL库扩展图片大小给图片加上文字描述.大多都是库函数调用,只是给定图片宽度后计算文字所需行数的代码需要写. 代码比较丑,but it works. #!/usr/bin/env ...
python add picture显示过大_利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例...
前言最近的一个项目中需要在图片上添加文字,使用了OpenCV,结果发现利用opencv给图像添加文字有局限.可利用的字体类型比较少,需要安装Freetype扩展,比较复杂.而且不能用putText函 ...
微信分享网页链接自定义标题，图片,文字描述
我先描述一下该h5的业务场景: 想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题,描述,分享图片:而不是...如下图前提条件: 1.请确认公众号已经认证,只有认证的公众号才具有分享相关接 ...
php分享网页到微信,分享网页链接到微信朋友圈或朋友
前提微信自6.5.5版本起对分享网页链接做了限制,如果不接入JSSDK,则分享出去的内容不会显示自定义的图片,而是显示一张默认图片使用JSSDK进行分享时,需要一个经过微信认证的服务号或者订阅号, ...

如何微信分享网页链接自定义图片和文字描述？生成微信自定义卡片链接流程（附教程与工具）

如何微信分享网页链接自定义图片和文字描述？生成微信自定义卡片链接流程（附教程与工具）相关推荐

最新文章

热门文章