后端如何跨界做小程序开发

后端如何跨界做小程序开发

前言、我上线了两款微信小程序一、后端开发者如何跨界做小程序开发二、技术选型：为什么是 uniapp+uview？1. 选型对比（后端视角）2. 最终技术栈组合
三、核心开发流程（后端视角重点记录）1. 项目初始化与基础配置（1）uniapp 项目搭建（2）后端接口适配小程序
2. 小程序核心功能实现（结合 uview 组件）（1）微信授权登录（uview + 后端接口）（2）表单提交与数据校验（uview 表单组件）（3）列表分页与下拉刷新（uview 列表组件）

四、后端跨界踩坑实录（重点！）1. 坑 1：uniapp 请求后端接口跨域失败2. 坑 2：uview 组件样式错乱（适配问题）3. 坑 3：小程序授权后无法获取 openid4. 坑 4：uniapp 打包小程序后部分功能失效
五、后端视角的优化建议1. 接口层面2. 前端层面3. 部署层面
六、总结与展望

前言、我上线了两款微信小程序

作为一名深耕 Java 后端的开发者（Spring Boot/MyBatis 栈），之前的工作重心一直是接口设计、数据存储、权限控制。最近想要扩展自己的技术领域，做两款小程序练练手，历时两个月终于上线了两个工具类微信小程序，《云同步备忘录记事本》《菜价小记本》，欢迎大家打开微信扫码体验。

一、后端开发者如何跨界做小程序开发

需要快速上线两款轻量工具型微信小程序，考虑到：

原生小程序开发需学习微信语法，且无法跨端复用；我不是专职前端，需快速开发；需兼顾开发效率和后期维护性；

最终选择了 uniapp+uview 技术栈，从零到一完成 2 款小程序的开发上线。
这篇文章会详细记录开发过程中的选型思考、核心实现、踩坑实录，希望能给后端同行或小程序新手提供参考。

二、技术选型：为什么是 uniapp+uview？

1. 选型对比（后端视角）

技术方案	优势	劣势	放弃原因
微信原生小程序	原生支持好、性能最优	仅支持微信、语法独特	后端学习成本高，无法复用
uni-app	一套代码多端部署、Vue 语法	部分组件需兼容调整	无（Vue 语法后端易上手）
Taro	支持 React/Vue、跨端	配置复杂、文档较深	后端对 React 不熟悉，学习成本高
uView	轻量、组件丰富、适配小程序	仅支持 uniapp 生态	无（完美适配 uniapp）

2. 最终技术栈组合

前端核心：uniapp（跨端框架）+ uview（UI 组件库）

后端核心：Spring Boot 2.7 + MyBatis-Plus + MySQL

部署相关：微信开发者工具（小程序调试）、Nginx（静态资源代理）、Jenkins（自动化构建）

三、核心开发流程（后端视角重点记录）

1. 项目初始化与基础配置

（1）uniapp 项目搭建

安装 HBuilderX，新建「uni-app 项目」，选择「微信小程序」模板；

安装 uview：通过 HBuilderX 插件市场搜索「uView UI」安装，在
main.js中全局引入：

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
// 在pages.json中配置全局样式
"globalStyle": {
  "usingComponents": true,
  "css": "@/uni_modules/uview-ui/index.scss"
}

配置微信小程序 AppID：在
manifest.json中填写微信小程序 AppID（需提前在微信公众平台申请）。

（2）后端接口适配小程序

作为后端，重点做了 3 件事：

接口规范统一：采用 RESTful 风格，返回格式标准化（code/message/data）：

// 统一返回结果类

public class R<T> {
    private int code; // 200成功、500失败、401未授权
    private String message;
    private T data;
    // getter/setter + 静态工厂方法
}

跨域处理：小程序请求需后端配置跨域，在 Spring Boot 中添加配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://servicewechat.com") // 小程序合法域名
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true);
    }
}

}

. 微信授权对接：小程序登录需获取 code，后端调用微信接口换取 openid：

@Service
public class WxLoginService {
    @Value("${wx.appid}")
    private String appid;
    @Value("${wx.secret}")
    private String secret;

    public String getOpenid(String code) {
        String url = String.format(
            "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code",
            appid, secret, code
        );
        // 调用HTTP工具类请求微信接口（省略OkHttp代码）
        String result = HttpUtil.get(url);
        JSONObject json = JSON.parseObject(result);
        return json.getString("openid");
    }
}

2. 小程序核心功能实现（结合 uview 组件）

作为后端，重点关注「数据交互 + 组件复用 + 功能落地」，以下是 2 款小程序的共性核心功能：

（1）微信授权登录（uview + 后端接口）

<template>
  <u-button type="primary" @click="wxLogin" :loading="loading">微信快捷登录</u-button>
