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 = window.location.href.split("?")[0];
        if (link !== window.location.href) {
        	window.location.href = link;
        } //为了兼容iOS系统，否则有可能地址取值出现错误
        const url = window.location.href.split("#")[0]
        const params = {
            url: url
        }
        this.axios.get("/xxxx/share", { params }).then(res => {
        	this.shareWx(res.data)
       	}).catch(err => {
       		console.error(err)
        });
	}
},
shareWx(data) {
	wx.config({
    	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   		appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名
        jsApiList: [
        	"updateAppMessageShareData"
        ] // 必填，需要使用的JS接口列表
	});
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    	wx.updateAppMessageShareData({ 
        	title: "微信分享好看的标题", // 分享标题
            desc: "我是好看的描述", // 分享描述
            link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
           	imgUrl: "http://dmimg.5054399.com/allimg/pkm/pk/22.jpg", // 分享图标
            success: function () {
            	// 设置成功
            }
        });
    });
}

三、遇到的问题

1.{ “errMsg”: “config:invalid signature” }
微信官方文档已经说的很清楚了，附录5-常见错误及解决方法，按照他说的步骤一个一个排查吧。
主要问题可能是地址没有通过location.href.split(’#’)[0]动态获取导致，像iOS系统，第一次点开链接分享是正确的，但从分享的内容点进去再次分享则会出错，是因为微信分享出去的链接会自动补充为http://xxx.cn/?from=singlemessage&isappinstalled=0，如果再用上诉方法截取会出错，所以需要加上下面这段代码：

const link = window.location.href.split("?")[0];
if (link !== window.location.href) {
	window.location.href = link;
}

加了之后再用location.href.split(’#’)[0]就可以了。

2.{ “errMsg”: “config:invalid url domain” }
首先排查你传给后端的地址是不是#号前面的数据，再去看看微信公众号后台配置的js接口安全域名跟当前页面的域名是否一致，如果都一致再看看js接口安全域名里是否加了http://或者https://，如果加了要去掉。

3.{ “errMsg”: “updateAppMessageShareData:the permission value is offline verifying” }
我们当时是建的测试公众号在调试，所以会报错，改成正式公众号测试后就没出现这个问题了。

4.{ “errMsg”: “fail imgurl is needed” }
不知道是不是微信升级了，分享必须配置一张图片，否则会报错。所以我就去百度随便找了个图片地址放上去就好了，也有看到别人随便写了个图片就解决了。

wx.updateAppMessageShareData({ 
	title: "微信分享好看的标题", // 分享标题
    desc: "我是好看的描述", // 分享描述
    link: "http://xxx", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: "123.png", // 分享图标
    success: function () {
    	// 设置成功
    }
});

以上就是我遇到的一些问题及解决方法，希望可以帮助到你们。