微信小程序开发——后端Java（一）

施樂榮 發表於 2019-11-11 10:52:00

微信小程序开发——后端Java（一）

<h2>一、前言</h2>
最近接触了小程序的开发，后端选择Java，因为小程序的代码运行在腾讯的服务器上，而我们自己编写的Java代码运行在我们自己部署的服务器上，所以一开始不是很明白小程序如何与后台进行通信的，然后查找资料发现结合了官方提供的api后好像和我们普通的web前后端通信也没有多大的区别，有想法后就写了这个测试程序。
 
<h2>二、微信小程序开发基础</h2>
<h3>1、不校验域名安全性</h3>
大家在刚开始开发的时候一般都没有自己的服务器及域名，所以大家在本地编写的时候，在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。
<img src="https://img2018.cnblogs.com/i-beta/1832356/201911/1832356-20191111103131346-322044474.png" alt="">
<h3> 2、了解wx.request(OBJECT)</h3>
可先阅读官方文档
OBJECT参数说明：
 <img src="https://img2018.cnblogs.com/i-beta/1832356/201911/1832356-20191111105902943-1322695083.png" alt="">
 success返回参数说明：
<img src="https://img2018.cnblogs.com/i-beta/1832356/201911/1832356-20191111105922614-347761894.png" alt="">
data 数据说明：
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：
<ul>
<li>对于 <code>header['content-type']</code> 为 <code>application/json</code> 的数据，会对数据进行 JSON 序列化</li>
<li>对于 <code>header['content-type']</code> 为 <code>application/x-www-form-urlencoded</code> 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）</li>
</ul>
<h3>3、.json文件不能为空</h3>
必须加上{}
 
<h2>三、Java后端编写</h2>
主要框架springboot，开发工具idea，服务器阿里云服务器。
<h3>1、创建一个maven项目，导入相关依赖： </h3>
<div class="cnblogs_code">
<pre>
<parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.2.1.RELEASE</version>
 <relativePath/> 
</parent></pre>
</div>
<div class="cnblogs_code">
<pre><dependencies>
 
 
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-freemarker</artifactId>
 </dependency>

 
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>

 
 
 <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></pre>
</div>
<h3>2、创建application.yml文件，修改一些配置参数等</h3>
<div class="cnblogs_code">
<pre>server:
port: 8083
ssl:
key-store: classoath:xxxxxx.pfx
key-store-password: xxxxxx
key-store-type: xxxxxx</pre>
</div>
在实际项目中可能涉及数据库，还要整合mybatis，在文章中，仅仅做测试就不做使用数据库的测试
<h3>3、首先修改springboot的启动程序：</h3>
<div class="cnblogs_code">
<pre>package com.wx.m3;

@ComponentScan(basePackages= "com.wx.m3")//添加扫包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class M3Application {

public static void main(String[] args) {
 SpringApplication.run(M3Application.class, args);
}

}</pre>
</div>
启动项目时直接右击run即可
<h3> 4、在写一个测试的controller进行微信小程序与java后端实现通信，controller代码如下：</h3>
<div class="cnblogs_code">
<pre>@RestController
@SpringBootApplication
public class IndexController {

@RequestMapping("getUser")
public Map<String,Object> getUser(){
 System.out.println("微信小程序正在调用...");
 Map<String,Object> map = new HashMap<String, Object>();
 List<String> list = new ArrayList<String>();
 list.add("Amy");
 list.add("Cathy");
 map.put("list",list);
 System.out.println("微信小程序调用完成...");
 return map;
}

@RequestMapping("")
public String getTest(){
 return "Hello world";
}

}</pre>
</div>
至此简易的后端框架基本完成
　　说明：@RestController与Controller注解的区别
　　　　　　@RestController相当于它能实现将后端得到的数据在前端页面（网页）中以json串的形式传递。
　　　　　　微信小程序与后台数据之间的数据传递就是以json报文的形式传递。这也是选择springboot框架开发小程序后台的主要原因之一，可以方便进行小程序后套开发
 
<h2>四、小程序发起网络请求</h2>
下面以一个简单的按钮请求数据为例：
<h3>hello.wxml文件：</h3>
<div class="cnblogs_code">
<pre><button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">
姓名：{{item}}
</view></pre>
</div>
<h3>hello.js文件：</h3>
<div class="cnblogs_code">
<pre>Page({
data:{
list: ''
},
houduanButton1:function(){
var that = this;
wx.request({
 url: 'http://localhost:8083/getUser',
 method: 'GET',
 header: {
 'content-type':'application/json'
 },
 success: function(res){
 console.log(res.data);
 var list = res.data.list;
 if(list == null) {
 var toastText = '数据获取失败';
 wx.showToast({
 title: toastText,
 icon: '',
 duration: 2000
 });
 } else{
 that.setData({
 list: list
 })
 }
 }
})
}
}) </pre>
</div>
<h3>app.json:</h3>
将hello放到第一行，则首先进入hello.wxml
<img src="https://img2018.cnblogs.com/i-beta/1832356/201911/1832356-20191111105033852-889021395.png" alt="">
 
测试结果如下所示：
　　点击按钮显示姓名
<img src="https://img2018.cnblogs.com/i-beta/1832356/201911/1832356-20191111105118262-738363919.png" alt="">
 
  
来源：https://www.cnblogs.com/csyzlm/p/11833511.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发——后端Java（一）