springboot + wxtools微信公众号起步

jsSdk接入

  • 1.开发环境
  • 2.初始化项目
  • 3.配置服务器
    • 内网穿透(准备)
    • 配置公众号服务器
      • 注册
      • 校验服务器(代码)
      • 配置服务器(暂时未完成)
  • 4.接入jsjdk
  • 源码地址

1.开发环境

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

2.初始化项目

  1. 打开idea,创建项目,选择spring initlizar => Next
    springboot + wxtools微信公众号起步_第1张图片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%”>

  2. 修改TypeGradle Project,可以自定义包名和项目名

  3. 选择需要使用的框架,必选spring web,其他的看自己需求
    springboot + wxtools微信公众号起步_第2张图片

  4. 一路next下去,然后finish

  5. 配置gradle,然后点击ok
    springboot + wxtools微信公众号起步_第3张图片

  6. 编辑build.gradle文件,添加wx-tools依赖,然后点击按钮同步gradle配置
    springboot + wxtools微信公众号起步_第4张图片compile group: 'com.soecode.wx-tools', name: 'wx-tools', version: '2.1.4-RELEASE'

  7. 创建包已经控制器类,编写测试方法
    springboot + wxtools微信公众号起步_第5张图片

  8. 启动
    springboot + wxtools微信公众号起步_第6张图片

  9. springboot项目路径默认不带项目名,所以启动项目之后在浏览器在浏览器输入localhost:8080/core/hello,出现以下结果就ok了
    springboot + wxtools微信公众号起步_第7张图片

3.配置服务器

内网穿透(准备)

  • 说明
    由于微信公众号的服务器必须为外网可以访问的,所以如果没有服务器或者喜欢本地调试可以使用内网穿透

  • 工具 —— utools(点击下载并安装)

  • 下载NAT工具
    springboot + wxtools微信公众号起步_第8张图片

  • 配置NAT最后点击连接按钮

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

配置公众号服务器

注册

  • 微信公众平台(点击进入)
  • 点击注册,进入注册页,选择订阅号
    springboot + wxtools微信公众号起步_第9张图片
  • 使用一个没有注册过微信相关平台的邮箱进行注册,注册完成后就可以登录了

校验服务器(代码)

  1. 查看官方文档
    点击右侧菜单栏中的开发栏下的开发者工具
    springboot + wxtools微信公众号起步_第10张图片
    选择开发者文档
    springboot + wxtools微信公众号起步_第11张图片点击开始开发下的接入指南,框内的是校验规则,若自己校验则需要根据校验规则校验,有点复杂,幸好有wx-tools框架
    springboot + wxtools微信公众号起步_第12张图片
  • 添加配置信息
    springboot + wxtools微信公众号起步_第13张图片上面的appidappSecret由微信公众平台中的基本配置页面获取
    springboot + wxtools微信公众号起步_第14张图片由于微信公众平台需要服务器使用80端口,故需要修改application.properties文件
    springboot + wxtools微信公众号起步_第15张图片server.port=80

  • 添加验证逻辑
    springboot + wxtools微信公众号起步_第16张图片
    在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;
    }

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

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

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 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



    
    
    主页
    
    
    


    
    


  • 按如下图片放置资源
    springboot + wxtools微信公众号起步_第20张图片

源码地址

  • github源码

你可能感兴趣的:(微信公众号)