H5网页如何在微信中自定义分享连接(可设置标题+简介+图片)

自定义分享连接是什么?

自定义微信分享连接是指将一条网页连接经过微信接口生成一张卡片,而且该卡片的标题,内容和图片均可以本身编辑。以下图效果javascript

 

● 自定义网页连接示例(带标题,内容简介,缩略图)java

● 未自定义的网页连接api

 

 

如上图,若是不作相关处理,页面进行二次分享,用户看到的要么就是连接,要么就是没有内容介绍+空图,上面显示的文案其实是获取的title标签中的文案,我在网上查的相关例子有说明,图片若是不设置,将会自动获取浏览器渲染的第一张图片,通过我的测试,并无实现(朋友圈同理,不作图片展现)。浏览器

 

解决方案

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

具体步骤以下:

一、准备一个备案的域名和空间,绑定域名到该空间去微信

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

三、引入js文件,在须要调用js接口的页面接入JS文件。微信公众平台

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

  

四、经过config接口注入权限并验证配置(这一步算是整个步骤中最关键的一步,必须正确的配置信息才能够进行调用JS-SDK。工具

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