@mijizhe-opensource/well v0.0.7

well

介绍

小程序敏捷开发库

遇到问题，请提交issues，或者加 QQ 群278574710

软件架构

1. 遵循小程序原生接口，无侵入性。
2. 无外部依赖
3. 支持@mijizhe-opensource/store，实现跨页面、跨组件状态管理
4. 使用 Typescript，JavaScript 亦可用

安装教程

npm i @mijizhe-opensource/well

使用说明

使用well提供的声明Page或者Component，支持数据computed和事件subscribe。

1. 页面调用

// wechat-miniprogram-page.js
import { Page } from "@mijizhe-opensource/well"
Page({
  data: {
    name: "world"
  },
  computed: {
    foo() {
      return `hellow ${this.data.name}`
    }
  }
})

2. 组件调用

// wechat-miniprogram-component.js
import { Component } from "@mijizhe-opensource/well"
Component({
  data: {
    name: "world"
  },
  computed: {
    foo() {
      return `hellow ${this.data.name}`
    }
  }
})

小技巧

有时候，我们需要监听某数据，并在其发生改变时做一些操作，例如修改页面title之类，这时候可利用subscribe方法实现

// wechat-miniprogram-page.js
import { Page, SUBSCRIPTION_TYPE__DATA_UPDATED } from "@mijizhe-opensource/well"
Page({
  // …
  data: {
    // …
    title: "hello world"
    // …
  },
  // …
  computed: {
    // …
    pageTitle() {
      return `动态页面标题: ${this.data.title}`
    }
    // …
  },
  // …
  subscribe: {
    [SUBSCRIPTION_TYPE__DATA_UPDATED]({ key, newValue }, subscription) {
      if (key === "pageTitle") {
        wx.setNavigationBarTitle({ title: newValue })
      }
    }
  },
  // …
})

API

此处以view代替Page Component实例

• view.__well__.dataGotten(object: object, key: string): void
• view.__well__.dataUpdated(object: object, key: string, newValue: unknown, oldValue: unknown): void

AD

• 很多业务场景下，我们需要状态管理库，以实现跨页面、跨组件数据更新，本库支持任何第三方状态管理库，只需通过对应的API即可实现。
• 本库默认支持@mijizhe-opensource/store状态管理库，使用方法如下：

1. 声明store教程
2. 小程序中调用

// app.js
import { useStore } from "@mijizhe-opensource/well"
import store from "./store"
// …
  onLaunch(options) {
    // …
    useStore(store)
    // …
  }
// …


// wechat-miniprogram-page.js
import { Page } from "@mijizhe-opensource/well"
import store from "./store"
Page({
  data: {
    name: "world"
  },
  computed: {
    bar() {
      return `hellow ${this.data.name} ${store.state.foo}`
    }
  }
})