用 uni-app 开发微信小程序是目前最高效的方案，一套代码可同时发布到微信、支付宝、抖音小程序、App、H5 等多端。我给你整理了最简、最实用的步骤，直接跟着做就能跑起来。

一、开发前准备（必须先装这 2 个工具）

1. HBuilderX（uni-app 官方编辑器）

• 下载地址：https://www.dcloud.io/hbuilderx.html
• 选「正式版」，安装后直接用，无需配置环境（自带 vue 运行环境）
• 

1. 微信开发者工具

• 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 用于预览、调试、发布微信小程序
• 

二、第一步：创建 uni-app 项目

1. 打开 HBuilderX
2. 点击左上角：文件 → 新建 → 项目
3. 选择：uni-app → 输入项目名称 → 选择模板✅ 新手推荐：默认模板（最简单）✅ 有需求可选：uni-ui 模板 / 微信小程序专用模板
4. 点击「创建」，项目就生成了

三、第二步：配置微信小程序信息（关键）

打开项目根目录的 manifest.json，找到：

1. 左侧选择：微信小程序配置
2. 填写：微信小程序 AppID

• 去微信公众平台（mp.weixin.qq.com）注册小程序获取
• 测试可先用：测试号 AppID

1. 勾选：运行时是否开启微信小程序组件自动补全

不填 AppID 无法真机预览和发布！

四、第三步：编写页面（uni-app 语法 = vue 语法）

uni-app 用 Vue3/Vue2 + 小程序标签 开发，和写网页几乎一样。

1. 页面文件结构

/pages  /index     首页    index.vue  页面文件（结构+样式+逻辑）  /list      列表页  /my        我的页

2. 最简页面示例（index.vue）

<template>  <!-- 页面结构（和小程序标签一致） -->  <view class="container">    <text>我的第一个 uni-app 小程序</text>    <button @click="clickMe">点击我</button>  </view></template><script>export default {  data() {    return {}  },  methods: {    clickMe() {      uni.showToast({ title: 'Hello 小程序' })    }  }}</script><style scoped>.container {  padding: 20px;  text-align: center;}</style>

3. 配置页面路由（pages.json）

所有页面必须在这里注册，类似小程序的 app.json：

{  "pages": [    { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },    { "path": "pages/my/my", "style": { "navigationBarTitleText": "我的" } }  ],  "globalStyle": {    "navigationBarTextStyle": "white",    "navigationBarBackgroundColor": "#007aff",    "navigationBarTitleText": "uni-app 小程序"  }}

五、第四步：运行到微信开发者工具

1. 在 HBuilderX 顶部菜单选择：运行 → 运行到小程序模拟器 → 微信开发者工具
2. 首次运行会提示：配置微信开发者工具路径

• 找到你安装的 微信开发者工具.exe 路径

1. 点击运行后，会自动编译，并自动打开微信开发者工具

微信开发者工具内操作

1. 点击「允许」授权
2. 左侧就能看到小程序预览效果
3. 可真机扫码预览、调试、查看控制台

六、第五步：发布微信小程序（上线）

1. HBuilderX：发行 → 微信小程序
2. 自动编译完成后，回到微信开发者工具
3. 点击右上角：上传

   
4. 填写版本号、项目备注

1. 登录 微信公众平台 → 开发管理 → 提交审核 → 发布