微信小程序开发入门教程：从注册到上线的完整流程

微信小程序这几年越来越火，很多商家和个人开发者都想做一个自己的小程序。但新手往往不知道从哪里下手。这篇文章就用大白话，带你从头到尾走一遍小程序开发的完整流程，看完你就能自己动手做出第一个小程序。

第一步：注册小程序账号

做小程序之前，你得先有个账号。打开微信公众平台官网，点击立即注册，选择小程序类型。如果你是个人开发者，就选个人主体，需要准备一个没注册过公众平台的邮箱、身份证信息和手机号。企业用户则需要营业执照和对公账户等信息。

注册完成后，登录后台，记得去设置里把小程序的名称、头像和简介填好。另外强烈建议把 AppID 记下来，后面开发工具配置要用到它，它就像小程序的身份证号。

光有账号还不能写代码，需要去微信官方下载开发者工具。这个工具是免费的，支持 Windows 和 Mac 系统。下载安装后，用你的微信扫码登录，然后新建一个项目。

新建项目时，把刚才记下的 AppID 填进去。如果你只是想先学习练手，也可以选择测试号，不用注册正式账号就能玩。工具里还提供了一些官方模板，新手可以直接选一个模板生成项目，边看边学，比从零开始容易上手。

打开项目后，你会看到几个核心文件，先别慌，其实不难理解。

pages 文件夹用来存放所有页面，每个页面由四个文件组成：wxml 负责页面结构，类似网页里的 html；wxss 负责样式，就是控制颜色、大小、布局；js 文件负责逻辑，比如点击按钮后做什么；json 文件负责页面的一些配置。

app.js、app.json 和 app.json 这三个文件是全局的，其中 app.json 最重要，你在里面注册了哪个页面路径，小程序才能显示哪个页面。全局窗口样式，比如导航栏颜色、标题文字，也是在这里配置的。

光看概念没用，咱们直接写个小页面。在 pages 文件夹下新建一个页面，比如叫 index。打开 index.wxml，写一行文字加一个按钮，大概长这样：用 view 标签包住一段文字，再加一个 button 标签。

然后在 index.js 里写一个函数，比如点击按钮后弹出一个提示框，或者修改页面上的文字。小程序提供了 wx.showToast 这样的现成接口，一行代码就能实现弹窗效果。

改完样式后，左边模拟器会实时显示效果，你写一句代码就能看到变化，这种即时反馈对新手特别友好。哪一行写错了，控制台还会报错告诉你错在第几行，照着提示改就行。

会用基本页面后，接下来要掌握几个高频组件。轮播图用 swiper 组件，列表展示用 view 配合 wx:for 循环，图片用 image 标签，表单输入用 input。这些组件官方文档里都有示例代码，直接复制过来改一改就能用。

接口方面，最常用的是 wx.request，用来向服务器请求数据。比如你想展示天气信息，就调用天气接口，把返回的数据渲染到页面上。另外还有本地缓存 wx.setStorage、页面跳转 wx.navigateTo 等，都是开发中天天要用的东西。

开发得差不多了，就要真机测试。点击工具上的预览按钮，会生成一个二维码，用你的微信扫一下，就能在手机上看到真实效果。手机上的体验和模拟器有时不一样，务必多测几遍。

确认没问题后，点击上传按钮，把代码上传到微信后台。然后回到公众平台，在版本管理里提交审核。审核一般需要一到两天，个人小程序只要内容合规，通过率还是很高的。审核通过后点击发布，你的小程序就正式上线了，用户搜索名字就能找到。

第一，页面路径一定要在 app.json 里注册，漏了就会报错说页面不存在。第二，域名必须在后台配置合法域名，否则 wx.request 会请求失败，开发阶段可以在工具里勾选不校验域名先调试。第三，包大小有限制，主包不能超过两兆，图片太多记得压缩或者放到服务器上。

总的来说，小程序开发门槛不高，会一点 html、css 和 js 基础就能上手。建议边看官方文档边动手做小项目，比如先做一个个人简历页或者简单的工具类小程序，做完一个完整的作品，基本就入门了。坚持下去，从小项目到大项目，你的开发能力会越来越扎实。