1. Написание фона
Имея контакт с мини-программами более года, реальный опыт показывает, что порог для разработки мини-программ относительно низок. Тем не менее, разработчики всегда жаловались на метод разработки апплета.Например, разработчики, которые привыкли к разработке Vue и React, часто жалуются, что страница апплета должна состоять из нескольких файлов, а поддержка компонентизации не идеальна или не может быть разработан очень счастливо. В предыдущих небольших проектах я особо не чувствовался.От присоединения к Youzan и участия в разработке апплета Youzan Micro Mall я действительно осознал всю сложность разработки масштабных проектов апплетов.
Youzan занимается разработкой небольших программ с момента внутреннего тестирования апплета WeChat.В эпоху отсутствия поддержки пользовательских компонентов можно только разделять модули или внедрять компоненты в виде импорта. На страницах со сложным бизнесом может быть импортировано много модулей, и соответствующий wxss тоже требует стиля импорта.Помимо громоздкой операции, иногда неизбежны промахи.
Как разработчики, мы, безусловно, хотим сделать нашу работу проще и приятнее, и мы хотим улучшить то, как мы разрабатываем. Поэтому я надеюсь узнать больше о структуре апплета WeChat и сократить количество ненужных проб и ошибок, поэтому у меня есть отладочная экскурсия по структуре апплета. (базовая библиотека 1.9.93)
После трех недель свободного времени на отладку можно считать, что я имею некоторое поверхностное представление о структуре апплета и достиг первоначальной цели, имею реальный опыт запуска, экземпляра и работы апплета. В этой статье описана базовая структура кода апплета, процесс запуска и процесс создания экземпляра программы.
Цель этой статьи — поделиться увиденным с читателями, интересующимися небольшими программами или разрабатывающими небольшие программы, в основном отвечая на вопрос «что делает фреймворк с входящими объектами и т. д.».
2. Взгляд на детали структуры апплета из процесса запуска
Используйте метод help() в инструментах разработчика для просмотра некоторых инструкций и методов. Используйте метод openVendor, чтобы открыть инструмент разработчика WeChat в каталоге, где находится структура апплета. К ним относятся каталоги, названные в честь базовой библиотеки, и другие файлы справки, такие как два инструмента wcc, wcsc. wcc может конвертировать wxml в соответствующую функцию JS — $gwx(path, global), wcsc может конвертировать wxss в css. Каталог базовой библиотеки включает файлы WAService.js и WAWebview.js. Фреймворк апплета называется WAService.js в инструментах разработчика (WAWebview.js не знает своей функции, я слышал, что этот файл используется в реальной машинной среде).
Используя document.head в командной строке инструмента во время разработки, вы можете увидеть, что процесс запуска апплета примерно следующий:
1. Инициализируйте глобальные переменные
На следующем рисунке показаны некоторые глобальные переменные, которые инициализируются при запуске апплета:
Переменные, начинающиеся с "__" и не упомянутые в документации, устарели., __wxAppCode__ делится на два типа значений в инструментах разработчика, тип json и тип wxml. Если значение ключа заканчивается на .json, значением ключа является содержимое соответствующего файла json в коде разработчика. Если значение ключа заканчивается на .wxml, значение ключа будет получено вызовом $gwx('./pages/ example/index.wxml'). Исполняемая функция, вызывая эту функцию, вы можете получить дерево JSON, которое идентифицирует отношения узлов.
2. Загрузите фреймворк (WAService.js)
Используйте инструменты для форматирования WAService.js и последующей отладки. Можно обнаружить, что структура апплета примерно состоит из:WeixinJSBridge,NativeBuffer,wxConsole,WeixinWorker,JavaScript 兼容(это догадки),Reporter,wx,exparser,__virtualDOM__,__appServiceEngine__состоит из нескольких частей.
из них кромеwxа такжеWeixinJSBridgeЭти две основные коллекции API,exparser, __virtualDOM__, __appServiceEngine__Эти три части служат ядром каркаса,__appServiceEngine__Предоставляет самые основные интерфейсы фреймворка, такие как приложение, страница, компонент;exparserПредоставляет возможности в нижней части платформы, такие как создание экземпляров компонентов, мониторинг изменений данных и взаимодействие между уровнем представления и уровнем логики; а также__virtualDOM__связь__appServiceEngine__а такжеexparserРоль , такая как форматирование объекта, переданного разработчиком методу Page, и последующая передача его соответствующему методу анализатора для обработки.
Платформа предоставляет следующие API: Behavior, App, Page, Component, getApp, getCurrentPages, definePlugin, requirePlugin, wx.
3. Загрузка бизнес-кода
В апплете код JavaScript разработчика упакован как
define('xxx.js', function(require, module, exports, window, document, frames, self, location, navigator, localStorage, history, Caches, screen, alert, confirm, prompt, fetch, XMLHttpRequest, WebSocket, webkit, WeixinJSCore, Reporter, print, WeixinJSBridge) {
'use strict';
// your code
})
Определить здесь — это метод, определенный в инфраструктуре, а в инфраструктуре предусмотрено два метода: require и define для определения и использования бизнес-кода. Этот способ чем-то похож на интерфейс спецификации AMD, определяющий модуль по определению и использующий требование для применения модуля. Но есть и большая разница: во-первых, define ограничивает другие модули, которые может использовать модуль, такие как window и document, во-вторых, при использовании модуля require передает только в require и module, то есть другие модули в параметрах находятся в определенном модуле.не определено, из-за чего некоторые объекты среды браузера не могут быть получены в инструментах разработчика.
В апплете способ загрузки JavaScript-кода также несколько отличается от такового в браузере: сначала загружаются другие js-файлы в проекте (незарегистрированные программы и js-файлы зарегистрированной страницы), а затем app.js зарегистрированной программы, затем js-файл пользовательского компонента и, наконец, js-код страницы регистрации. И апплет использует метод require для выполнения программы в модуле сразу после загрузки app.js и js-кода страницы регистрации. Другой код должен использовать метод require в программе для выполнения.
Ниже подробно описан процесс обработки app.js, пользовательских компонентов и кода страницы js.
4. Загрузите app.js и зарегистрируйте программу
После загрузки app.js апплет будет использовать require('app.js') для регистрации программы, то есть для вызова метода App, который является ссылкой на метод __appServiceEngine__.App.
На следующем рисунке показан поток обработки, когда платформа вызывает метод App:
Метод App создает экземпляр приложения на основе входящего объекта, а его функции жизненного цикла onLaunch и onShow используют разные способы получения параметров параметров. В некоторых случаях, которые необходимо реализовать на основе значений сцены, может быть более целесообразным использовать значения сцены в onShow.
В процессе фактической разработки обнаруживается, что параметры, вызывающие апплет в верхней части WeChat, и список апплетов отличаются. В этом случае, после входа, нажав на общий апплет, закрыть апплет, а затем войти в апплет разными способами.Атрибут path вызываемых через верх опций по-прежнему является общим путем, но, открыв его в списке, он сразу возвращается на домашнюю страницу.Здесь onShow в приложении получит различные варианты.
5. Загрузите код пользовательского компонента и зарегистрируйте пользовательские компоненты.
Пользовательский компонент загружается после app.js, и апплет загрузит все пользовательские компоненты в этом процессе (пользовательские компоненты в подпакете не тестировались), и автоматически регистрируются после завершения загрузки, только после регистрация завершена, код для следующего пользовательского компонента загружен.
На следующем рисунке показан поток обработки фреймворка для метода Component:
На рисунке показано, как платформа обрабатывает объекты, переданные в метод Component, и существует множество подробных шагов для создания экземпляра компонента, которые не показаны на рисунке, которые можно просмотреть во вложении в конце статьи.
Пользовательские компоненты становятся все более и более совершенными в небольших программах, и их возможности более эффективны, чем Page. Как будет упомянуто позже, в Pages, которые используют пользовательские компоненты, экземпляры Page также будут использовать тот же метод создания экземпляров, что и пользовательские компоненты. у него такие же возможности, как и у пользовательских компонентов.
6. Загрузка кода страницы и страницы регистрации
Процесс загрузки кода страницы такой же, как и при загрузке пользовательских компонентов: после загрузки сначала регистрируется страница, а затем загружается следующая страница.
На следующем рисунке показан поток обработки фреймворка для метода Page при регистрации страницы:
Метод Page обрабатывается по-разному в зависимости от того, используется ли пользовательский компонент. Объект страницы, использующий пользовательский компонент, будет преобразован в структуру пользовательского компонента и создан с использованием другого потока обработки при создании экземпляра страницы. Конечно, для развития это не имеет никакого значения.
Начиная с рисунка можно обнаружить, что код входящего (жизненного цикла) здесь не выполняется, и подробный процесс создания страницы можно понять по следующему разделу.
7. Подождите, пока страница будет готова и страница будет создана.
Помните последний шаг описанного выше процесса запуска — ожидание готовности страницы? Строго говоря, он ждет готовности браузера.Хотя апплет имеет некоторые нативные компоненты, по сути это веб-программа.
При переключении страниц или открытии страниц в апплете будет срабатывать событие onAppRoute.Фреймворк апплета регистрирует обработчик переключения страниц через wx.onAppRoute.После того как все программы будут готовы, он использует entryPagePath как запись для использования appLaunch для входа в страница.
На следующем рисунке показан поток программы для обработки навигации:
Из рисунка видно, что инстанцирование страницы осуществляется при входе на страницу.На следующем рисунке показан конкретный процесс инстанцирования:
На следующем рисунке показан последний экземпляр Page:
Можно обнаружить, что onRouteEnd API больше, но этот интерфейс на самом деле вызываться не будет. Компоненты, отмеченные компонентом, представляют методы и свойства, которые доступны только при использовании пользовательских компонентов. Как упоминалось в разделе 5 выше, страницы, использующие пользовательские компоненты, будут анализироваться так же, как и пользовательские компоненты, и эти свойства и методы согласуются с производительностью пользовательских компонентов.
8. О наборе данных
Структура апплета — это среда, управляемая данными. Конечно, необходимо изучить, как она реализует привязку данных. На следующем рисунке показан поток выполнения setData экземпляра Page:
где component:setData представляет метод setData экземпляра Page с использованием пользовательского компонента.
В-третьих, напишите в конце
Это неполное исследование структуры апплета, которое является результатом отладки в инструменте разработки WeChat. Хотя это не очень полезно для фактической разработки, у меня есть четкое понимание того, как фреймворк обрабатывает разработанный код js, и я могу иметь четкое представление об использовании некоторых функций js. Если вы все еще задаетесь вопросом, «что делает структура апплета с входящими объектами и т. д.», это должно быть связано с тем, что моя способность выражать слишком плоха, так что мне очень жаль.
Благодаря этой отладке мне также были представлены новые проблемы, и я надеюсь, что у меня будет больше обсуждений:
- Слишком много пользовательских компонентов потребует времени для обработки пользовательских компонентов при запуске.
- Слишком много файлов потребуется время для чтения файла
- Разумный субподряд по проектированию очень важен
Примечание во время отладкиНеполный анализ апплета framework.xmind, если вам интересно, вы можете скачать его. Конечно, в конце концов, для возможностей, уже заложенных во фреймворке, мы все еще надеемся, что WeChat сможет открыть более стабильные интерфейсы и сообщить разработчикам в документации, чтобы упростить разработку.
Эта статья была впервые опубликована вБлог о технологиях Youzan.