Westore

Westore#

资源概述#

Westore 是 腾讯开源的小程序 MVVM 分层架构框架（GitHub 4290 stars / 478 forks），核心解决小程序复杂业务场景下的架构问题。它强制使用面向对象程序设计（OOP），将业务逻辑拆分为三层：

• View（被动视图）：Page/Component，只负责渲染，不含业务逻辑
• Store（中介者）：一个页面一个 Store，桥接 View 和 Model，维护页面状态
• Model（业务核心）：纯 JS 类，100% 平台无关，可跨小程序/小游戏/Web 复用

核心创新：内部使用 deepClone + dataDiff 算法，开发者只需调用 this.update()，框架自动算出最短路径 setData，比手动 setData 更高效且不易出错。

适用场景：

• 中大型小程序项目，业务逻辑复杂
• 需要在小程序/小游戏/Web 之间复用业务模型
• 团队想要强制良好的代码架构（OOP + MVVM）

设计规范#

架构模式（MVP 变体）#

Westore 架构与 MVP(Model-View-Presenter) 相似：

• View 和 Store 双向通讯，互相引用
• View 与 Model 不直接联系，都通过 Store 传递
• Store 引用 Model 实例，Model 不依赖 Store
• View 非常薄（被动视图），不部署业务逻辑
• Model 非常厚，所有逻辑部署在此

Store 规范#

// 一个页面一个 Store
class HomeStore extends Store {
  constructor() {
    super()
    this.data = { count: 0, motto: 'Hello' }
    // 消费 Model（平台无关）
    this.counter = new Counter()
  }
  
  // 同步 Model → ViewModel 并更新视图
  syncCountModel() {
    this.data.count = this.counter.count
    this.update()  // 自动 diff，最短路径 setData
  }
  
  increment() {
    this.counter.increment()  // Model 处理业务
    this.syncCountModel()     // 同步到 View
  }
}

setData 优化原理#

Westore 封装了 setData，开发者只需 this.update()：

1. deepClone 当前 data 快照
2. 修改 data 后调用 update()
3. dataDiff 对比新旧快照，生成最小 diff
4. 调用原生 setData 只传变化部分

审核规范#

Westore 是开源框架，无需平台审核。但需注意：

• 不修改小程序运行时行为：Westore 只是架构层封装，最终调用的是原生 setData
• npm 构建：需在开发者工具中「构建 npm」
• 包体影响：核心库较小，对包体影响可忽略

开发指南#

快速上手#

# 安装
npm i westore --save

// models/counter.js —— 平台无关的 Model
export default class Counter {
  constructor() { this.count = 0 }
  increment() { this.count++ }
  decrement() { this.count-- }
}

// stores/home-store.js —— 页面 Store
import { Store } from 'westore'
import Counter from '../models/counter'

class HomeStore extends Store {
  constructor() {
    super()
    this.data = { count: 0 }
    this.counter = new Counter()
  }
  
  increment() {
    this.counter.increment()
    this.data.count = this.counter.count
    this.update()  // 自动 diff + 最短路径 setData
  }
}

export default new HomeStore()

// pages/home.js —— View（被动视图，极薄）
const store = require('../../stores/home-store')

Page({
  data: store.data,
  onLoad() {
    store.bind(this)  // 绑定页面实例
  },
  handleIncrement() {
    store.increment()
  }
})

常见陷阱#

1. 不要直接 setData：Westore 模式下应使用 store.update()，不要在 Page 中手动 setData
2. Model 必须平台无关：Model 中不能引入 wx.* API，所有平台交互放 Store
3. bind 时机：store.bind(this) 必须在 onLoad 中调用
4. 学习成本：需要理解 OOP 设计和 MVP/MVVM 架构模式，对小程序新手不友好
5. 维护频率低：westore npm 版本仍为 0.1.12，更新不频繁，但核心功能稳定

官方案例#

Westore 提供了三个完整案例：

• 贪吃蛇（Snake Game）：同时支持小程序版 + 小游戏版 + Web 版，Model 100% 复用
• TodoApp：经典待办事项应用，展示三层架构实践
• 基础示例（TS + SCSS）：westore-example-ts，TypeScript 版本

生态资源#

官方资源#

• GitHub：github.com/Tencent/westore
• npm：npmjs.com/package/westore
• 官方示例：westore-example / westore-example-ts

相关项目#

版本更新#

版本历史#

• npm v0.1.12：当前最新版，核心功能稳定
• monorepo 结构：packages/westore（核心）+ packages/westore-example（JS 示例）+ packages/westore-example-ts（TS 示例）

维护状态#

• GitHub 最后 push：2026-05-01（活跃但更新频率低）
• 核心功能已稳定，无需频繁迭代
• 无 license 声明（腾讯开源仓库，使用前建议确认）
• Stars 4290，社区使用广泛