关于h5页面链接分享到微信的分享样式如何修改成自定义卡片

关于h5页面链接分享到微信的分享样式如何修改成自定义卡片

1. 首先需要一个微信公众号，公众号必须通过认证(我这里是用的服务号，订阅号没试过，应该也是ok的，不认证的话，分享功能是用不了的)

1.1 首先在公众号配置JS接口安全域名(设置->公众号设置->功能设置->JS接口安全域名)，下载校验文件，丢到对应域名根目录下，将要分享的链接域名及分享链接上的缩略图的域名都加上，如果是同一个就不用管了，这里我踩过坑，缩略图的安全域名没配进去，分享没效果

1.2 添加ip白名单(设置->安全中心->ip白名单)，把后台服务器的ip加进来，这个是后台帮忙获取签名时用到的(不配置分享没效果)

1.3 检查公众号中的分享功能权限是否已获取(开发->接口权限)，这里没认证的公众号是拿不到权限的，
分享没权限，即使签名成功了也没用，调用jssdk分享功能会在控制台打印无权限(建议调试时用微信开发者工具，打开公众号网页调试器来调试，由于配置的安全域名是环境地址，本地不方便调试，可以在本机host文件配置映射到环境，找到C:\Windows\System32\drivers\etc下的hosts文件，将本机ip映射到服务器域名，如果前端是vue项目，将vue.config.js文件里的devServer配置项里添加disableHostCheck: true，如果有之前的缓存，可打开cmd，输入ipconfig /flushdns 清除缓存，这样就可以在本机调试了)

2.前端配置

2.1 首先在项目引入jssdk文件https://res2.wx.qq.com/open/js/jweixin-1.6.0.js(这里我是直接引入的res2备用地址，按照微信官方文档是引入https://res.wx.qq.com/open/js/jweixin-1.6.0.js，如果失效了就换成res2)

2.2 初始化微信分享配置，参照微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
这里我踩过的坑记录一下，首先是需要后台老哥帮忙获取签名，我将前端页面地址encodeURIComponent之后给他，在微信开发者工具控制台config一直提示签名无效，然后就放弃encode就成功了，我们用微信的签名检测工具进行对比，encode后的地址拿到的签名是一致的，没找到原因，就试了一下没有encode，成功了。另一个项目encode后是ok的。
这里有几个需要注意的地方：
1.开发者工具提示config时提示签名失败(63002或者其他的)，检查安全域名是否配置、ip白名单是否配置、签名的前端页面地址是否含有#号，或者前后端拿到的不一致，encode不行就试试不要encode
2.公众号没认证，没分享权限，config成功了，但是分享的api会打印没有权限
3.用wx.checkJsApi去检测分享的api是否都能初始化成功
4.缩略图的地址不是安全域名，config成功了，jsApiList添加的分享方法也都打印出来了，对应的分享方法也打印了需要分享的信息，但是分享的效果出不来，这个就是缩略图的域名与页面域名不一致，只配置了页面的安全域名。