微信公众号内嵌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(String[] args) {
        String url = "https://www.**.com/share";
        System.out.println(getResult(url));
    };
 
    public static Map<String, String> getResult(String url){
 
        Map<String, String> ret = sign(getTicket(), url);
        ret.put("appId", getAppId());
        return ret;
    }
 
    private static String getAppId(){
        return APP_ID;
    }
 
    private static String getToken(){
        String accessToken = "";
        String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+getAppId()+"&secret="+APP_SECRET;
        try {
            String resultString =HttpUtil.get(url);
            if (null != resultString && !"".equals(resultString)) {
                System.out.println(resultString);
                JSONObject json = new JSONObject(resultString);
                accessToken = json.get("access_token").toString();
 
            }else{
                System.out.println("返回值为空，请检查请求报文或者请求地址是否正确");
            }
 
        } catch (Exception e) {
            e.printStackTrace();
        }
        return accessToken;
    }
 
    private static String getTicket(){
 
        String ticket = "";
        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+getToken()+"&type=jsapi";
 
        try {
            String resultString =HttpUtil.get(url);
            if (null != resultString && !"".equals(resultString)) {
                System.out.println(resultString);
                JSONObject json = new JSONObject(resultString);
                ticket = json.getString("ticket");
            }else{
                System.out.println("返回值为空，请检查请求报文或者请求地址是否正确");
            }
 
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ticket;
    }
 
    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 e)
        {
            e.printStackTrace();
        }
        catch (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().replace("-","");
    }
 
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

controller实现

@Controller
public class ShareController {
    @Value("${wx.appid}")
    private String appid;
    @Value("${wx.appsecret}")
    private String appsecret;
 
    @RequestMapping("/index")
    public ModelAndView show(){
        SignUtil.APP_ID=appid;
        SignUtil.APP_SECRET=appsecret;
 
        ModelAndView mv=new ModelAndView();
        String url="http://localhost:8080/index";
        mv.addObject("share",SignUtil.getResult(url));
        mv.setViewName("/index");
        return mv;
    }
}

2.2前端代码

后端配置完之后会给到前端一个接口，直接请求获取到配置信息，如下：

返回信息需要注意的有APPID(appId)，签名(signature)，生成签名的时间戳(timestamp)，生成签名的随机串(nonceStr)

拿到这些信息之后就需要着手SDK的配置了

首先需要安装微信SDK库

注*（文章转自我的xtjj文章，2023-02-09编写，如果版本号更新可以去官网看一下最新的SDK库）

npm i jweixin-1.6.0

安装成功之后在需要分享的页面引入

import wx from 'jweixin-1.6.0'

然后调用微信接口，可参考微信开发文档：微信网页开发 / JS-SDK说明文档 (qq.com)

wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: [
            // 用的方法都要加进来-根据业务需求引入
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "startRecord",
            "stopRecord",
            "playVoice",
            "pauseVoice",
            "stopVoice",
            "uploadVoice",
            "downloadVoice",
            "downloadVoice",
          ],
        });

这里建议把debug打开，这样可以先在电脑上调，看打印信息

然后根据文档可知，wx.ready是处理成功验证,wx.error是处理失败验证，所以这俩是跟wx.config平级的，写在wx.config下面,如下图所示：

然后在wx.ready里写你所需要的接口方法，咱们需要的是自定义“分享给朋友”及“分享到QQ”按钮的分享内容所以写下面这个：

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
}); 

写完之后不出意外的话就可以上线试一下了，如果报错的话先检查前面是否正确，如果签名什么的都没有问题的话就去看一下跨域，跨域也会影响到效果展示

原文：xtjj