Создание глобального хранилища объектов с использованием diff для обновления

// Создание глобального хранилища объектов
let store = new Store("$store", { count: 1024 }, {
  diff: true
});

Система событий жизненного цикла

Жизненный цикл мини-программы Али

Для приложения (App) есть следующие события жизненного цикла: onLaunch, onShow, onHide, onError, onShareAppMessage.

Для страницы (Page) есть следующие события жизненного цикла: onLoad, onShow, onBack, onReady, onHide, onUnload, onTitleClick, onPullDownRefresh, onReachBottom, onShareAppMessage, onOptionMenuClick, onPullIntercept, onTabItemTap, onPageScroll (среди них onBack — это имитация фреймворка).

Для компонента (Component) есть следующие события жизненного цикла: onInit, deriveDataFromProps, didMount, didUpdate, didUnmount, didPropsUpdate (возможно, некоторые события жизненного цикла могут быть связаны с моделью Component2, среди них didPropsUpdate — это имитация фреймворка, позже будет дано описание использования).

Жизненный цикл мини-приложения WeChat

Для приложения (App) есть следующие события жизненного цикла: onLaunch, onShow, onHide, onError, onPageNotFound, onUnhandledRejection, onThemeChange.

Для страницы (Page) есть следующие события жизненного цикла: onLoad, onShow, onBack, onReady, onHide, onUnload, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline, onAddToFavorites, onPageScroll, onResize, onTabItemTap (среди них onBack — это имитация фреймворка).

Для компонента (Component) есть следующие события жизненного цикла: created, attached, ready, moved, detached.

(Если в жизненном цикле есть упущения, приветствуются запросы на выпуск новых версий или PR.)

В рамках этого фреймворка можно отслеживать соответствующие события жизненного цикла через события. С помощью :before и :after можно различать, когда событие запускается до или после обработки логики.

Пример:

import { Store, on } from "miniapp-spore";
// Отслеживание событий

// Формат on(`{тип}.{жизненный цикл}::{до после}`, обработчик)

// Мониторинг запуска события onLoad на странице
on("Page.onLoad:before", function(){
  // this указывает на экземпляр страницы
  console.log('Загрузка страницы перед');
});

// Поддержка синхронных методов
on("Component.didMount:before", async function(){
  // await вызов интерфейса
  // При использовании async необходимо обратить внимание, особенно перед, это повлияет на время запуска жизненного цикла Component.didMount после выполнения асинхронного метода
});

При использовании событий жизненного цикла необходимо учитывать, что они отслеживаются до запуска, поэтому эти события обычно не следует помещать в любой жизненный цикл или отслеживать в жизненном цикле до запуска.

Компонентный атрибут изменения жизненного цикла (только мини-программа Али)

WeChat mini-program имеет наблюдателей, а Ali mini-program не имеет специального механизма обнаружения изменений атрибутов. Поэтому в рамках фреймворка предоставляется событие жизненного цикла didPropsUpdate, которое запускается только при изменении свойств.

Обычно при использовании компонентов для передачи свойств компонентам мы можем использовать событие жизненного цикла didUpdate для определения изменений свойств, но это может быть сложно для сложных структур объектов.

<hello foo="{{foo}}"/>

Component({
  didUpdate(prevProps, prevData) {
    if(prevProps.foo != this.props.foo){
      // foo обновился, если foo является объектом, этот метод не подходит
    }
  },
});

Поэтому этот фреймворк предоставляет новое событие жизненного цикла для обработки изменений свойств. Когда передаваемый атрибут foo.xxx изменяется, запускается событие didPropsUpdate.

Component({
  didPropsUpdate(diff, prevProps) {
    if('foo.xxx' in diff){
      //diff представляет собой разницу между изменениями свойств до и после, если ключ существует, это означает, что соответствующее значение ключа изменилось
    }
  },
});

Наблюдатель за изменениями атрибутов компонентов (только мини-приложение Али)

Используя didPropsUpdate, вы можете обрабатывать изменения свойств, или вы можете отслеживать конкретные пути значений с помощью определения наблюдателей.

Component({
  watchProps: {
    'foo.a.b': function(diff, prevProps){
      //foo.a.b изменилось
    },
    'foo.cc': function(diff, prevProps){
      //foo.cc изменилось
    }
  },
});

// Примечание: здесь нельзя использовать стрелочные функции, иначе this будет указывать на объект watchProps

Страница/компонент asyncSetData

На странице или компоненте вы также можете напрямую использовать метод asyncSetData вместо текущего setData страницы/компонента. Использование аналогично asyncSetData в Store.

Механизм плагинов

Используйте плагин, загружая его с помощью метода use, и вы можете гибко добавлять функции в свой проект.

import { Store, use } from "miniapp-spore";

import reduxPlugin from "./redux.plugin.js";

use(reduxPlugin);

Структура плагина следующая:

//redux.plugin.js
export default function(spore, options){

  //Определение логики в закрытии

  return {
    install(){
      //Вход установки

      //Можно гибко использовать систему событий жизненного цикла для обработки соответствующей логики
    }
  }
}

Пример

• Глобальное изменение count (базовый пример использования)
• todolist
• WeChat demo

Если у вас есть хорошие предложения, пожалуйста, отправьте их через issue для обсуждения 🥰