AI全栈实战 | 2.5-01 小程序与跨端：双线程为什么禁止操作 DOM，uni-app/Taro 怎么选

上篇回顾2.4-02 把 Vite 与 Webpack 从「构建工具解决什么问题」到「Vite 为什么快」一次讲透。本篇是前端章节最后一篇——小程序。小程序是国内特色生态微信/支付宝/抖音各有自己的小程序。本篇讲透小程序的双线程模型、跨端方案选型、高频实战。一、开篇小程序为什么不是 H5后端工程师第一次看小程序代码会觉得「这不就是 HTML/CSS/JS 换了个名字吗」!-- WXML类 HTML --viewclasscontainertext{{message}}/textbuttonbindtaponTap点击/button/view/* WXSS类 CSS */.container{padding:20rpx;}// JSPage({data:{message:Hello},onTap(){this.setData({message:Clicked});}});但小程序不是 H5。最根本的区别小程序跑在双线程模型里不能直接操作 DOM。二、双线程模型渲染层与逻辑层分离2.1 架构图┌─────────────────┐ ┌─────────────────┐ │ 渲染层WebView │ │ 逻辑层JsCore │ │ │ │ │ │ WXML → 渲染 │ ←→ │ JS 业务逻辑 │ │ WXSS → 样式 │ 数据 │ setData 触发更新 │ │ │ 通信 │ │ └─────────────────┘ └─────────────────┘ ↑ ↑ └─────── 微信原生 ───────┘渲染层多个 WebView 实例每个页面一个负责 UI 渲染逻辑层单个 JsCore 实例iOS或 V8Android跑 JS 逻辑两者通过微信原生的 JSBridge 通信2.2 为什么禁止直接操作 DOM原因一安全。如果 JS 能操作 DOM就能注入恶意代码修改页面。双线程隔离后JS 只能通过setData传递数据不能直接改 UI。原因二一致性。不同平台iOS/Android/PC的 WebView 实现不一致。禁止操作 DOM 后渲染完全由原生控制保证多端一致。原因三性能。直接操作 DOM 会触发不可控的重排重绘。setData是批量数据传递框架可以做最小化更新。2.3 setData 的代价// 每次 setData 都要从逻辑层发送数据到渲染层this.setData({message:new});// 跨线程通信// 不要频繁 setDatafor(leti0;i100;i){this.setData({count:i});// 100 次跨线程通信极慢}// 正确合并一次this.setData({count:99});setData 的性能陷阱数据要序列化JSON再传输数据量大时传输慢频繁 setData 导致通信阻塞2.4 牺牲了什么换来了什么牺牲了换来了直接操作 DOM 的能力安全性实时 UI 操作动画多端一致性复杂交互性能性能可控框架优化三、原生小程序 vs 跨端方案3.1 原生开发每个平台用自己的语法微信 WXML/WXSS/JS、支付宝 AXML/ACSS、抖音 TTML/TTSS。优点性能最好、能力最全。缺点一套代码只能跑一个平台。3.2 跨端方案方案思路代表uni-appVue 语法 → 编译到各端DCloud 出品TaroReact 语法 → 编译到各端京东出品mpvueVue 语法 → 微信小程序已停更3.3 uni-app vs Taro维度uni-appTaro语法Vue3React/Vue3生态国内最大、插件市场丰富京东出品、React 生态跨端覆盖微信/支付宝/抖音/H5/App微信/支付宝/抖音/H5/RN学习曲线低Vue 用户友好中React 用户友好文档中文完善中文完善选型建议Vue 用户 国内项目 → uni-appReact 用户 多端需求 → Taro只做微信小程序 追求极致性能 → 原生四、vant-weapp 组件库接入// app.json{usingComponents:{van-button:vant/weapp/button/index,van-cell:vant/weapp/cell/index,van-field:vant/weapp/field/index}}!-- 页面 WXML --van-buttontypeprimarybindtaponSubmit提交/van-buttonvan-fieldvalue{{form.name}}bind:changeonNameChangelabel姓名/五、高频实战5.1 授权登录Page({asynclogin(){// 1. 获取 codeconst{code}awaitwx.login();// 2. 发送到后端换 openid/session_keyconstresawaitwx.request({url:https://api.example.com/auth/wx-login,method:POST,data:{code}});// 3. 保存 tokenwx.setStorageSync(token,res.data.token);}});注意wx.getUserProfile已废弃新版本用wx.getUserInfo或引导用户手动填写。5.2 分包加载// app.json{pages:[pages/index/index],subPackages:[{root:packageA,pages:[pages/detail/detail]}]}主包 2MB分包 2MB总包 20MB。大功能放分包按需加载。5.3 网络请求封装// utils/request.jsconstBASE_URLhttps://api.example.com;functionrequest(options){returnnewPromise((resolve,reject){wx.request({url:BASE_URLoptions.url,method:options.method||GET,data:options.data,header:{Authorization:wx.getStorageSync(token)||,Content-Type:application/json},success:(res){if(res.data.code401){wx.redirectTo({url:/pages/login/login});reject(newError(未授权));return;}resolve(res.data);},fail:reject});});}exportdefaultrequest;六、小程序 vs H5 vs App维度小程序H5App开发成本低低高性能中低高体验接近原生一般原生分发微信生态URL 分享应用商店审核需要不需要严格推送订阅消息浏览器推送系统推送七、小程序的代码为什么相对好逆小程序的 JS 逻辑打包后存在本地反编译工具如 unwx能还原出源码。原因小程序包下载到本地文件可提取JS 没有强混淆不像 App 有 native 保护WX 编译器做的转换有限平台方的真实预期小程序的安全重点在「服务端数据」而非「客户端代码」。客户端代码被看到影响不大——真正的数据保护在后端 API 鉴权。八、小结表概念要点双线程渲染层 WebView 逻辑层 JsCoresetData跨线程通信要合并减少频率跨端方案uni-appVue/ TaroReact授权登录wx.login → 后端换 token分包主包 2MB按需加载