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

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

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

  • Корневой файл 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, были перепроектированы .

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

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