springboot + wxtools微信公众号起步

最新推荐文章于 2022-10-08 14:42:53 发布

闪闪的小黑

最新推荐文章于 2022-10-08 14:42:53 发布

阅读量543

点赞数 1

分类专栏：微信公众号文章标签：微信公众号 springboot wxtools

本文链接：https://blog.csdn.net/qq_40985294/article/details/102962819

版权

微信公众号专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsSdk接入

1.开发环境
2.初始化项目
3.配置服务器
4.接入jsjdk
源码地址

1.开发环境

编辑器 Idea
构建工具 Gradle
使用 spring boot + wx-tools

2.初始化项目

打开idea，创建项目，选择spring initlizar => Next
img src=“https://img-blog.csdnimg.cn/20191107210521449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTg1Mjk0,size_16,color_FFFFFF,t_70” width=“60%”>
修改Type为Gradle Project，可以自定义包名和项目名
选择需要使用的框架，必选spring web，其他的看自己需求
一路next下去，然后finish
配置gradle，然后点击ok
编辑build.gradle文件，添加wx-tools依赖，然后点击按钮同步gradle配置
compile group: 'com.soecode.wx-tools', name: 'wx-tools', version: '2.1.4-RELEASE'
创建包已经控制器类，编写测试方法
启动
springboot项目路径默认不带项目名，所以启动项目之后在浏览器在浏览器输入localhost:8080/core/hello，出现以下结果就ok了

3.配置服务器

内网穿透(准备)

说明
由于微信公众号的服务器必须为外网可以访问的，所以如果没有服务器或者喜欢本地调试可以使用内网穿透
工具 —— utools(点击下载并安装)
下载NAT工具
配置NAT最后点击连接按钮

当我们要访问localhost/core/hello就可以通过https://xxcisbest.utools.club/core/hello访问了，不仅本机，其他电脑也可以通过internet访问

配置公众号服务器

注册

微信公众平台(点击进入)
点击注册，进入注册页，选择订阅号
使用一个没有注册过微信相关平台的邮箱进行注册，注册完成后就可以登录了

校验服务器(代码)

查看官方文档
点击右侧菜单栏中的开发栏下的开发者工具

选择开发者文档
点击开始开发下的接入指南，框内的是校验规则，若自己校验则需要根据校验规则校验，有点复杂，幸好有wx-tools框架

添加配置信息
上面的appid和appSecret由微信公众平台中的基本配置页面获取
由于微信公众平台需要服务器使用80端口，故需要修改application.properties文件
server.port=80
添加验证逻辑

在CoreController下添加以下代码，即可使用localhost/core进行校验

    IService iService = new WxService();

    /**
     * 校验微信公众号服务器
     * 使用GetMapping让方法只能被get方式调用，同时没有设置value值，则调用路径为localhost:8080/core
     * 使用ResponseBody返回字符串
     */
    @GetMapping
    @ResponseBody
    public String check(String signature, String timestamp, String nonce, String echostr, HttpServletRequest request) {
        //直接调用IService的checkSignature方法即可校验
        if (iService.checkSignature(signature, timestamp, nonce, echostr)) {
            final ServletContext context = request.getServletContext();
            context.setAttribute("signature",signature);
            context.setAttribute("timestamp",timestamp);
            context.setAttribute("nonce",nonce);
            context.setAttribute("appId","wxaa75524e11353aa1");
            return echostr;
        }
        return null;
    }

配置服务器(暂时未完成)

登录后点击右侧开发栏下的基本配置
点击页面中的修改配置
- 上一节写好了校验代码，使得localhost/core可以校验，但由于微信需要使用外网连接服务器，故需配置utools，前面内网穿透已经讲了，同时服务器配置中有一个token，我设置的是mytoken，是在wx.properties中自定义的，直接复制就可以，服务器地址设为:utools外网域名/core即可(根据自己配置的utools外网域名更改)，点击提交即可

4.接入jsjdk

官方文档(点击查看)
配置安全域名
添加接入代码
在CoreController中添加以下方法

 	 /**
     * 接入jssdk，使得访问localhost/core/config可以获取接入jssdk需要的信息
     * @param url 使用jssdk的页面的URL
     * @param apis 需要的jssdk接口
     * @return 微信jssdk配置对象的json字符串给前台
     */
    @ResponseBody
    @GetMapping("/config")
    public WxJsapiConfig config(@RequestParam String url, @RequestParam("apis[]") List<String> apis) throws WxErrorException {
        //直接使用iService调用createJsapiConfig方法即可
        WxJsapiConfig jsapiConfig = iService.createJsapiConfig(url, apis);
        //由于该方法不会设置appid，故需通过WxConfig对象获取
        jsapiConfig.setAppid(WxConfig.getInstance().getAppId());
        return jsapiConfig;
    }

编写wx-config.js请求config方法获取jssdk配置信息

function config(apiList){
    $.get("config",{
        url:window.location.href,
        apis:apiList
    },function(data, status){
        if(status === "success"){
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appid, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.noncestr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
                jsApiList: data.jsApiList// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }
    },"json");
}

测试页面 index.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0">
    <title>主页</title>
    <!--添加微信jssdk-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <script src="../js/wx-config.js"></script>
    <script>
        config([
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]);
        wx.ready(()=>{
            let wxShareObj = {
                title: '加油，世界杯', // 分享标题
                desc: '为世界杯加油', // 分享描述
                link: 'https://xxcisbest.utools.club/success', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://xxcisbest.utools.club/logo.png', // 分享图标
                success: function () {
                    // 设置成功
                    alert("分享成功");
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            };

            // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareAppMessage(wxShareObj);

            // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareTimeline(wxShareObj);

            // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareQQ(wxShareObj);

            // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
            wx.onMenuShareWeibo(wxShareObj);

            // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
            wx.onMenuShareQZone(wxShareObj);
        });
        wx.error(function (res) {
            alert(JSON.stringify(res))
        });
    </script>
</body>
</html>

按如下图片放置资源

源码地址

github源码

闪闪的小黑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot + wxtools微信公众号起步

jsSdk接入1.开发环境2.初始化项目1.开发环境编辑器 Idea构建工具 Gradle使用 spring boot + wx-tools2.初始化项目打开idea，创建项目，选择spring initlizar => Next修改Type为Gradle Project，可以自定义包名和项目名...
复制链接

扫一扫