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

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
.cn 域名,1个 12个月
简介: 【Spring Boot 快速入门】二十一、基于Spring Boot 开发一个微信小程序

前言


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


申请


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

  进入申请页面之后,需要及时完善小程序相关信息。


image.png


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

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

image.png


开发


后端


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


image.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中可以看到所有的接口信息。


image.png


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


image.png


前端


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


image.png


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


image.png


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


image.png


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


image.png


结语


  好了,以上就是基于Spring Boot 开发一个微信小程序的过程



目录
相关文章
|
12天前
|
XML Java 数据格式
SpringBoot入门(8) - 开发中还有哪些常用注解
SpringBoot入门(8) - 开发中还有哪些常用注解
30 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
509 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
611 1
|
10天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
21 2
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
198 1
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
596 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
NoSQL Java Redis
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
这篇文章介绍了如何使用Spring Boot整合Apache Shiro框架进行后端开发,包括认证和授权流程,并使用Redis存储Token以及MD5加密用户密码。
30 0
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
|
23天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
17 0
|
30天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
31 0
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
340 0

热门文章

最新文章