微信公众号内嵌vue的H5实现微信分享自定义卡片

具体需求大概是这样的，在公众号内嵌的vue项目在分享的时候走了微信的接口，分享出来的卡片是空白且没有图片的，像这样

而正确的分享姿势应该是这样

说完业务需求现在说实现方法，首先需要公众号支持

1，公众号配置

1.1，APPID对应的公众号是否有分享接口权限

1.2，设置白名单和绑定域名

分享的服务器外网ip地址，需要添加到白名单中，如图：

绑定域名：登录公众平台进入“公众号设置”的“功能设置”里填写“js接口安全域名”

备注：登录后可在“开发者中心”查看对应的接口权限，js接口安全域名要添加图片的连接域名或用oss规定图片域名要跟js接口安全域名里的域名一致，负责图片会有不展示的风险，这是个坑，要注意

2，代码实现

2.1，后端Java代码

注*(如果后端已经配置好了可以直接跳到下面的前端代码)

签名算法具体参考微信开发文档：微信网页开发 / JS-SDK说明文档 (qq.com)

import org.json.JSONObject;
 
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
 
public class SignUtil {
    public static String APP_ID="";//在controller中初始化
    public static String APP_SECRET="";
    public static void main