打开微信开发者工具，小程序简新建一个页面，单页你会看到四个文件：index.wxml、面示index.wxss、小程序简index.js、单页index.json。面示这四个文件各管一摊事，小程序简谁也别越界。单页我见过不少新手把样式写进wxml里，面示或者试图在wxss里绑定数据——工具不会拦你，小程序简但代码会乱成一锅粥。单页

先看wxml。面示它就是小程序简骨架，跟HTML长得像，单页但标签名换成了view、面示text、image这些。比如你想放个按钮，写<button>点我</button>，完事。别想着用div、span，小程序不认。我习惯把页面结构拆成几块：头部一个view，中间内容一个view，底部操作区一个view。层级别太深，三层以内最好，太深了调试时自己都找不着北。

wxss负责长相。它基本就是CSS，但多了个rpx单位。设计稿宽度750px，那1rpx就是1px，省得你算rem算到头疼。我常给页面根节点加个padding: 20rpx，内容就不会贴着屏幕边。颜色别用太花，主色一个，辅色一个，灰色系两三个，够了。字号的话，正文28rpx到32rpx之间，标题40rpx往上。太小了在手机上看着费劲，太大了又像老年机。

js管逻辑。Page({ })里放data、生命周期函数和事件处理。data里存页面要用的变量，比如title、list、loading。onLoad在页面加载时触发，适合发请求拿数据。onReady在渲染完成后触发，想操作节点就放这儿。我一般把请求封装成独立函数，onLoad里调一下，成功回调里setData。setData别一次性塞太多数据，也别频繁调，性能会抖。见过有人循环里setData一百次，页面直接卡成幻灯片。

json是配置文件。每个页面都有个json，能设导航栏标题、背景色、是否允许下拉刷新。比如{ "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#ffffff"}。全局的json在app.json里，管所有页面的默认样式和页面路径注册。新页面建好了，记得去app.json的pages数组里加一行，不然跳转报错。

举个具体例子。做个简单的商品卡片列表。wxml里用wx:for循环渲染数组，每个卡片是个view，里面套image和text。wxss给卡片加圆角、阴影、内边距，图片固定宽高，文字超出两行省略。js里onLoad发请求拿数据，data里list初始为空数组，请求回来setData({ list: res.data})。json设个标题“商品列表”。跑起来，十个卡片整整齐齐排着，手指一滑还能滚。就这么点东西，够用了。

有个坑得提一下。image标签默认宽度300px、高度225px，你不设宽高，图片就按这个尺寸来，跟设计稿对不上。要么在wxss里写死宽高，要么用mode="widthFix"让高度自适应。还有text标签里的换行，得用\n，直接敲回车不生效。这些细节，文档里都写着，但第一次碰准得踩。

调试的时候，真机预览比模拟器靠谱。模拟器上看着好好的，真机上字体可能偏大，间距可能不对。开发者工具右下角有个“预览”，扫码就能在手机上跑。改完代码，工具会自动热重载，手机上刷新一下就看到效果。我习惯改一点就看一眼，别攒一堆改动再调，出了问题都不知道是哪行惹的。

页面简单不简单，看你怎么定义。功能少不代表代码糙。结构清晰、命名规范、样式克制，后期加功能才不遭罪。我见过一个页面wxml写了八百行，找某个view得靠搜索。也见过一个页面就三个文件，每个文件五十行，改起来两分钟搞定。差别不在功能多少，在写的人有没有想清楚。