【2025 最新】从0开始开发一个自己的微信小程序（跨端方法）

Ding Jiaxiong

3512人浏览 · 2025-09-29 01:17:55

Ding Jiaxiong · 2025-09-29 01:17:55 发布

【2025 最新】从0开始开发一个自己的微信小程序（uni-app跨端方法）

1. 注册小程序

1.1 注册

微信小程序官网：https://mp.weixin.qq.com/cgi-bin/wx

在这里插入图片描述

前往注册

在这里插入图片描述

可见（一个邮箱只能申请一个小程序），填写好相关信息

在这里插入图片描述

直接注册

在这里插入图片描述

完成信息登记

在这里插入图片描述

继续

在这里插入图片描述

确定

在这里插入图片描述

注册完成

在这里插入图片描述

这样小程序就注册好了

1.2 填写基本信息

在这里插入图片描述

提交

在这里插入图片描述

填写完成

1.3 补充小程序类目

在这里插入图片描述

这个可以先随便选一个，笔者暂时也不知道要做个啥小程序，确定

在这里插入图片描述

OK，到这里，我们就可以开始代码开发了

2. 开发小程序（前端）

2.1 下载微信开发者工具

官网：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

在这里插入图片描述

直接下载

在这里插入图片描述

等待完成

2.2 安装微信开发者工具

在这里插入图片描述

直接双击运行安装程序

在这里插入图片描述

下一步

在这里插入图片描述

我接受

在这里插入图片描述

安装！

在这里插入图片描述

等待完成即可

在这里插入图片描述

完成，直接运行

在这里插入图片描述

直接用我们刚刚注册好的小程序的管理员微信扫码登录

在这里插入图片描述

OK，这样就进来了

2.3 下载 HBuilderX

这次笔者想直接用 uni-app 跨端框架直接做（未来还可以直接发布为 App ），所以选择使用 HBuilderX 编写前端代码

官网：https://www.dcloud.io/hbuilderx.html

在这里插入图片描述

直接下载

在这里插入图片描述

绿色软件，解压即用

2.4 安装 HBuilderX

在这里插入图片描述

直接解压出来

在这里插入图片描述

OK，直接双击运行

在这里插入图片描述

开始体验

在这里插入图片描述

这样就进来了，可以登录一下 Dcloud 账号

在这里插入图片描述

2.4 编写代码

2.4.1 新建项目

在这里插入图片描述

直接创建，使用默认模板就行，创建

在这里插入图片描述

创建完成。

2.4.2 直接运行到微信开发者工具

在这里插入图片描述

会需要一些插件，等待即可

在这里插入图片描述

信任并运行

在这里插入图片描述

这是因为还没有设置 AppID，但是界面其实已经出来了

在这里插入图片描述

2.4.3 appid 配置

在这里插入图片描述

点击详情 → 修改 Appid，修改成啥呢

在这里插入图片描述

就是这个了，这个是每一个微信小程序的唯一 ID

在这里插入图片描述

确定

在这里插入图片描述

修改成功后，发现构建失败了

在这里插入图片描述

点击编译

在这里插入图片描述

这样就行了，我们也可以在 HBuilderX 中配置一下

在这里插入图片描述

这样直接编译时，就不会出现提示 appid 错误的信息了

2.5 上传开发版本

到这里呢，其实我们已经完成了一个非常基础的 demo 开发，可以直接进行工程上传了

直接在微信开发者工具中

在这里插入图片描述

点击上传

在这里插入图片描述

确定

在这里插入图片描述

上传

在这里插入图片描述

上传成功

2.6 体验版预览

回到开发管理后台【版本管理】

在这里插入图片描述

这就有我们刚刚那次提交了，直接提交审核

在这里插入图片描述

先不备案，我们先看看体验版

在这里插入图片描述

选为体验版

在这里插入图片描述

页面路径保持默认就好，其实就是我们那个首页的路径

在这里插入图片描述

提交

在这里插入图片描述

现在就可以扫码体验了

在这里插入图片描述

没啥问题

3. 后端开发

这里我们暂时只为了打通前后端访问，能请求接口后，一切都好办了

不管咋说，现在的页面上的东西，其实都是 “死的”，不存在前后端交互，我们来实现一下

3.1 自己创建工程

来一个最简单的 Sping Boot 工程

3.1.1 创建工程

