Good evening, everyone. I'm your teacher.
In the view of the teacher, the small program will only become more and more popular by relying on wechat to dominate the country's billion traffic. I believe many people have learned or tried to develop wechat applets through various ways. The author once learned and developed wechat applets because of interest, so now use this blog to record some of my previous development experience and experience.
2, Main content
- Construction of springboot backend architecture
- Applet project build
- Applet api call
- Background resetful interface writing
- Applet calling background interface
- Free https application
- Deploy online under linux
3, Wechat applet project construction
I don't want to introduce these basic things too much. At the beginning of development, you generally don't have your own server and domain name, so when you write locally, check "don't verify domain name security" in "project settings" under "details".
As for the components of wechat applet, i.e. the development of front-end page, I hope you can stand loneliness and be serious on wechat development platform.
Components:
https://developers.weixin.qq.com/miniprogram/dev/component/
api:
https://developers.weixin.qq.com/miniprogram/dev/api/
4, Back end explanation
I write in the back end mainly in java. Of course, those familiar with other development languages can also use other languages to develop the back end. Now I'll explain how to write the back-end api in java. The main framework is springboot, the development tool myeclipse, and alicloud server.
Create a maven project and import related dependencies:
pom.xml dependency
<!-- Unified version control -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
</parent>
<dependencies>
<!-- freemarker Render Page -->
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<!-- spring boot core -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- springboot integration jsp -->
<!-- tomcat Support of. -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
</dependencies>Create an application. In the configuration file src/main/resources / The properties file can modify some configuration parameters, etc.
#jsp support spring.mvc.view.suffix=.jsp spring.mvc.view.prefix=/WEB-INF/jsp/ #this is set port #server.port=80 server.port=443 #Add ssl certificate #ssl certificate file name server.ssl.key-store=classpath:xxxxxxx.pfx server.ssl.key-store-password=xxxxxxxx server.ssl.keyStoreType=xxxxxxxx
In the actual project, the database may be involved, and mybatis should be integrated. In this article, I only do the test, but I don't do the test using the database.
First, create the springboot portal: app Paste the code below class:
@ComponentScan(basePackages= "com.bin")//Add package @ ComponentScan(basePackages = "")
@EnableAutoConfiguration
public class App{
//Start springboot
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}Right click run when starting the project.
After writing a test controller, the wechat applet communicates with the java backend. The controller code is as follows:
@RestController
@SpringBootApplication
public class ControllerText {
@RequestMapping("getUser")
public Map<String, Object> getUser(){
System.out.println("Wechat applet is calling...");
Map<String, Object> map = new HashMap<String, Object>();
List<String> list = new ArrayList<String>();
list.add("zhangsan");
list.add("lisi");
list.add("wanger");
list.add("mazi");
map.put("list",list);
System.out.println("Wechat applet call completed...");
return map;
}
@RequestMapping("getWord")
public Map<String, Object> getText(String word){
Map<String, Object> map = new HashMap<String, Object>();
String message = "My ability is limited. Don't embarrass me";
if ("later".equals(word)) {
message="We are the first work of Liu Ruoying.";
}else if("Wechat applet".equals(word)){
message= "To get more knowledge about wechat applets, please read more wechat official documents and other wechat development related content. There is no end to learning.";
}else if("Xi'an Technological University ".equals(word)){
message="Xi'an University of Technology( Xi'an Technological University)Xi'an University of Technology (hereinafter referred to as "Xi'an University of technology"), located in Xi'an, the ancient capital of the world's famous historical city, is the only teaching and Research University in Northwest China characterized by military industry, focusing on engineering and coordinated development of science, culture, economics, management and law. It was one of the seven undergraduate colleges directly under the Ministry of ordnance industry of the people's Republic of China ("seven children of military industry") ), a high-level teaching and research university mainly built in Shaanxi Province, a University jointly built by Shaanxi Provincial People's government, China ordnance industry group and the Bureau of national defense science, technology and industry, a pilot University of the "excellent engineer education and training plan" of the Ministry of education, and a pilot school of comprehensive reform for the cultivation of College Students' innovative ability in Shaanxi Province. It is a unit with national level II confidentiality qualification\"Combining the army with the people and integrating the army with the people\"National defense research universities.";
}
map.put("message", message);
return map;
}
@RequestMapping("")
public String getText(){
return "hello world";
}
}So far, the simple back-end framework and test are basically completed.
Note: the difference between @ RestController and @ Controller annotation @ RestController is equivalent to two annotations, It can transfer the data obtained from the back-end in the form of json string in the front-end page (web page). The data transfer between wechat applet and the background is in the form of json message. Therefore, this is one of the main reasons why we choose the springboot framework to develop the back-end of applet. On the one hand, we can carry out the back-end development of applet.
5, Applet initiates network request
After completing the back-end development of the applet, let's start the network request on the applet side.
Take a simple button request data as an example:
wxml file
<button bindtap='houduanButton1'>Click to initiate the request</button>
<view wx:for="{{list}}">
full name:{{item}}
</view>js file
/**
* Initial data of the page
*/
data: {
list: '',
word: '',
message:''
},
houduanButton1: function () {
var that = this;
wx.request({
url: 'http://localhost:443/getUser',
method: 'GET',
header: {
'content-type': 'application/json' // Default value
},
success: function (res) {
console.log(res.data)//Print to console
var list = res.data.list;
if (list == null) {
var toastText = 'Data acquisition failed';
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
list: list
})
}
}
})
}The main API called is Wx Request, if you want to know the detailed introduction, you can go to the wechat public platform( https://developers.weixin.qq.com/miniprogram/dev/api/ ).
Next, take the search type request as an example:
wxml file:
<input type="text" class="houduanTab_input" placeholder="Please enter the content you want to query" bindinput='houduanTab_input'></input>
<button bindtap='houduanButton2'>query</button>
<view wx:if="{{message!=''}}">
{{message}}
</view>js file: see the previous js file for the definition of variables
//Gets the contents of the input box
houduanTab_input: function (e) {
this.setData({
word: e.detail.value
})
},
// Network request for houduanButton2
houduanButton2: function () {
var that = this;
wx.request({
url: 'http://localhost:443/getWord',
data:{
word: that.data.word
},
method: 'GET',
header: {
'content-type': 'application/json' // Default value
},
success: function (res) {
console.log(res.data)//Print to console
var message = res.data.message;
if (message == null) {
var toastText = 'Data acquisition failed';
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
message: message
})
}
}
})
}So far, a simple wechat applet has been completed to communicate with the java back end.
Now you can start the back-end project and test it on the wechat development tool.
Demonstration effect:
So far, the front and rear communication of the applet has been completed.
6, ps application
In fact, it's not an application. You can apply for a free ssl certificate after purchasing the domain name. In the previous configuration file application There is certificate configuration in properties. You can directly add the pfx file of the certificate to the back-end project.
7, Purchase server deployment backend api code
For the springboot project, I suggest that you type jar and deploy it directly on the server. You only need to install the corresponding version of jdk on the server. Project deployment command:
Run command: nohup java -jar helloworld.jar &
Nohup means not to hang up the service, but to stay permanently. Unless the ECS is restarted, it can't be used; The last & indicates to generate the log file nohup. After executing the command Out, of course, you can also use Java - jar HelloWorld jar. Source: https://blog.csdn.net/zwb19940216