小程序开发入门教程：从零基础到上线第一个项目

去年帮朋友做了个小程序商城，从注册账号到审核通过一共花了11天，中间踩的坑比写代码的时间还多。很多人问我零基础怎么入门小程序开发，其实没有想象中那么难，但也没简单到"三天速成"那个地步。今天就把我实际走过的流程整理出来，能帮你省掉不少弯路。

先搞清楚你到底要做什么类型

小程序不是只有一种。微信小程序、支付宝小程序、抖音小程序，底层语法接近但API不一样。我建议新手直接从微信小程序入手，原因很实在：文档最全，社区问题最多，遇到bug基本都能搜到答案。

开发方式也分两条路。一条是用原生框架手写代码，另一条是用低代码平台拖拽生成。前者学得慢，但以后接私活、做定制项目都靠它；后者上手快，适合只想快速上线一个展示页的商家。我的判断是：如果你打算长期做这行，老老实实学原生，别图省事。

准备工作其实不多：

• 一个没注册过小程序的邮箱（个人也能注册，不用企业资质）
• 微信开发者工具，官网直接下载，Windows和Mac都有
• 基本的HTML、CSS、JavaScript概念，哪怕只是看得懂也行
• 一台内存8G以上的电脑，开发工具挺吃内存的

从注册到跑通第一个页面

打开微信公众平台，选"小程序"注册，按提示填信息。个人主体的话，能开通的功能有限，比如支付就用不了，这点提前想清楚。注册完拿到AppID，这个后面在开发者工具里要填。

下载安装开发者工具后，新建项目，填入AppID。工具会自动生成一个模板，里面有pages文件夹、app.json、app.wxss这几个核心文件。别急着删，先把模板跑起来看看效果，点一下"编译"，模拟器里就能看到页面。

小程序的结构说白了就是"页面 + 配置"。每个页面由四个文件组成：.wxml写结构（类似HTML），.wxss写样式（类似CSS），.js写逻辑，.json写这个页面的配置。我当初最懵的是数据绑定，后来才明白，只要在js里用setData把数据丢过去，页面上用双大括号接住就行。举个例子，js里写this.setData({ name:'张三'})，wxml里写{ { name}}，页面就显示"张三"。

有个细节新手常踩：小程序里的图片路径不能用本地绝对路径，网络图片还得在后台配置合法域名。我第一次上线时图片全挂了，就是因为忘了配这个。

我踩过的几个坑，你最好避开

第一个坑是布局。小程序用的是flex布局，传统的float那套基本不好使。刚开始我照着网页教程写，结果页面全乱。后来逼着自己把flex吃透，反而觉得比以前简单。

第二个坑是调试。微信开发者工具自带的真机调试功能一定要用，模拟器里看着好好的，真机上字体、间距可能完全不一样。我做的那个商城，模拟器里按钮位置完美，真机上被底部安全区盖住一半。

第三个坑是审核。小程序提交审核前，务必检查有没有违规内容、有没有诱导分享的文案。我朋友的小程序因为首页放了"分享给好友领红包"，被打回来改了三次才过。

学习资源方面，官方文档永远是第一选择，虽然写得有点干，但准确。视频教程可以看B站上那些完整的实战项目，跟着敲一遍比看十个理论视频有用。至于报班，我觉得看个人预算，几千块的课和免费文档的差距没有宣传的那么大。

最后说句实在话，小程序开发入门最快的方式就是动手做一个真东西。哪怕只是个人名片页、记账工具这种小玩意，从注册到上线完整走一遍，比看再多教程都强。第一次做可能会磕磕绊绊，但第二遍你会发现顺得不得了。