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

最近开发h5网页，在分享网页到微信好友时，发现我的分享链接只有标题和链接地址：

却不像自定义微信分享链接一样，分享的链接像生成一张卡片，有对应的标题，内容和图片：

上网搜了一下，参考了 H5网页如何在微信中自定义分享链接（可设置标题+简介+图片） 这篇文章，在此汇总记录一下：

要达到上图自定义文案与图标的效果，必须要采用微信提供的JS-SDK，微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。

接入步骤如下：

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

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

3、引入js文件，在需要调用js接口的页面接入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

})

下载一个Dreamweaver网页编辑的软件就可以了! 用Dreamweaver打开你要添加链接的网页 随便找个位置打你要链接的文字! 然后选中要链接的文字在Dreamweaver的下方又个属性看到那里又个链接,在那个链接的地方输入你产品简介的那个页面! 就可以了!

注意: 要给产品简介也做成网页格式! 然后做好的那个网页也要和你做链接的那个页面放到一个文件夹里面! 产品介绍里面的的那些图片也是一样要放到这一个文件夹里面! 不然预览会找不到文件! 然后你又互联网域名的话还要用FTP传到你的域名空间里面!

---