</template>
<script>
export default {
  data() {
    return { loading: false };
  },
  methods: {
    wxLogin() {
      this.loading = true;
      // 1. 获取微信code
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 2. 调用后端接口换取openid并登录
          this.$u.api.login.wxLogin({ code: loginRes.code }).then(res => {
            if (res.code === 200) {
              uni.setStorageSync('token', res.data.token); // 存储后端返回的token
              uni.switchTab({ url: '/pages/index/index' });
            }
          }).finally(() => {
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>

（2）表单提交与数据校验（uview 表单组件）

uview 的
u-form组件简化了表单校验，后端无需关注前端校验逻辑，只需接收参数即可：

<template>
  <u-form :model="form" :rules="rules" ref="formRef">
    <u-form-item label="设备编号" prop="deviceNo">
      <u-input v-model="form.deviceNo" placeholder="请输入设备编号"></u-input>
    </u-form-item>
    <u-form-item label="备注" prop="remark">
      <u-input v-model="form.remark" type="textarea"></u-input>
    </u-form-item>
    <u-button type="primary" @click="submitForm">提交</u-button>
  </u-form>
</template>
<script>
export default {
  data() {
    return {
      form: { deviceNo: '', remark: '' },
      rules: {
        deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate().then(() => {
        // 调用后端接口提交数据
        this.$u.api.device.addDevice(this.form).then(res => {
          if (res.code === 200) {
            this.$u.toast('提交成功');
          }
        });
      });
    }
  }
};
</script>

（3）列表分页与下拉刷新（uview 列表组件）

后端需提供分页接口（pageNum/pageSize），前端通过 uview 的
u-list组件实现：

<template>
  <u-list v-for="(item, index) in deviceList" :key="index">
    <u-list-item :title="item.deviceNo" :desc="item.createTime"></u-list-item>
  </u-list>
  <u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore>
</template>
<script>
export default {
  data() {
    return {
      deviceList: [],
      pageNum: 1,
      pageSize: 10,
      loadStatus: 'loadmore' // loadmore/loading/noMore
    };
  },
  onLoad() {
    this.getDeviceList();
  },
  methods: {
    getDeviceList() {
      this.$u.api.device.getDeviceList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          const list = res.data.list;
          if (this.pageNum === 1) {
            this.deviceList = list;
          } else {
            this.deviceList = [...this.deviceList, ...list];
          }
          // 判断是否有更多数据
          this.loadStatus = list.length < this.pageSize ? 'noMore' : 'loadmore';
        }
      });
    },
    loadMore() {
      this.pageNum++;
      this.getDeviceList();
    }
  }
};
</script>

四、后端跨界踩坑实录（重点！）

作为后端开发者，前端开发中踩的坑大多集中在「兼容问题 + 样式调试 + 小程序特性」，以下是高频坑及解决方案：

1. 坑 1：uniapp 请求后端接口跨域失败

现象：本地开发时，小程序请求后端接口提示「跨域错误」；

原因：微信小程序本地调试时，默认会校验合法域名，未配置的域名会被拦截；

解决方案：

微信公众平台「开发→开发设置」中添加后端接口域名（需 HTTPS）；

微信开发者工具中勾选「详情→本地设置→不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」（仅本地调试用）。

2. 坑 2：uview 组件样式错乱（适配问题）

现象：部分 uview 组件（如 u-grid、u-button）在小程序中样式错位；

原因：uniapp 的 rpx 适配规则与微信小程序一致，但需确保根目录
pages.json中配置：

"globalStyle": {
  "rpxCalcMaxDeviceWidth": 375, // 设计稿宽度（默认375，需与UI设计稿一致）
  "rpxCalcBaseDeviceWidth": 375,
  "rpxCalcIncludeWidth": 750
}

解决方案：统一设计稿宽度为 375px，组件样式优先使用 uview 默认样式，避免自定义冲突。

3. 坑 3：小程序授权后无法获取 openid

现象：后端调用微信
jscode2session接口返回
errcode:40029；

原因：小程序 AppID 与后端配置的 AppID 不一致（开发环境用了测试 AppID，上线时未替换）；

解决方案：

统一前后端 AppID（开发 / 测试 / 生产环境区分配置）；

确保微信公众平台「开发→接口设置」中开启「用户信息授权」接口。

4. 坑 4：uniapp 打包小程序后部分功能失效

现象：本地调试正常，打包后小程序无法调用后端接口；

原因：uniapp 打包时，
manifest.json中「微信小程序配置」未勾选「不校验合法域名」（线上必须配置合法域名）；

解决方案：

线上环境必须在微信公众平台配置合法域名（接口域名、图片域名等）；

打包前检查
manifest.json中的「微信小程序→合法域名」配置是否完整。

五、后端视角的优化建议

1. 接口层面

小程序网络请求不稳定，建议所有接口添加「超时重试」（前端用 uview 的
$u.http配置重试次数）；

敏感接口（如支付、预约）需添加「签名校验」，避免接口被恶意调用；

分页接口返回「总条数」，方便前端判断是否有更多数据。

2. 前端层面

利用 uview 的
u-storage组件缓存用户 token，避免频繁授权；

列表页使用「下拉刷新 + 上拉加载」，提升用户体验；

表单提交前做前端校验，减少无效接口请求（uview 的
u-form已支持）。

3. 部署层面

小程序静态资源（图片、图标）建议放在 CDN，减少加载时间；

后端接口部署在云服务器，确保微信小程序能正常访问（需备案域名 + HTTPS）；

使用 Jenkins 自动化构建 uniapp 项目，打包后直接上传微信公众平台。

六、总结与展望

作为 Java 后端，跨界开发 2 款微信小程序的最大感受是：uniapp+uview 降低了后端开发前端的门槛，Vue 语法对后端开发者友好，uview 组件库基本覆盖了小程序常用功能，无需从零编写样式。

开发过程中，后端的优势在于「接口设计、数据处理、权限控制」，而前端的难点在于「样式适配、兼容性调试、用户体验」。通过这次实践，不仅掌握了小程序开发技能，更深刻理解了前后端协作的核心（接口规范、数据格式、异常处理）。

未来计划：

基于现有代码，扩展 H5 端（uniapp 一键打包）；

优化小程序性能（分包加载、图片懒加载）；

集成微信支付功能（下一篇博客重点分享）。

如果这篇文章对你有帮助，欢迎点赞 + 收藏 + 评论交流～ 有小程序开发相关的问题，也可以在评论区留言，一起探讨！