Westore Documentation

Westore implements an MVVM-like architecture (similar to MVP) designed for WeChat Mini Programs to improve maintainability and testability:

• Model: Thick layer containing all business/game logic. Models are platform-independent and can be reused in Web, Canvas, or Games without modification.
• Store: A thin mediator layer that manages the data required by the View and bridges the gap between the View and the Model. It holds the data object used by the View.
• View (Passive View): A very thin layer (Page or Component) that contains no business logic. It only displays data and forwards user inputs (clicks, swipes, etc.) to the Store.

To use Westore in your WeChat Mini Program project, install the core package using npm. Ensure your environment supports npm as per the official WeChat Mini Program documentation.

npm i westore --save

If you encounter the error 没有找到可以构建的 NPM 包... (No NPM package found to build), you need to configure project.config.json to help the developer tools index your npm dependencies correctly.

Set packNpmManually to true and define the packNpmRelationList mapping your package.json to your miniprogram directory.

{
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    }
  ]
}

The update function works identically within WeChat Mini Program Components. You can modify nested properties directly on this.data and call update(this) to trigger the view update.

const { update } = require('westore')

Component({
  data: {
    count: 1
  },
  methods: {
    plus() {
      this.data.count++
      update(this)
    },
    minus(){
      this.data.count--
      update(this)
    }
  }
})

Instead of manually constructing paths for this.setData, you can directly assign values to this.data and then call the update function. This provides a more intuitive programming experience and avoids the overhead of manual path construction.

update(target) takes the Page or Component instance as an argument and synchronizes the changes made to this.data to the view layer.

const { update } = require('westore')

// In a Page or Component
getUserInfo(e) {
  this.data.userInfo = e.detail.userInfo
  this.data.hasUserInfo = true
  update(this)
}

The project.private.config.json file is used to define private project configurations for WeChat Mini Programs. Settings defined here will override the same fields in project.config.json. This file is intended for local project modifications that should not be synchronized to the main configuration.

In the westore-example project, the setting object is used to enable compileHotReLoad.

{
  "projectname": "westore-example",
  "setting": {
    "compileHotReLoad": true
  }
}

The project.config.json file defines the configuration for the WeChat Mini Program project. Key settings include compilation types, library versions, and various feature flags for the runtime environment.

Note: This file is specific to the WeChat Mini Program development environment and controls how the project is compiled, audited, and deployed.

{
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wxfaf6dad43f57c6bd",
  "projectname": "westore-example",
  "setting": {
    "es6": true,
    "enhance": true,
    "postcss": true,
    "minified": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "minifyWXSS": true,
    "minifyWXML": true
  }
}

When working with WeChat Mini Programs, follow these performance guidelines to avoid UI lag and communication overhead between the Logic Layer (JavascriptCore) and the View Layer (WebView):

• Frequency: Do not call setData more than 20 times per second.
• Data Size: Ensure the data being sent (after JSON.stringify) does not exceed 256KB.
• Redundancy: Only include data in setData that is actually used in the template rendering to avoid unnecessary processing.
• Background State: Avoid performing setData operations when the page is in the background.

To create a managed state container in Westore, extend the Store<T> class where T is the interface defining your state shape. You initialize the state in the constructor by assigning an object to this.data. To trigger UI updates in a WeChat Mini Program, call this.update() after modifying state properties.

Key lifecycle and utility methods:

• constructor(): Initialize this.data and set up subscriptions.
• this.update(): Notifies the system to sync the current this.data to the view.
• this.data: The object holding the reactive state.

Note: In the example, this.todo.subscribe() is used to react to changes in an external model and subsequently update the store's data and trigger a view update.

The Store class is the central management unit for Westore. It maintains a collection of views (pages or components) and their associated data. You can bind views to the store to enable centralized state updates.

Binding Views

• Single View Binding: Pass a view object to bind(view). The store will track this view using an internal ID.
• Keyed View Binding: Pass a key and a view object bind(key, view). This allows you to reference specific views later using the provided key.

Updating Views

• Specific View: Call update(viewKey, callback) with the key used during binding to trigger a data update for that specific view.
• Global Update: Call update(callback) without a key to trigger a data update across all registered views in the store.