打开老家伙 IDEA

在这里插入图片描述

新建项目

在这里插入图片描述

spring 官方脚手架不能创建 JDK 8 版本了，所以改成了 ali 的，http://start.aliyun.com

在这里插入图片描述

勾一个 web 就行，后续用到什么依赖可以再加，Create

在这里插入图片描述

构建完成

在这里插入图片描述

送的代码还挺多的

3.1.2 编写接口

不用编写了，送了挺多的，选一个用

在这里插入图片描述

就你了

3.1.3 请求接口

请求前先直接启动

在这里插入图片描述

OK ，跑起来了，测试一下刚刚那个接口

在这里插入图片描述

没啥问题，能用

稍微来改一下我们的前端代码

在这里插入图片描述

逻辑非常简单，在 onLoad 生命周期时，请求本地接口，然后修改title，保存自动编译

在这里插入图片描述

没有问题

在这里插入图片描述

但是现在有个问题就是，现在请求的接口是我本地的接口，发布后，就没有本地服务这个概念了，现在我们能访问 localhost ，完全是因为

在这里插入图片描述

但凡关闭，就用不了了，发布体验版后，手机上根本不会发出这个请求，像是直接被过滤掉了

在这里插入图片描述

电脑小程序会请求

在这里插入图片描述

所以怎么办呢，要么买一台服务器部署，但是要花钱，还挺贵，还有一个办法，内网穿透，测试开发用（当然自己的电脑肯定不能 24 小时一直不关机），用自己的电脑作为服务器，老实说，自己的电脑可比 <100 块钱 /月的服务器配置好得多得多

直接内网穿透

在这里插入图片描述

OK，改一下前端代码并编译

在这里插入图片描述

直接发布体验版，看看效果

在这里插入图片描述

果然是 localhost 的原因，这样就能请求接口了，内网穿透还可以配置 HTTPS，大家自己去了解吧

3.2 微信云开发

在这里插入图片描述

那我肯定直接体验免费的了，开始体验

在这里插入图片描述

可以看到，这个也有数据库等概念，编写功能的话，就需要在云函数中编写，然后在小程序中还要进行配置

在这里插入图片描述

这里大家可以自行了解，云函数的创建及使用，可参见官网文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/functions/getting-started.html

在这里插入图片描述

4. 小程序上线

4.1 小程序备案

想要小程序真正能被所有人访问/搜索到，少不了备案

在这里插入图片描述

4.2 服务器域名备案

在这里插入图片描述

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

4.3 SSL 证书申请配置

https 请求必要的

4.4 Nginx 配置转发

一般来说，Nginx 做反向代理，配置证书也可以一步搞定。

就先到这里。

乐奇 Rokid 开放社区

更多推荐

MCA Selector 使用指南：Minecraft Java 版区块选择、删除与导出工具详解

MCA Selector（mcaselector）是一款运行于 Minecraft Java Edition 存档之外的独立区块管理工具，核心用途是从世界存档中按选择或按过滤器**导出/删除指定的区块（Chunk）与区域（Region）**。本文将基于本仓库的 README 与源码实现，完整介绍它的获取安装方式、受支持的 Minecraft 版本范围、区块与 MCA 文件格式原理，以及 GUI 选

乐奇 Rokid 开放社区

Pure Live v2.1.0 阶段更新：Twitch 与 SOOP Live 全平台接入及五端发布工程详解

本篇文章以 Pure Live v2.1.0 阶段更新（[docs/STAGE_UPDATE_2_1_0.md](https://link.gitcode.com/i/210fa9230711bcbe5b4060a33d3e1ee9)）为核心，梳理该版本将维护分支的弹幕、性能、播放、助眠、本地互动与发布工程整合为可向上游审阅大版本的全过程。你将看到 Twitch、SOOP Live 两个新平台的完

乐奇 Rokid 开放社区

Path of Building 完全指南：离线规划流放之路Build的伤害与天赋

规划流放之路Build时，天赋点怎么点、词缀选哪条、光环开几个才划算？Path of Building（PoB）是一个免费的离线Build规划器，把装备、技能、天赋树的数值集中算给你看，适合想认真研究数值而不是靠感觉配装的新手和老玩家。## 安装与启动PoB 是开箱即用的 Windows 程序，clone 源码后解压运行即可看到结果。```bashgit clone https://