编辑说明：本文为公司发展历程回顾系列内容，基于团队2019年小程序技术实践整理，2026年7月修订发布。文中技术描述基于当时小程序框架版本，核心原理至今适用，供参考。
小程序的技术架构：双线程是个什么玩意儿
我们团队2018年入行小程序开发，到2019年已积累了一年多的项目实战，踩的坑不算少。这篇文章把小程序的技术架构和开发流程梳理一遍，算是给自己做个笔记，也希望能帮到刚入行的同行。
先说架构。小程序跟传统网页有个很大的区别——它用的是双线程模型。
啥意思呢？简单讲，传统网页里HTML、CSS、JavaScript都跑在同一个WebView里面。但小程序不一样，它把逻辑层和视图层分开了：
视图层（View层）：用WebView渲染，负责页面展示。多个页面可以对应多个WebView实例。
逻辑层（Service层）：跑在JSCore（iOS）或V8（Android）里，负责业务逻辑和数据处理。
两层之间通过JSBridge通信。你在逻辑层里调用setData，数据会通过桥接传到视图层，触发页面重新渲染。
这么设计有啥好处？主要是逻辑和视图隔离了，页面卡顿不会阻塞逻辑执行，一定程度上提升了流畅度。但也带来了一些限制——比如DOM操作做不了，数据通信有延迟，频繁setData会卡。
这个坑我踩过。刚开始写的时候习惯性地在循环里频繁调用setData，结果页面卡得不行。后来才知道应该把数据合并好一次性传过去：
// 错误写法：频繁setData
this.data.list.forEach((item, index) => {
this.setData({
[`list[${index}].status`]: 'done'
});
});
// 正确写法：合并后一次性更新
const newList = this.data.list.map(item => ({
...item,
status: 'done'
}));
this.setData({ list: newList });WXML、WXSS、JS各自干啥
小程序的页面由四种文件组成：.wxml、.wxss、.js、.json。
WXML就是小程序的模板语言，类似HTML但有自己的组件和指令。wx:if做条件渲染，wx:for做列表循环，{{}}做数据绑定。如果你写过Vue，上手会很快。
WXSS是样式文件，基本就是CSS，多了个rpx单位。rpx会根据屏幕宽度自动适配——750rpx等于屏幕宽度。所以设计稿如果是750px宽的，1px直接对应1rpx就行，这个挺方便的。
JS处理页面逻辑。Page()里定义生命周期函数和数据，onLoad、onShow、onReady这些是最常用的。
JSON是页面配置，可以设置导航栏标题、是否允许下拉刷新之类的。
跟传统网页比起来，小程序不能操作DOM、不能用window对象、不能引入外部DOM库（比如jQuery那套）。说白了，你以前写网页那套思路得改改。
开发工具
微信官方提供了微信开发者工具，集成了代码编辑、调试、预览、上传等功能。说实话，这个工具的编辑器体验一般，我们团队一般用VSCode写代码，开发者工具只用来调试和预览。
几个常用功能提一下：
模拟器：左边可以模拟不同机型，看页面适配效果。
调试器：类似Chrome DevTools，能看Network请求、Storage、WXML结构这些。
真机调试：扫码就能在手机上调试，这个很重要，模拟器和真机的表现有时候差别挺大的。
有个坑提醒一下：开发者工具的preview和真机上的表现不完全一致，特别是在动画和滚动这块。上线前一定要真机测一遍。
标准开发流程
我们团队现在的开发流程大概是这样的：
第一步：需求分析。跟客户确认功能清单、页面跳转逻辑、接口需求。这个阶段会输出原型图和需求文档。别跳过这步——见过太多项目因为需求没对齐，开发到一半推翻重来的。
第二步：前端开发。根据设计稿切图、写WXML/WXSS，搭页面框架。这阶段可以先用mock数据，不依赖后端接口。
第三步：后端接口开发。小程序的后端跟普通Web后端没啥本质区别，就是提供RESTful API或者GraphQL接口。需要注意的一点是，小程序请求域名必须在小程序后台配置白名单，而且必须是HTTPS。
// 小程序发起网络请求
wx.request({
url: 'https://api.example.com/v1/products',
method: 'GET',
header: {
'content-type': 'application/json'
},
success(res) {
console.log('请求成功', res.data);
},
fail(err) {
console.error('请求失败', err);
}
});第四步：联调测试。前端切换到真实接口，跑通整个流程。这个阶段会暴露各种问题——接口字段对不上、分页逻辑有bug、异常处理没做好……老老实实测吧。
第五步：提交审核上线。在开发者工具里点"上传"，然后去小程序后台提交审核。审核一般1-3个工作日，被拒了就改了重新提交。
几个常见的技术注意事项
包体积限制。小程序主包不能超过2MB，总包（主包+分包）不能超过20MB。项目大了就得用分包加载，把不同功能的代码拆开。这个在架构设计阶段就要考虑好，后期拆包挺麻烦的。
接口请求频率限制。微信对wx.request有并发限制，同时发起的请求数不能超过10个。如果页面一加载就要请求很多接口，可以考虑合并接口或者做请求队列。
兼容性问题。不同微信版本、不同操作系统（iOS/Android）的表现可能有差异。特别是CSS方面，有些属性在低版本微信里不支持。建议在app.json里配置好基础库版本要求，开发时多在真机上测。
setData性能。前面提过了，setData是跨线程通信，数据量大或者调用频繁都会影响性能。只传需要变化的数据，不要整个对象都丢过去。
大概就是这些。小程序开发本身不算难，但细节挺多的，很多问题只有踩过坑才知道。希望这篇对刚入门的同学有点帮助。