微信小程序开发文档，手把手教你从零搭建项目

好，咱们直接聊微信小程序。你打开微信，每天用的那些小程序，从点外卖到查公交，背后都是代码堆出来的。很多人觉得这玩意儿高深，其实没那么玄乎。今天这篇开发文档，我就手把手带你从零开始搭个项目，不扯那些虚头巴脑的概念，就讲实际操作。你只要有个电脑，装了微信开发者工具，剩下的事儿都简单。

先说第一步，注册账号和创建项目。你上微信公众平台，用邮箱注册一个小程序账号，选“个人”或者“企业”，个人号功能少点，但够你练手。注册完登录，在“开发”菜单里找到“开发设置”，复制AppID，这玩意儿是你的小程序身份证。然后打开微信开发者工具，点“新建项目”，填上项目名称、目录，把AppID贴进去，选“不使用云服务”，直接点确定。看到编辑器界面弹出来，项目骨架就有了。别慌，那些密密麻麻的文件夹，其实就几个关键东西：pages放页面代码，app开头的文件管全局配置，utils放工具函数。你随便点开一个文件看看，就是些HTML、CSS和JS的变种，学名WXML、WXSS和JS，但本质没变。

接下来你得懂点基础结构。小程序里，每个页面都是一个文件夹，里面至少四个文件：.wxml管结构，类似HTML；.wxss管样式，类似CSS；.js管逻辑，类似JavaScript；.json管配置。你打开pages/index目录，看看index.wxml，里面有个标签，写着“Hello World”。你把它改成“今天天气不错”，保存，左侧模拟器里就变了。这就是小程序的工作方式：你写代码，工具实时渲染。然后打开index.js，找到data对象，里面有个text属性，你改成“你好，世界”，再回到.wxml里写个标签，绑定{{text}}，保存后模拟器就显示你改的内容。这一步让你明白，数据驱动视图，不是手动改页面，而是改数据，页面自动跟着变。

光改文字没意思，你得动手搭个真实页面。比如做个简单的待办事项列表。先新建一个文件夹叫todo，在pages目录下，右键新建页面，工具会自动生成四个文件。然后在app.json的pages数组里加上“pages/todo”，保存后底部导航栏就多了个入口。接着打开todo.wxml，写个输入框和按钮： 添加。这俩绑定事件，一个监听输入，一个触发添加。然后去todo.js里写逻辑：先定义data，有个list数组和一个inputValue变量；再写handleInput，用e.detail.value获取输入内容，赋值给inputValue；再写addTodo，把inputValue push到list里，然后清空输入框。保存后，你在模拟器输入文字点添加，列表就出来了。这一步的核心是理解事件绑定和数据更新，这是小程序交互的基础。

数据管理清楚了，再聊聊样式。小程序用WXSS，写法跟CSS几乎一样，但多了个rpx单位。rpx是自适应单位，不管屏幕多大，都是750rpx满屏，所以你写375rpx就是屏幕一半宽。比如你想让列表项好看点，打开todo.wxss，写.list-item {padding: 20rpx; border-bottom: 1rpx solid #eee; font-size: 28rpx;}。然后回到.wxml，给每个列表项加个class="list-item"。保存后，列表项之间有了间距和分割线，看起来舒服多了。还有个坑：小程序里不能用通配符*，要写全局样式得在app.wxss里写。另外，flex布局是神器，你写display:flex; flex-direction: column; 就能轻松实现垂直排列。别怕样式，多试几次就熟了。

光有列表还不够，得加点功能。比如点击某个待办事项，标记为已完成。在todo.wxml里，列表项改成 {{item.text}} 。然后在.wxss里加个.done {text-decoration: line-through; color: #ccc;}。在todo.js里写toggleDone函数：获取当前点击项的index，用this.data.list[index].done取反，再用this.setData更新list。注意，小程序里修改data必须用setData，直接改this.data.list是不会触发视图更新的。这一步你学会了列表渲染和条件样式，这是前端开发的基础操作。

数据持久化也很关键。你辛辛苦苦列了待办，关掉小程序就没了，多憋屈。小程序提供了wx.setStorageSync和wx.getStorageSync，用法简单：在addTodo函数末尾加wx.setStorageSync('todoList', this.data.list)；在页面加载时，onLoad函数里加const list = wx.getStorageSync('todoList') || []；再this.setData({list})。这样每次添加或删除，数据都存到本地缓存里，下次打开还在。不过要注意，缓存大小有限，一般够用。如果你想更高级点，可以接入云开发数据库，但那是后话。这一步让你明白，小程序跟用户交互不能靠脑记，得靠存储。

测试和调试是一关。模拟器里跑得挺好，真机上一堆问题，这种事我碰多了。开发者工具左上角有“预览”按钮，点一下生成二维码，手机微信扫一扫就能看到真机效果。注意，真机上字体可能不一样，按钮点击反馈可能延迟，你得逐个检查。还有一个坑：真机上wx.setStorageSync有时会失败，因为用户关闭了存储权限，你得加个try catch。另外，工具里有个“调试器”，点开能看到控制台输出和网络请求，跟浏览器F12一个道理。遇到bug别慌，先看控制台报什么错，再逐行排查。调试多了，你会发现自己写的代码漏洞百出，但这就是进步。

聊聊优化和发布。项目写完了，点工具里的“上传”，填个版本号，提交到微信审核。审核一般几小时到一天，通过后就能正式上线。但别急着发，先想想怎么优化：图片要压缩，接口请求要合并，渲染层不要用太多复杂计算。比如列表数据多的时候，用wx:key指定唯一标识，能提升渲染性能。还有，小程序包大小有限制，超过2M就得用分包加载，把不常用的页面拆成子包。这些优化点不是必须的，但能让用户体验好很多。你从零搭建一个项目，从注册到上线，每一步都自己动手，这个过程比看一百篇教程都管用。记住，写代码没有捷径，多踩坑多改，你就是在进步。