【Spring Boot 快速入门】二十一、基于Spring Boot 开发一个微信小程序

1,474 阅读4分钟

「这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战

前言

  嗨,大家好,现在微信使用的用户很多,作为开发人员也可以建立一个自己的微信小程序,本期与大家分享一下作者建立微信小程序的开发流程。

申请

  百度搜索微信公众号平台,然后扫码登录注册一个微信公众号, 图片.png

  进入申请页面之后,需要及时完善小程序相关信息。 图片.png   首次进行微信小程序的开发,需要在开发者管理中,找到开发者设置中可以查看我们需要的开发者ID,开发者ID主要包含:AppID(小程序ID)和AppSecret(小程序密钥),需要注意的是出于安全考虑,AppSecret不再被明文保存,忘记密钥请点击重置,因此我们申请了和AppSecret之后,需要记录下来,如果忘记的话,就需要重新申请可能导致线上项目失效。

  在开发者ID最下面,可以设置常用的域名信息。需要注意的是所有设置的域名必须是HTTPS的域名,设置好域名之后就可以开发微信小程序啦。

图片.png

开发

后端

  开发微信小程的后端框架选择,本次开发一个【在线实用工具箱】,主要是供个人使用的,所以后台就选择了Spring Boot 作为基础进行开发,数据库是使用MySQL。整个项目的目录如下所示。

图片.png   整个后端的项目开发与正常项目开发一致,主要是给小程序提供服务接口信息。目前已经实现的主要功能:服装尺码对照表、谚语大全、车牌查询、全国邮编查询、全国区号查询、好玩手持弹葆、BM计算器、数字转大写、笑话大全、生肖查询、血遗传查询、历史朝代表等功能,更多功能正在完善中。

  需要特别注意的是,在有用户输入新碟接口中,需要对输入信息进行敏感词校验,否则在审核的过程中无法通过。小程序为我们提供了敏感信息校验的接口,这个接口是免费的,因此直接调用即可。

检查一段文本是否含有违法违规内容 调用接口代码如下:

Map<String,String> map = new HashMap<>();
map.put("content",text);
String post1 = HttpUtil.post(postUrl+token,
        JSON.toJSONString(map));
log.info("请求参数是:{},数据校验返回信息是:{}",text,post1);
JSONObject jsonObject = JSONObject.parseObject(post1);
int code = (int) jsonObject.get("errcode");
if(code==0){
    return "0";
}else {
    return "1";
}

  由于需要与微信小程序进行交互,因此在配置文件中需要把经常使用的微信服务的后台地址配置在配置文件中,当调用时直接取值即可。 application.properties配置文件如下

server.port=8080


# mysql
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?useSSL=false&useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&serverTimezone=Asia/Shanghai
spring.datasource.username=test
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource

mybatis.mapper-locations=classpath*:mapper/**/*.xml

# 开启swagger bootstrap ui
swagger.enable=true
#swagger.enable=true
wx.access_token_url=https://api.weixin.qq.com/cgi-bin/token
wx.access_token_grant_type=client_credential
wx.access_token_appid=wx123456789
wx.access_token_secret=2e741123456789
wx.access_token_post=https://api.weixin.qq.com/wxa/msg_sec_check?access_token=

wx.access_token_rk_url=https://api.weixin.qq.com/cgi-bin/token
wx.access_token_grant_rk_type=client_credential
wx.access_token_rk_appid=wx0123456789
wx.access_token_rk_secret=430c123456789
wx.access_token_rk_post=https://api.weixin.qq.com/wxa/msg_sec_check?access_token=

  在与微信小程序交互的过程中,需要根据appid和secret去获取当前请求的小程序的token。在请求其他服务的过程中需要使用到token信息。例如下面进行的敏感文本信息校验功能等。


public String getToken(){
    String token = HttpUtil.get(url+"?grant_type=" + type + "&appid=" + appid + "&secret=" + secret);
    log.info("获取token返回信息是:"+token);
    JSONObject jsonObject1 = JSONObject.parseObject(token);
    String accessToken = (String) jsonObject1.get("access_token");
  
    return accessToken;
}

  后台使用的都是最基础的服务,主要是为小程序提供接口,启动项目之后,在Swagger中可以看到所有的接口信息。

图片.png   调用一下查询车牌归属地的接口,输入北京,可以看到北京地区的车牌归属地信息已经正常返回即可为微信小程序提供查询服务。

图片.png

前端

  上面的接口服务已经开发完成了,下面将基于微信开发者工具进行前端的开发,前端采用ColorUI组件库进行开发,在配置文件中引入即可使用。整体的开发页面如下图所示。

图片.png   需要注意的是在本地调试的过程中如果遇到无法访问服务接口的情况,需要在详情,本地配置中选择不校验合法域名这一条,否则本地的基本上请求不到服务。

图片.png   将上面后台中的本地服务启动,然后将域名信息配置到app.js中。这样就可以全局使用host: "http://localhost:8080"。 如下图:

图片.png   点击其中的一个页面,输入查询数据,可以看到正常访问到数据了,可以正常访问喽。

图片.png

结语

  好了,以上就是基于Spring Boot 开发一个微信小程序的过程,感谢您的阅读,希望您喜欢,如对您有帮助,欢迎点赞收藏。如有不足之处,欢迎评论指正。下次见。

  作者介绍:【小阿杰】一个爱鼓捣的程序猿,JAVA开发者和爱好者。公众号【Java全栈架构师】维护者,欢迎关注阅读交流。