Структура проекта мини-приложения
Как и прежде, с языками разметки, языками стилей и компонентами; В структуре проекта мини-приложения также различаются такие детали, как расширения файлов или имена по умолчанию. Однако общая идея одинакова для всех поставщиков суперприложений. Структура проекта всегда состоит из:
- Корневой файл
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, были перепроектированы .
Благодарности
Рецензии на эту статью написали Джо Медли , Кейси Баскис , Милица Михайлия , Алан Кент и Кейт Гу.