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

最新推荐文章于 2024-12-05 13:59:39 发布

cuteJingle

最新推荐文章于 2024-12-05 13:59:39 发布

阅读量3.8k

点赞数 1

分类专栏：帮助文档 js 文章标签：前端 javascript html5 vue.js

本文链接：https://blog.csdn.net/cuteJingle/article/details/103794209

版权

本文介绍了如何在H5中实现在微信中自定义分享标题、描述和图片，涉及到微信JS-SDK的使用。在实现过程中，讨论了引入微信JS文件、前端代码配置等步骤，并详细列举了在配置过程中遇到的如'invalid signature'、'invalid url domain'等问题及相应的解决方案。此外，还特别提到分享必须配置图片的要求。

摘要由CSDN通过智能技术生成

一、前情提要

很多时候我们刚做出来的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 =

最低0.47元/天解锁文章