微信小程序实战 (微信小程序后端Java接口开发demo)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

前面的几篇简单介绍了一部分小程序框架基础，然后我们开始实战开发一哈（有些许前端基础的我看不下去了），还是等遇到问题在查一下官网的开发手册吧.

微信小程序后端Java接口开发

1.小程序后端开发

新建一个spring boot程序 pom.xml

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

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

新建TestController

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author : lizzu
 * @create 2022/10/8 22:34
 */
@RestController
@RequestMapping("v1/weChat/")
public class TestController {

    @GetMapping("/getInfo")
    public String getInfo(String userName){
        return "hello: "+userName;
    }
}

测试：

2.新建helloWord小程序项目

创建helloWord页面

  "pages":[
    "pages/helloWord/helloWord",
    "pages/index/index",
    "pages/logs/logs"
  ],

修改helloWord.js 增加接口调用方法 getData(that)

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that =this;
    this.getData(that);
  },
  /**
   * 接口调用
   */
  getData(that){
    wx.request({
      url: 'http://localhost:8080/v1/weChat/getInfo',      
      method:"GET",
      data:{
        userName: '李先生'
      },
      header:{
        'content-type': 'application/json'//json格式
      },
      success(res){//成功回调
        console.log(res.data);
        console.log(that);
        that.setData({
          result:res.data
        })
      }

    })
  },

页面增加

<!--pages/helloWord/helloWord.wxml-->
<text>pages/helloWord/helloWord.wxml</text>
<view>收到后台响应数据：{{result}}</view>

测试：报错“不在以下 request 合法域名列表中”

解决方案1 点击【详情】-勾选【不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书】

解决方案2 打开参考文档 可以看到

每个微信小程序需要事先设置通讯域名，小程序**只可以跟指定的域名进行网络通信**。

按照提示配置通讯域名

刷新测试

设置本地域名内网穿透可参考 SpringCloud Alibaba 开发微信公众号（新建微信公众号，内网穿透工具的使用）

测试效果：

至此微信小程序后端java接口开发demo整完

下一篇 微信小程序实现图书查询功能