“This is the 27th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

preface

Hi, everyone, now wechat use a lot of users, as a developer can also build their own micro channel small program, this issue to share with you the author to establish micro channel small program development process.

To apply for

Baidu searches the wechat public account platform, then scans the code to log in and register a wechat public account.

After entering the application page, you need to timely improve the information related to the mini program.For the first time in the development of wechat small program, we need to find the developer Settings in the developer management to view the developer ID we need. The developer ID mainly includes: AppID(small program ID) and AppSecret(small program key). It should be noted that for security reasons, AppSecret is no longer stored in plaintext. If you forget the key, please click reset. The need to reapply may result in the online program being invalidated.

At the bottom of the developer ID, you can set common domain name information. Note that all domain names must be HTTPS domain names. After setting the domain name, you can develop wechat applet.

The development of

The back-end

Development of wechat routines back-end framework selection, the development of an [online utility toolbox], mainly for personal use, so the background will choose Spring Boot as the basis for development, the database is the use of MySQL. The entire project catalog is shown below.

The whole backend project development is consistent with normal project development, mainly to provide service interface information for small programs. At present, the main functions have been realized: clothing size comparison table, proverb daquan, license plate query, national zip code query, national area code query, fun hand-held bullet bao, BM calculator, digital capitalization, joke Daquan, zodiac query, blood genetic query, historical dynasty representative and other functions, more functions are being improved.

It should be noted that in the interface where users input new disks, the input information should be checked for sensitive words; otherwise, the input information cannot pass the audit. The small program provides us with a sensitive information verification interface, this interface is free, so directly call.

To check whether a piece of text contains illegal content, call the interface code as follows:

Map<String.String> map = new HashMap<>();
map.put("content",text);
String post1 = HttpUtil.post(postUrl+token,
        JSON.toJSONString(map));
log.info("The request parameters are: {}, the data verification return message is: {}",text,post1);
JSONObject jsonObject = JSONObject.parseObject(post1);
int code = (int) jsonObject.get("errcode");
if(code==0) {return "0";
}else {
    return "1";
}

Copy the code

The background address of the frequently used wechat service needs to be configured in the configuration file because it needs to interact with the wechat applets. The value can be directly used when invoking the configuration file. The application.properties configuration file is as follows

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 # enable swagger bootstrap UI swaggertrue
#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=
Copy the code

In the process of interaction with wechat applets, it is necessary to obtain the token of the currently requested applets according to appID and secret. Token information is required to request other services. For example, the following sensitive text information verification function.


public String getToken(){
    String token = HttpUtil.get(url+"? grant_type=" + type + "&appid=" + appid + "&secret=" + secret);
    log.info(The token return message is:+token);
    JSONObject jsonObject1 = JSONObject.parseObject(token);
    String accessToken = (String) jsonObject1.get("access_token");
  
    return accessToken;
}

Copy the code

The background uses the most basic services, mainly to provide interfaces for small programs. After starting the project, you can see all the interface information in Swagger.

Call the interface to query the license plate location, input Beijing, you can see that the license plate location information in Beijing has been returned normally, and you can provide query services for the wechat mini program.

The front end

The interface service above has been developed, and the front-end development will be carried out based on wechat developer tools. The front-end development will be carried out using ColorUI component library, which can be used in the configuration file. The overall development page is shown below.

Note that if the service interface cannot be accessed during local debugging, you need to select not verifying valid domain names in details and local configuration. Otherwise, services cannot be requested locally.

Start the local service in the background above, and then configure the domain name information into app.js. So you can use host: “globallyhttp://localhost:8080 “.The diagram below:

Click one of the pages, enter the query data, you can see the normal access to the data, can be normal access.

conclusion

Well, the above is based on Spring Boot to develop a micro channel small program process, thank you for reading, I hope you like, if it is helpful to you, welcome to like collection. If there are shortcomings, welcome comments and corrections. See you next time.

About the author: [Little Ajie] a love tinkering with the program ape, JAVA developers and enthusiasts. Public number [Java full stack architect] maintainer, welcome to pay attention to reading communication.