Структура проекта, жизненный цикл и комплектация

Томас Штайнер

Структура проекта мини-приложения

Как и прежде, с языками разметки, языками стилей и компонентами; В структуре проекта мини-приложения также различаются такие детали, как расширения файлов или имена по умолчанию. Однако общая идея одинакова для всех поставщиков суперприложений. Структура проекта всегда состоит из:

  • Корневой файл app.js , который инициализирует мини-приложение.
  • Файл конфигурации app.json , который примерно соответствует манифесту веб-приложения .
  • Необязательный общий файл таблицы стилей app.css с общими стилями по умолчанию.
  • Файл project.config.json , содержащий информацию о сборке.

Все страницы хранятся в отдельных подпапках в папке pages . Вложенная папка каждой страницы содержит файл CSS, файл JS, файл HTML и дополнительный файл конфигурации JSON. Все файлы должны называться так же, как и папка, в которой они находятся, за исключением расширений файлов. Таким образом, мини-приложению просто нужен указатель на каталог в файле app.json (файле, похожем на манифест), и оно может динамически находить все подресурсы. Таким образом, с точки зрения веб-разработчика мини-приложения представляют собой многостраничные приложения.

├── app.js               # Initialization logic
├── app.json             # Common configuration
├── app.css              # Common style sheet
├── project.config.json  # Project configuration
└── pages                # List of pages
   ├── index               # Home page
   │   ├── index.css         # Page style sheet
   │   ├── index.js          # Page logic
   │   ├── index.json        # Page configuration
   │   └── index.html        # Page markup
   └── other               # Other page
       ├── other.css         # Page style sheet
       ├── other.js          # Page logic
       ├── other.json        # Page configuration
       └── other.html        # Page markup

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

Мини-приложение необходимо зарегистрировать в суперприложении, вызвав глобально определенный метод App() . Ссылаясь на описанную выше структуру проекта, это происходит в app.js Жизненный цикл мини-приложения по существу состоит из четырех событий: launch , show , hide и error . Обработчики этих событий можно передать методу App() в форме объекта конфигурации, который также может содержать свойство globalData , содержащее данные, которые должны быть глобально доступны на всех страницах.

/* app.js */
App({
  onLaunch(options) {
    // Do something when the app is launched initially.
  },
  onShow(options) {
    // Do something when the app is shown.
  },
  onHide() {
    // Do something when the app is hidden.
  },
  onError(msg) {
    console.log(msg);
  },
  globalData: "I am global data",
});

Как обычно, отдельные детали различаются, но концепция одинакова для WeChat , Alipay , Baidu , ByteDance , а также Quick App .

Жизненный цикл страницы

Подобно жизненному циклу приложения, жизненный цикл страницы также имеет события жизненного цикла, которые разработчик может отслеживать и реагировать на них. Этими основными событиями являются load , show , ready , hide и unload . Некоторые платформы предлагают дополнительные события, такие как pulldownrefresh . Настройка обработчиков событий происходит в методе Page() , который определен для каждой страницы. Для index или other страниц из структуры проекта до этого это произойдет в index.js other.js соответственно.

/* index.js */
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do something when the page is initially loaded.
  },
  onShow: function () {
    // Do something when the page is shown.
  },
  onReady: function () {
    // Do something when the page is ready.
  },
  onHide: function () {
    // Do something when the page is hidden.
  },
  onUnload: function () {
    // Do something when the page is closed.
  },
  onPullDownRefresh: function () {
    // Do something when the user pulls down to refresh.
  },
  onReachBottom: function () {
    // Do something when the user scrolls to the bottom.
  },
  onShareAppMessage: function () {
    // Do something when the user shares the page.
  },
  onPageScroll: function () {
    // Do something when the user scrolls the page.
  },
  onResize: function () {
    // Do something when the user resizes the page.
  },
  onTabItemTap(item) {
    // Do something when the user taps the page's tab.
  },
  customData: {
    foo: "bar",
  },
});

Процесс сборки

Процесс сборки мини-приложений абстрагирован от разработчика. Под капотом он использует отраслевые инструменты, такие как компилятор Babel для транспиляции и минимизации, а также преобразователь CSS postcss . Опыт сборки сравним с Next.js или create-react-app , где разработчики, если они явно решили не делать этого, никогда не трогают параметры сборки. Полученные обработанные файлы наконец подписываются, шифруются и упаковываются в один или несколько (под)пакетов, которые затем загружаются на серверы поставщиков суперприложений. Подпакеты предназначены для отложенной загрузки, поэтому мини-приложение не нужно загружать все сразу. Детали упаковки должны быть конфиденциальными и не документированы, но некоторые форматы пакетов, такие как формат wxapkg WeChat, были перепроектированы .

Благодарности

Рецензии на эту статью написали Джо Медли , Кейси Баскис , Милица Михайлия , Алан Кент и Кейт Гу.