从零搭建开发环境到项目初始化：把“工具箱”备齐
开发小程序就像做饭，得先把锅碗瓢盆准备好。用uniapp开发微信小程序，最核心的“工具”有两个：HBuilderX（uniapp的官方开发工具）和微信开发者工具（微信官方的调试工具）。这俩少一个都不行，我之前帮朋友排查问题时，发现他就是漏装了微信开发者工具，导致写完代码没法预览，白折腾了两天。
先把“厨房”搭起来：工具安装和账号准备
先说HBuilderX，这玩意儿是uniapp的“专属编辑器”，官网（https://www.dcloud.io/hbuilderx.htmlnofollow）就能下载，记得选“App开发版”，别下成“标准版”了——标准版少了很多移动端开发的插件，后面打包会很麻烦。安装的时候一路默认下一步就行，不过 把“添加到桌面快捷方式”和“关联.vue文件”这两个选项勾上，后面打开项目会方便很多。
然后是微信开发者工具，这个得去微信公众平台（https://mp.weixin.qq.com/nofollow）下载。但下载之前，你得先注册一个微信小程序账号——没账号的话，连AppID都拿不到，最后小程序没法上线。注册很简单，用个人微信扫码登录公众平台，选择“小程序”类型，按提示填信息就行（个人账号也能注册，只是部分功能有限制，比如不能用支付接口，但开发和发布基础功能完全够用）。注册完在“开发管理-开发设置”里能找到AppID，先复制保存好，后面要用。
这里插一句，很多新手会忽略Node.js的安装，但其实HBuilderX的某些插件（比如sass编译）依赖Node.js环境。我 你顺便装个Node.js，官网（https://nodejs.org/nofollow）选LTS版本，安装时勾选“Add to PATH”，这样命令行就能直接用node命令了。装完可以在cmd里输node -v，能显示版本号就说明装好了。
开始“洗菜切菜”：创建uniapp项目并配置
工具和账号都准备好，就可以创建项目了。打开HBuilderX，点顶部菜单栏“文件-新建-项目”，选择“uniapp”，填个项目名称（比如“my-first-miniprogram”），模板选“默认模板”（新手别选那些带太多插件的模板，容易混乱），然后勾选“微信小程序”作为运行平台。这里有个关键点：项目路径别用中文！我之前帮一个客户调试时，他把项目建在“我的文档/小程序开发”文件夹里，结果编译时报错“路径包含非法字符”，折腾半天才发现是中文路径的锅。
项目创建好后，先别急着写代码，得先配置AppID。在项目根目录找到“manifest.json”文件，点进去切换到“微信小程序配置”选项卡，把之前在公众平台复制的AppID填进去。为什么要填AppID？因为没填的话，微信开发者工具只能用“测试号”预览，很多功能（比如获取用户信息、调用支付）会受限，而且正式发布时必须用自己的AppID。
接下来配置一下项目的基础信息，比如小程序名称、图标、启动页。这些也在manifest.json里，“基础配置”里填小程序名称和描述，“图标配置”上传1024×1024的logo（微信要求的尺寸，用美图秀秀缩一下就行），启动页可以选默认的，后期再自定义。这里提醒一句：图标别用太复杂的图案，小程序图标在手机上显示时很小，简单清晰的设计用户更容易记住。
编码调试到上线发布：手把手带你“做出第一道菜”
环境搭好了，就该动手写代码了。uniapp用的是Vue语法，如果你学过Vue会很顺手；没学过也没关系，它的语法很简单，比如{{message}}就是显示变量，v-for就是循环列表，跟写网页差不多。我去年教那个奶茶店老板时，他连HTML都不太熟，照样用uniapp做了个展示菜单的小程序，所以你完全不用怕。
写代码就像“炒菜”：从页面结构到功能实现
先看项目目录，最核心的是“pages”文件夹，这里放的是小程序的页面。默认模板里有个“index”页面，打开“pages/index/index.vue”，就能看到一个页面的完整结构：里写HTML结构，里写JavaScript逻辑，里写样式。比如你想在首页放个“欢迎光临”的标题，就在里加个欢迎光临，然后在里写.title { font-size: 20px; text-align: center; margin-top: 20px; }，保存后就能看到效果了。
如果要加新页面，比如“菜单页”，不用手动建文件夹，直接在“pages.json”里配置。找到“pages”数组，在后面加一句{"path": "pages/menu/menu", "style": { "navigationBarTitleText": "菜单" }}，保存后HBuilderX会自动帮你创建对应的文件夹和文件——这个小技巧能省不少事，我以前手动建文件夹还经常拼错文件名，导致页面打不开。
组件和API是小程序的“调味料”，能让功能更丰富。uniapp自带了很多组件，比如按钮、图片、轮播图，直接用就行。比如想加个轮播图展示奶茶图片，就用组件：
这里要注意，图片最好放在“static”文件夹里，而且尺寸别太大（ 单张不超过500KB），不然小程序加载会很慢。我之前帮朋友传了张2MB的图片，结果预览时卡在白屏，查了半天才发现是图片太大导致的。
调用微信的API也很简单，比如获取用户信息，uniapp把微信的API封装成了uni.getUserProfile()方法，直接在按钮的点击事件里写：
methods: {
getUserInfo() {
uni.getUserProfile({
desc: '用于完善会员资料',
success: (res) => {
console.log(res.userInfo);
}
})
}
}
不过要注意，微信对用户信息获取有严格限制，必须用户主动点击按钮才能触发，所以这个方法一定要写在点击事件里，直接在onLoad里调用会报错——我第一次用的时候就踩过这个坑，以为代码写错了，后来查微信开发者文档（https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.htmlnofollow）才知道原因。
尝尝咸淡：调试和预览的正确姿势
写完代码一定要调试，不然等到上线才发现问题就晚了。调试有两种方式：模拟器调试和真机调试。模拟器调试很简单，在HBuilderX顶部工具栏点“运行-运行到小程序模拟器-微信开发者工具”，第一次运行会提示你选择微信开发者工具的安装路径，选对后就能自动打开微信开发者工具并加载项目了。
但模拟器调试有局限性，比如手机的触摸事件、网络环境和模拟器不一样，所以真机调试必不可少。在微信开发者工具里，点“预览”按钮，会生成一个二维码，用自己的微信扫码就能在手机上看效果。这里有个小技巧：如果你的小程序需要联网（比如加载远程图片、调用后端接口），要先在微信公众平台“开发管理-开发设置”里配置“服务器域名”，不然真机预览时会提示“不在以下 request 合法域名列表中”——这个问题我帮三个新手排查过，都是忘了配域名导致的。
调试时要多注意控制台的报错信息。微信开发者工具的“控制台”面板会显示详细的错误，比如“未定义的变量”“组件路径错误”等。我习惯边写代码边按Ctrl+S保存，保存后HBuilderX会自动编译，微信开发者工具也会实时刷新，发现报错就马上改，别等代码堆多了再调试，那样找问题会很麻烦。
装盘上桌：打包上线和审核注意事项
代码没问题了，就可以打包上线了。在HBuilderX里点“发行-小程序-微信小程序”，会弹出打包配置窗口，勾选“压缩代码”（能减小包体积），然后点“发行”，HBuilderX会自动编译并打开微信开发者工具的“上传”界面。在这里填版本号（比如1.0.0）和更新说明（比如“初始版本，包含首页和菜单页”），然后点“上传”。
上传成功后，去微信公众平台“版本管理”里能看到“开发版”，这时候还不能给用户用，得提交审核。点“提交审核”，按提示填信息：服务类目选你小程序的类型（比如“餐饮-餐饮服务”），如果是个人账号，别选需要资质的类目（比如“电商”需要营业执照），不然审核会被拒。我那个奶茶店朋友第一次选了“餐饮服务”，但没填门店地址，审核被打回，后来补填了地址才通过。
审核一般1-3个工作日，通过后在“版本管理”里点“发布”，就能正式上线了。上线后别急着不管了，记得在“统计分析”里看数据，比如用户访问量、页面停留时间，根据数据优化小程序。比如我朋友的小程序上线后，发现“菜单页”的跳出率很高，后来才发现是图片加载太慢，优化图片尺寸后，停留时间明显变长了。
最后想说，开发小程序就像学做饭，第一次可能手忙脚乱，但跟着步骤多试几次，就会越来越熟练。你不用一开始就追求复杂功能，先做个简单的页面，跑通从开发到上线的全流程，再慢慢添加新功能。如果你按这个流程试了，遇到解决不了的问题，或者有什么优化小技巧，欢迎在评论区告诉我，咱们一起交流进步~
你知道吗，小程序审核被拒，十有八九都是踩了类目和资质的坑。我之前帮一个做健身课程的朋友提交小程序，他明明是卖线上健身视频的，结果选了“电商-服装箱包”类目，审核员直接回复“类目与内容不符”，白等了两天。还有更常见的，个人账号非要选“医疗健康”“金融理财”这种需要特殊资质的类目，微信公众平台早就明确说了，这些类目得有营业执照、行业许可证才能申请，个人账号根本通不过。上次有个做烘焙教程的新手，用个人账号选了“餐饮服务”类目，结果因为没填实体店地址被拒，后来改成“教育-技能培训”类目，啥资质都不用额外提供，第二天就审核过了。
内容违规也是审核被拒的重灾区，尤其是那些你觉得“无所谓”的小细节。比如页面里写“分享到3个群解锁全部课程”，这种诱导分享的文案，微信审核特别敏感，哪怕你改成“分享给好友获得学习资料”也不行，必须完全去掉诱导性质的表述。还有用了没授权的品牌元素，之前见过有人在小程序里放了迪士尼的卡通形象当图标，结果审核直接打回，理由是“涉嫌侵权”。功能不完善更不用多说了，审核员会像普通用户一样点点戳戳——你以为“联系我们”按钮只是个摆设？他们真的会点，要是点击后没反应，或者跳转的页面是空白，100%被拒。我 你提交前自己先当用户用一遍，从首页滑到详情页，每个按钮都点一点，输入框试试能不能打字，支付按钮（如果有的话）模拟点一下看会不会报错，这样能少走很多弯路。
为什么开发微信小程序需要同时安装HBuilderX和微信开发者工具？
因为两者功能不同但缺一不可。HBuilderX是uniapp的专属开发工具，负责代码编写、项目管理和跨端打包；而微信开发者工具是微信官方提供的调试环境，支持小程序预览、真机调试、代码上传和审核管理。比如你用HBuilderX写完代码后，需要通过微信开发者工具才能在手机上预览效果，也只有通过它才能把代码提交到微信后台审核，少一个工具整个开发流程就走不通。
个人账号开发微信小程序有哪些功能限制？
个人账号能满足基础开发需求，但部分高级功能会受限。比如不支持微信支付接口（没法接入支付功能）、不能使用地图选点等需要资质的API、小程序名称一年只能修改2次（企业账号可修改5次），且不能认证（认证后才能使用更多权限）。不过如果只是开发展示类、工具类小程序（比如个人博客、简易计算器），个人账号完全够用，等后期需要扩展功能再考虑升级为企业账号。
预览小程序时提示“页面空白”或“加载失败”，可能是什么原因？
常见原因有三个：一是图片或资源路径错误，比如把图片放在非static文件夹里，或路径写了中文（uniapp不支持中文路径）；二是网络请求没配置合法域名，真机预览时如果调用了远程接口，需要在微信公众平台“开发设置”里添加服务器域名，否则会被微信拦截；三是代码有语法错误，比如漏写括号、变量名拼写错误，这时候可以在微信开发者工具的“控制台”面板查看具体报错信息，根据提示修改就行。
小程序提交审核后被拒，常见原因有哪些？
新手最容易踩的坑有这几个：一是类目选错或资质不全，比如做餐饮小程序选了“电商”类目，或需要营业执照的类目用个人账号提交；二是内容违规，比如页面有诱导分享的文案（像“分享到群解锁功能”）、使用了未授权的品牌logo；三是功能不完善，比如点击按钮没反应、页面跳转报错，微信审核会测试核心功能，有bug大概率会被拒。 提交前用真机多测试几遍，确认所有按钮和链接都能正常使用。
用uniapp开发的小程序包体积太大，超过2MB怎么办？
可以从三个方面优化：一是压缩图片，把大于500KB的图片用在线工具（比如tinypng）压缩，或改用网络图片（提前配置合法域名）；二是删除无用代码和插件，uniapp项目里默认有一些示例组件和页面，用不到的及时删掉，插件市场下载的插件只保留必要的；三是启用分包加载，在pages.json里配置subPackages，把非首页的页面分到子包，主包体积就能控制在2MB以内。我之前帮朋友优化时，光压缩图片就把包体积从3.5MB降到了1.8MB，顺利通过审核。
