H5微信分享自定义标题和图片的实现及遇到的各种坑

一、前情提要

很多时候我们刚做出来的h5微信分享出去标题显示的是网页名称，描述是网页的URL，也没有图片，这样很不好看。如下图：

我们期望像APP分享的那样，可以自定义标题内容、描述以及好看的图片。如下图：

要实现这个效果则需要用到微信公众号的JS-SDK。微信官方文档

二、实现步骤

首先需要一个微信公众号的id及公众号号的密钥。这里我们主要说前端的代码实现。后端代码具体实现方式可以参考：java微信分享的开发
当后端写好代码后我们前端需要做的有：
1.因为我是在vue框架开发的h5所以我在index.html文件里引入了微信这个js文件，如图：

2.具体代码实现：

init() {
   
	const ua = navigator.userAgent.toLowerCase();
    let isWx = false
    if (ua.match(/MicroMessenger/i)) {
    //判断是否在微信打开
    	isWx = true;
    } else {
   
    	isWx = false;
    }
    if (isWx) {
   
    	const link =