2026/2/6

现在已经有了Java后端，基于它开发微信小程序，核心需求就是完成小程序前端的开发、前后端的对接，以及最终的调试和上线。

一、前期准备（环境与账号）
在开始写代码前，先把基础环境和账号配置好：

1. 微信开发者工具：下载并安装[微信开发者工具]
2. 微信公众平台账号：注册小程序账号
3. 确认后端接口规范：整理好Java后端提供的所有接口，包括：
   • 接口地址（如https://your-domain/api/user/login）
   • 请求方式（GET/POST/PUT/DELETE）
   • 请求参数（参数名、类型、是否必传）
   • 返回格式（JSON结构，如{code:200, data:{}, msg:"成功"}）
   • 鉴权方式（如token、session、小程序的code2Session）

二、小程序前端开发核心步骤

1. 初始化小程序项目
   打开微信开发者工具，选择「小程序」→「新建项目」，填写：

• 项目名称（如「xxx小程序」）
• 目录（空文件夹即可）
• AppID（填写你的小程序AppID，测试可选「测试号」）
• 勾选「不使用云开发」，模板选择「基础模板」。

初始化后，项目会生成核心目录结构：

├── pages/
│ ├── index/
│ │ ├── index.js // 页面逻辑
│ │ ├── index.json // 页面配置
│ │ ├── index.wxml // 页面结构（类似HTML）
│ │ └── index.wxss // 页面样式（类似CSS）
├── app.js // 小程序全局逻辑
├── app.json // 小程序全局配置（页面路由、窗口样式等）
├── app.wxss // 小程序全局样式
└── project.config.json // 项目配置（AppID、开发工具配置）

2. 配置后端接口请求（关键：跨域/域名配置）
微信小程序对请求的域名有严格限制，必须先配置合法域名：
- 登录微信公众平台 → 开发 → 开发设置 → 服务器域名 → 添加你的Java后端域名（如`https://api.xxx.com`）。
- 本地调试时，可在开发者工具中勾选「详情」→「本地设置」→「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」（仅开发阶段可用）。

3. 封装请求工具（简化前后端对接）
在小程序中封装统一的请求方法，方便调用Java后端接口，新建`utils/request.js`：
```javascript
// 封装微信小程序请求
const baseUrl = "https://你的Java后端域名/api"; // 后端接口前缀

/**
 * 统一请求方法
 * @param {String} url 接口路径（不含前缀）
 * @param {String} method 请求方式 GET/POST
 * @param {Object} data 请求参数
 * @returns {Promise} 返回Promise
 */
function request(url, method = "GET", data = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url, // 完整接口地址
      method: method,
      data: data,
      header: {
        'content-type': 'application/json', // 默认JSON格式
        'token': wx.getStorageSync('token') // 如有鉴权，携带token（后端返回后存储）
      },
      success: (res) => {
        // 统一处理后端返回码
        if (res.data.code === 200) {
          resolve(res.data); // 成功返回数据
        } else {
          // 非200码提示错误
          wx.showToast({
            title: res.data.msg || '请求失败',
            icon: 'none'
          });
          reject(res.data);
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '网络异常',
          icon: 'none'
        });
        reject(err);
      }
    });
  });
}

// 暴露方法供页面调用
module.exports = {
  request
};


 4. 页面调用后端接口示例
以「用户登录」为例，假设Java后端提供了`/user/login`接口（POST，参数：username、password）：
```javascript
// pages/login/login.js
const { request } = require('../../utils/request.js'); // 引入封装的请求

Page({
  data: {
    username: '',
    password: ''
  },

  // 输入框绑定值
  handleInput(e) {
    const { name } = e.currentTarget;
    this.setData({
      [name]: e.detail.value
    });
  },

  // 登录按钮点击事件
  async login() {
    const { username, password } = this.data;
    // 简单校验
    if (!username || !password) {
      wx.showToast({ title: '请输入账号密码', icon: 'none' });
      return;
    }
    try {
      // 调用后端登录接口
      const res = await request('/user/login', 'POST', {
        username,
        password
      });
      // 登录成功，存储token（后端返回）
      wx.setStorageSync('token', res.data.token);
      wx.showToast({ title: '登录成功' });
      // 跳转到首页
      wx.switchTab({ url: '/pages/index/index' });
    } catch (err) {
      console.log('登录失败：', err);
    }
  }
});
5. 小程序核心功能开发
根据你的业务需求，开发对应的页面和功能：
- 页面结构（wxml）：用`view`、`button`、`input`等小程序组件搭建UI；
- 页面样式（wxss）：类似CSS，支持rpx自适应单位；
- 页面逻辑（js）：处理用户交互、调用后端接口、渲染数据。

三、联调与测试
1. **接口联调**：在开发者工具中，通过「调试器」→「Network」查看请求是否正常，参数/返回值是否符合预期；
2. **真机测试**：点击开发者工具的「预览」，生成二维码，用手机微信扫码测试（确保后端域名已配置合法）；
3. **功能测试**：覆盖所有核心场景（如登录、数据展示、提交表单等），验证前后端数据交互是否正确。
四、上线前准备与发布
1. **代码审核**：在开发者工具中点击「上传」，填写版本号和备注，将代码提交到微信公众平台；
2. **小程序审核**：登录公众平台 → 版本管理 → 提交审核（需完成小程序基本信息配置：名称、头像、简介等）；
3. **上线发布**：审核通过后，点击「发布」，小程序即可正式上线。

总结
1. 核心步骤：环境准备 → 配置后端域名 → 封装请求工具 → 开发页面并对接Java接口 → 联调测试 → 上线；
2. 关键注意点：小程序请求必须走HTTPS，后端接口需统一返回格式（如code+data+msg），方便前端处理；
3. 高效开发技巧：先封装通用请求工具，避免重复写wx.request，联调时优先用开发者工具的Network面板排查接口问题。