vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程

npm install weixin-js-sdk --save

// 引入wxjs
import wx from "weixin-js-sdk"; 

getShareInfo() {
      //获取url链接（如果有#需要这么获取）
      var url = encodeURIComponent(window.location.href.split("#")[0]);
 		//获取url链接（如果没有#需要这么获取）
     // var url = encodeURIComponent(window.location.href);

      getSing(url).then(res => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: [
            "updateAppMessageShareData",
            "updateTimelineShareData"
          ] // 必填，需要使用的 JS 接口列表
        });
        wx.ready(() => {
          var shareData = {
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: window.location.href,
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg"
          };
          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.updateAppMessageShareData(shareData);
          //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
          wx.updateTimelineShareData(shareData);
        });
        //错误了会走 这里
        wx.error(function (res) {
          console.log("微信分享错误信息", res);
        });
      });
    },

// 调用分享的事件
    this.getShareInfo();

 /**
     * 获取access_token的值
     * @return
     */
    @GetMapping("/getToken")
    public String getToken() {
        String token = "";
        String path = "token?grant_type=client_credential&appid=" + APPID + "&secret=" + APPSECRET;
        String body = HttpUtil.createGet(WX_GZH_API + path)
                .execute()
                .body();
        log.info("获取了token,返回数据" + body);
        JSONObject object = JSON.parseObject(body);
        //获取token
        token = object.getString("access_token");
        //失效时间
        String expires_in = object.getString("expires_in");
        //将token值的值放在redis里面
        redisService.setCacheObject("gzh_access_token", token,7190,TimeUnit.SECONDS);
        return token;

    }

//公众号请求的地址
    public static String WX_GZH_API = "https://api.weixin.qq.com/cgi-bin/";

/**
     * 获取jsapi_ticket
     * @return
     */
    @GetMapping("/getJsapiTicket")
    public String getJsapiTicket() {
        //获取redis里面的token
        Object access_token = redisService.getCacheObject("gzh_access_token");
        if (access_token==null) {
            access_token = getToken();
        }
        String path = "ticket/getticket?access_token=" + access_token.toString() + "&type=jsapi";
        String body = HttpUtil.createGet(WX_GZH_API + path)
                .execute()
                .body();
        log.info("获取了JsapiTicket,返回数据" + body);
        JSONObject object = JSON.parseObject(body);
        //获取ticket
        String ticket = object.getString("ticket");
        //错误码
        Integer errcode = object.getInteger("errcode");
        if(errcode==0){
            //将ticket值的值放在redis里面
            redisService.setCacheObject("gzh_ticket", ticket,7190,TimeUnit.SECONDS);
        }
        return ticket;
    }

    /**
     * 开始签名
     */
    @GetMapping("/getSing")
    public ResponseResult getSing(String url){
        //从redis里面获取ticket
        Object ticket = redisService.getCacheObject("gzh_ticket");
        if(ticket==null){
            ticket = getJsapiTicket();
        }
        Map<String, String> ret = WeChatUtils.sign(ticket.toString(), url);
        JSONObject objectData = new JSONObject();
        for (Map.Entry entry : ret.entrySet()) {
            objectData.put(entry.getKey().toString(),entry.getValue());
        }
        objectData.put("appId", APPID);
        return ResponseResult.success(objectData);
    }

//******************************************
    // 公众号网页开发
    //******************************************
    public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                "&noncestr=" + nonce_str +
                "&timestamp=" + timestamp +
                "&url=" + url;
        System.out.println(string1);

        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        }
        catch (NoSuchAlgorithmException | UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }

        ret.put("url", url);
        ret.put("jsapi_ticket", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);

        return ret;
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }