微信小程序怎么做？新手入门全流程

很多人想做一个微信小程序，但一想到“开发”两个字就头大。其实，做小程序没那么玄乎，它更像是在微信里搭一个轻量级的网页应用。今天这篇文章，就用最通俗的话，把“微信小程序怎么做”这件事从头到尾讲清楚。

先搞清楚：小程序到底是什么

你可以把小程序理解成“微信里的App”。它不用下载安装，扫个码或者搜一下就能用。它用的是微信自己的技术体系，写页面主要靠 WXML、WXSS 和 JavaScript，跟写网页很像，但运行在微信环境里，能调用微信的登录、支付、定位等能力。

做小程序，核心就三步：注册账号、写代码、提交审核上线。

第一步：注册一个小程序账号

打开微信公众平台，选择“小程序”注册。你需要准备：

• 一个没注册过公众号的邮箱
• 主体信息：个人用身份证，企业用营业执照
• 一个手机号用来接收验证码

注册完成后，你会拿到一个 AppID，这是小程序的身份证，后面开发时要用到。个人主体也能注册，但个人小程序不能开通微信支付，想做电商要留意这一点。

第二步：安装开发者工具

微信官方提供了“微信开发者工具”，去官网下载对应系统版本即可。安装后用微信扫码登录，新建项目时填入刚才的 AppID，选择“不使用云开发”或“使用云开发”都可以，新手建议先用普通模板。

工具里左边是代码目录，中间是模拟器，右边是调试面板。你改一行代码，模拟器里马上就能看到效果，非常直观。

第三步：理解小程序的目录结构

新建项目后，你会看到几个关键文件：

• app.json：全局配置，比如页面路径、窗口样式
• app.js：小程序启动逻辑
• app.wxss：全局样式
• pages 目录：每个页面一个文件夹，里面通常有四个文件

一个页面一般包含 .wxml（结构）、.wxss（样式）、.js（逻辑）、.json（页面配置）。比如首页就是 pages/index/index。

第四步：写一个最简单的页面

我们做一个显示“你好，小程序”的页面。先看结构文件：

<view class="container">
  <text>{{message}}</text>
  <button bindtap="changeText">点我</button>
</view>

再看逻辑文件：

Page({
  data: {
    message: '你好，小程序'
  },
  changeText() {
    this.setData({
      message: '你点击了按钮'
    })
  }
})

这里有两个关键点：数据绑定用双大括号，更新数据必须用 setData，不能直接改 this.data.message，否则页面不会刷新。

第五步：页面跳转和常用能力

做多个页面时，在 app.json 的 pages 数组里登记路径，然后在页面里用 wx.navigateTo 跳转：

wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

目标页面在 onLoad 里接收参数：

onLoad(options) {
  console.log(options.id)
}

此外，微信还提供了很多现成能力，比如获取用户信息、发起请求、本地存储、扫码、分享等，基本都能通过 wx.xxx 调用。

第六步：调试、预览和上线

代码写得差不多了，可以点开发者工具上的“预览”，用手机微信扫码真机查看。确认没问题后，点“上传”，填写版本号和备注，代码就提交到微信后台了。

接着登录微信公众平台，在“版本管理”里把开发版本提交审核。审核通过后，点击“发布”，你的小程序就能被所有人搜到、使用了。

新手常见坑

• 忘记配置服务器域名：正式环境请求接口，必须在后台配置合法域名，否则请求会失败。
• 直接修改 data：一定要用 setData，这是最容易犯的错。
• 页面路径写错：跳转路径要以 / 开头，并且已经在 app.json 里注册。
• 个人主体做支付：个人小程序无法开通微信支付，涉及交易要提前规划主体类型。

总结

微信小程序怎么做？说白了就是：注册账号拿到 AppID，装好开发者工具，用类似网页的方式写页面，最后上传审核发布。真正动手做一个简单页面，半天就能跑通。别被“开发”吓到，先做出第一个能点的按钮，后面的路自然就清晰了。