使用微信JS-SDK调用微信分享

概述

对应公众号需开通微信认证，否则没有分享接口的调用权限
网上有很多微信分享链接自定义标题图标的相关文章
绝大多数都只是描述的前端JavaScript该怎么写
本文介绍前端(Jquery)和后端(Java)一起配合编写代码
由于微信不允许外部链接，你需要点击页尾左下角的“阅读原文”，才能访问文中的链接

一、微信公众平台配置

1. 在微信公众平台中获取如下两个值

开发者ID(AppID)
开发者密码(AppSecret)

(1)在微信公众平台左侧选择<开发>菜单下的“基本配置”
开发-基本配置

(2)在基本配置中即可看到AppID与AppSecret

2. 在微信公众平台中配置IP白名单

配置位置就在AppSecret下方，如图所示

IP白名单

3. 在微信公众平台配置JS接口安全域名

(1)在微信公众平台左侧选择<设置>菜单下的“公众号设置”
设置-公众号设置

(2)进入“功能设置”进行添加“JS接口安全域名”

二、前端(Jquery)相关代码

1. jQuery和微信JS-SDK下载地址

(1) jQuery根据自己的需要选择对应版本: JQuery下载地址

(2) 微信JS-SDK: 微信JS-SDK下载地址1 微信JS-SDK下载地址2

2. 页面引入jQuery和微信JS-SDK

<script src="{jQuery在你的项目中存放的路径}/jquery.min.js"></script>
<script src="{微信JS-SDK在你的项目中存放的路径}/jweixin-1.4.0.js"></script>

3. 调用代码（最重要部分）

<script type="text/javascript">
    // 当前页面的url,即将要分享的链接
    var globalUrl;
    // 开发者ID(AppID) 公众号的唯一标识
    var appId;
    // 生成签名的时间戳
    var timestamp;
    // 生成签名的随机串
    var nonceStr;
    // 生成的签名
    var signature;
    $(document).ready(function (event) {
        //动态获取当前页面的url
        globalUrl = window.location.href.split("#")[0];
        // url编码
        var url = encodeURI(globalUrl);
        // 传给后端的url完整链接
        var param = {
            url: url
        };
        //发送ajax请求获取微信签名等数据
        $.ajax({
            type: "POST",
            // 此处请求的接口根据后端对应的不同而不同
            url: "/wx/getWeiXin",
            data:JSON.stringify(param),
            dataType: "JSON",
            async:false,
            success: function (result) {
                // 这里的取值根据你自己的后端返回不同而有所差别
                if (result.status === 200) {
                    appId = result.data.appid;
                    timestamp = result.data.timestamp;
                    nonceStr = result.data.nonceStr;
                    signature = result.data.signature;
                    initWeiXin();
                } else {
                    console.log("error response");
                }
            }
        });
    });
    // 通过config接口注入权限验证配置，可查阅微信公众平台接口进行配置
    function initWeiXin() {
        wx.config({
            debug: false,
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            // 此处只使用了分享给朋友和分享到朋友圈，更多接口查阅微信开发者文档
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        });
        wx.ready(function () {
            wx.onMenuShareTimeline({
                imgUrl: '自定义图标url',
                title: "自定义标题",
                desc: "自定义摘要内容",
                link: globalUrl
            });
            wx.onMenuShareAppMessage({
                imgUrl: '自定义图标url',
                title: "自定义标题",
                desc: "自定义摘要内容",
                link: globalUrl
            });
        })
    }
</script>

三、后端(Java)相关代码

需引入的包:

调用微信接口，大佬的github开源地址：
implementation 'com.github.liyiorg:weixin-popular:2.8.28'
hutool工具类，hutool官网：
implementation 'com.github.liyiorg:weixin-popular:2.8.28'

1.WeChatController

@RestController("WeChatController")
@RequestMapping("/api/wechat")
public class WeChatController {

    @Resource
    private WeChatService weChatService;

    @RequestMapping(value = "/getWeChat", method = RequestMethod.POST)
    public WeChat getWeChat(@RequestBody WeChatUrl weChatUrl) {
        return weChatService.getWeChat(weChatUrl);
    }
}

2.WeChatService

@Service
public class WeChatService {
    // 开发者ID(AppID) 公众号的唯一标识
    private static String APPID = "AppID";
    // 开发者密码(AppSecret)
    private static String SECRET = "AppSecret";

    /**
     * 获取微信信息主方法
     * @param weChatUrl
     * @return
     */
    public WeChat getWeChat(WeChatUrl weChatUrl) {
        String urlStr = URLUtil.decode(weChatUrl.getUrl());
        String accessToken = getAccessToken(APPID, SECRET);

        String jsapiTicket = getTicket(accessToken);

        long timestamp = createTimestamp();

        String nonceStr = getRandomString(13);

        String signature = sign(jsapiTicket, nonceStr, timestamp, urlStr);

        return new WeChat(APPID, timestamp, nonceStr, signature);
    }

    /**
     * 生成 signature
     * @param jsapiTicket
     * @param nonceStr
     * @param timestamp
     * @param urlStr
     * @return
     */
    private String sign(String jsapiTicket, String nonceStr, long timestamp, String urlStr) {
        String originStr = "jsapi_ticket=" + jsapiTicket + "&noncestr="
                + nonceStr + "&timestamp=" + timestamp + "&url=" + urlStr;
        return SecureUtil.sha1(originStr);
    }

    /**
     * 获取随机字符串
     * @param length
     * @return
     */
    private String getRandomString(int length) {
        String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        Random random=new Random();
        StringBuffer sb=new StringBuffer();
        for(int i=0;i<length;i++){
            int number=random.nextInt(62);
            sb.append(str.charAt(number));
        }
        return sb.toString();
    }

    /**
     * 获取时间戳
     * @return
     */
    private long createTimestamp() {
        return System.currentTimeMillis() / 1000;
    }

    /**
     * 获取jsapi_ticket
     * @param accessToken
     * @return
     */
    private String getTicket(String accessToken) {
        Ticket ticket = TicketAPI.ticketGetticket(accessToken);
        return ticket.getTicket();
    }

    /**
     * 获取access_token
     * @param appid
     * @param secret
     * @return
     */
    private String getAccessToken(String appid, String secret) {
        Token token = TokenAPI.token(appid, secret);
        return token.getAccess_token();
    }


}

3.java后端返给前端的实体类

@Data
public class WeChat {
    String appid;
    Long timestamp;
    String nonceStr;
    String signature;

    public WeChat(String appid, Long timestamp, String nonceStr, String signature) {
        this.appid = appid;
        this.timestamp = timestamp;
        this.nonceStr = nonceStr;
        this.signature = signature;
    }
}

以上就是实现调用微信分享接口的相关代码实现，欢迎交流~~