Автор этой статьи: Команда IMWebОригинальная ссылка
21 июня 2019 года автор отправился на специальную сессию небольшой программы большой конференции по передовым технологиям GMTC в Пекине, чтобы поделиться речью на тему «Практика разработки малых программ онлайн-образования Tencent».
1. Матрица мини-программ онлайн-образования Tencent
Во-первых, давайте представим три основных направления деятельности Tencent Online Education:
- Класс Tencent для профессионализации взрослых и обучения, ориентированного на интересы
- Репетиторство по пингвинам для полей k12 начальной, средней и старшей школы
- ABCmouse для изучения английского языка детьми
В каждом бизнесе есть ПК Web, клиент, H5, APP, чтобы удовлетворить потребности студентов в разных классах. Однако, поскольку предшественник образования был создан на основе групповых видеороликов QQ, а продолжение также было построено на экологии QQ, поэтому с точки зрения трафика на трафик, связанный с QQ, приходилась большая доля.
2. Проектирование инфраструктуры мини-программы и инженерно-технические изыскания
С таким количеством небольших программ, упомянутых выше, как мы можем выбрать фреймворк? И как команда формулирует унифицированные спецификации разработки и исследует разработку небольших программ при разработке совместной работы нескольких человек? Далее мы представим их один за другим.
- Характеристики небольшой итеративной процедуры обновляются быстрее, мы хотим использовать самые быстрые на последних функциях, другие сторонние рамки могут оказать итеративное отставание
- У нас слабые требования к многотерминальному мультиплексированию
- Для настройки производительности требования к устранению неполадок высоки, и вы хотите напрямую управлять собственным API.
Итак, можно ли решить вышеуказанные дефекты разработки с помощью нативного фреймворка и как?
1. Предварительная обработка CSS
Давайте сначала рассмотрим предварительную обработку CSS.Мы ожидаем, что сможем использовать предварительную обработку CSS в небольших программах, включая вложенные грамматики, примеси, переменные и т. д., а также такие инструменты, как styleLint. После исследования мы можем напрямую использовать postcss для написания файлов стилей и компилировать их в wxss.
2. Управление данными
Доступ к управлению данными можно получить с помощью westore.
3. Построить
Что нужно сделать, чтобы построить небольшую программу? Инструмент разработчика апплета уже предоставляет некоторые возможности: от ES7/ES6 до ES5, управление пакетами NPM, субподряд кода, компонентизацию, а также упаковку и слияние.
Зачем использовать gulp вместо более популярного веб-пакета?
Возможность дополнений здесь в основном связана с большей обработкой файлов, а эффективность разработки при использовании gulp выше.Некоторые официальные скаффолдинги небольших программ также используют gulp.
4. Спецификация каталога
После того, как структура разработки определена, спецификация унифицированного каталога также является обязательной для совместной разработки в команде.
После введения управления пакетами npm мы создали новый каталог минипрограммы в базовом каталоге апплета в качестве корневого каталога кода апплета. Это связано с тем, что мини-программа будет упаковывать и компилировать пакеты в node_modules в каталог miniprogram_npm.Чтобы избежать смешивания node_modules мини-программы с другими модулями node_modules, связанными с разработкой, создается новая папка для хранения проекта мини-программы. код. Вы можете настроить путь к корневому каталогу кода апплета, изменив project.config.js.
5. Спецификации кодирования
Ограничьте каталог, а затем в совместной разработке команды, как поддерживать стандартизированный и унифицированный код, мы надеемся, что члены команды смогут унифицировать спецификацию кода, отправить спецификацию и сохранить согласованность стиля при разработке. Поэтому, как и в других наших веб-проектах, мы можем использовать eslint, stylelint, commit, prettier и другие плагины для ограничения и стандартизации нашего кода. Крюк git используется для проверки представления при его отправке, если оно не проходит, то представление не разрешено.
Автоматически генерируйте унифицированные номера версий и журналы изменений через Commitizen и стандартную версию. Нормализованный журнал, отправленный вами в этой итерации версии, будет автоматически (в соответствии со спецификацией фиксации команды Angular):GitHub.com/angular/ang…) автоматически создает журнал изменений, указывающий, является ли это выпуском функции, исправлением ошибки или критическим изменением, а также соответствующую информацию журнала. Позже, когда нам нужно будет откатить или ретроспективно изменить определенную версию, мы сможем увидеть это с первого взгляда.
Опираясь на вышеперечисленные возможности и ограничения, мы сделали унифицированный скаффолдинг, который удобен для быстрой разработки командой в единой среде, и опенсорс его (GitHub.com/IM Web/Root…).
3. Практика разработки мини-программ
После знакомства с нашим выбором фреймворка и инженерными исследованиями, давайте поделимся разработкой и практическим опытом апплета онлайн-обучения.
1. Мини программа аудио и видео
1), сцена прямого эфира
Следовательно, мы можем использовать live-player для воспроизведения потокового мультимедиа по протоколу rtmp и http-flv, чтобы уменьшить задержку в сцене прямой трансляции апплета.
Однако в лайв-плеере все же есть некоторые недостатки:
- Например, полноэкранная кнопка не поддерживается и должна быть определена вами самостоятельно.
- Так как live-плеер является нативным компонентом, необходимо использовать обложку и некоторые хаки для реализации полноэкранной кнопки пользовательской панели управления и бага уровня отображения видеоокна
- Когда IOS работает в полноэкранном режиме, привязка недействительна Тем не менее, в задней части апплета используется схема рендеринга одного уровня, которая решает проблему, связанную с тем, что собственные компоненты должны использовать обложку для решения проблемы уровня отображения, и можно использовать последнюю версию базовой библиотеки.
После того, как вы активировали WebRTC в облаке Tencent, вы можете использовать wbertc-room для обеспечения прямых трансляций с меньшей задержкой в апплетах. Принцип основан на RTMP live-плеера, но высокоскоростная выделенная линия не проходит через CDN, что снижает задержку.
2), запись и трансляция сцены
После представления плана доступа к прямой трансляции давайте поговорим о записи. Из-за защиты авторских прав для записи и воспроизведения Tencent Classroom используется зашифрованный HLS.
1. Получить m3u8-адрес зашифрованного HLS и передать его видео;
2. Нижний слой видео браузера парсит m3u8 и находит, что у него есть идентификатор протокола шифрования -EXT-X-KEY, а его значением является адрес интерфейса для получения ключа расшифровки;
3. Браузер автоматически инициирует запрос, инициирует запрос и получает ключ дешифрования;
4. Когда браузер автоматически инициирует запрос, он передает состояние входа пользователя через файл cookie. Бизнес-фон проверяет подлинность файла cookie и возвращает ключ дешифрования. После того, как браузер получит ключ дешифрования, он может расшифровать и воспроизвести.
Но в апплете, поскольку в апплете нет файла cookie, как запросить аутентификацию для ключа дешифрования, инициированного апплетом?
Когда мы получаем файл m3u8, мы добавляем зашифрованные параметры аутентификации к адресу meu8 и добавляем префикс «voddrm.token.», чтобы, когда сервер вернет файл m3u8, он был на адрес запроса EXT-X -KEY.Вставлены параметры аутентификации. Когда запрос инициируется позже, фон службы получает параметры проверки подлинности, расшифровывает их в соответствии с согласованным методом, а затем получает входной билет пользователя, чтобы определить, является ли он законным пользователем. После этого, согласно предыдущему процессу, после прохождения аутентификации возвращается ключ расшифровки.
2. Автоматический выпуск небольших программ
После доработки аудио и видео возможностей наш проект нормально запустился. В связи с постоянным расширением функций платформы, мини-программы также периодически выпускаются в соответствии со следующим процессом.
Чтобы раскрыть ответ, есть два основных вопроса:
- 1. В процессе разработки с участием нескольких человек могут быть разные версии пакетов npm.Например, пакеты npm с возможностью входа в систему могут забыть обновить последние пакеты.
- 2. Кнопка сборки npm имеет скрытый вход в инструмент разработчика, который может легко привести к обновлению пакета npm, но забыв нажать, чтобы собрать npm, охватывающий онлайн-функции.
Вышеперечисленные операции не так просто сделать ошибки тем, кто знаком с разработкой небольших программ, а новичкам ими легко пренебречь из-за их незнакомости. Даже если и будут допущены ошибки, вероятность мала, но их надо исправлять.
Так можем ли мы использовать автоматизированные инструменты для проверки и обнаружения этих скрытых опасностей?
1. Обнаружение слияния кода
2, определение версии node_modules, должно быть больше или равно текущей версии package.json
3. Автоматизируйте операции сборки npm
4. Автоматически выполнять операции загрузки, включая заполнение номера версии и примечаний.
Среди них 1 и 2 можно судить по командам gitook и npm, 3 и 4 связаны с возможностью вызова апплета, есть ли какой-либо открытый связанный интерфейс, который можно вызвать?
1. Проверьте, нужно ли обновлять последний основной код;
2. Определите, установлен ли инструмент разработчика апплета и установлен ли он в качестве переменной среды;
3. Выполнить локальное определение версии node_modules;
4. Вызовите команду сборки npm;
5. Автоматически получить номер версии package.json в качестве версии загрузки и получить журнал фиксации git в качестве примечания; 6. Вызовите команду загрузки для загрузки
3. Небольшая программа сторонней платформы
Имея вышеперечисленные инструменты, мы можем с радостью разрабатывать итеративные выпуски. Но с продвижением нашего апплета платформы для занятий каждое учреждение на платформе для занятий хочет иметь свой собственный апплет учреждения, и его страница является подмножеством апплета платформы для занятий.
Проблема повторного использования кода решена, но вместе с ней возникает другая проблема. Необходимо создать более 80 учреждений, и некоторые учреждения не обязательно имеют разработчиков.Что, если они помогут учреждениям быстро загрузить и опубликовать свои собственные институциональные мини-программы?
4, практика оптимизации производительности
2. Время запуска фактически достигло 3,8 с. Это достоверные данные? В дополнение к трудоемкой загрузке и рендерингу, где другие затраты времени?
Если вы хотите знать, где находится потребление времени, вы должны сначала понять, что происходит в процессе запуска апплета.
1, инициализация апплета
На этом этапе WeChat инициализирует среду апплета, такую как js-движок логического уровня, WebView уровня представления, и внедрит общедоступную базовую библиотеку.
2. Загрузите пакет кода апплета
Здесь будет выполнена загрузка пакета кода бизнес-апплета.
3. Загрузите пакет бизнес-кода
Внедрить пакет кода для выполнения после завершения загрузки — код апплета будет загружен в соответствующий поток для выполнения. На этом этапе все app.js, файл JS, в котором находится страница, и все остальные необходимые файлы JS будут автоматически выполнены один раз, а базовая библиотека мини-программы завершит регистрацию всех страниц.
4. Инициализируйте домашнюю страницу апплета
Извлеките данные, передайте их с уровня логики на уровень представления, сгенерируйте дерево виртуального диска и визуализируйте его.
Поняв процесс запуска апплета, мы анализируем и определяем трудоемкий этап, как показано на рисунке выше.
Изначально все страницы классного апплета были в одном пакете, поэтому здесь мы используем схему субподряда. Поместите 3 страницы главной вкладки и общие модули, такие как утилита и общие компоненты, в основной пакет. Каждая другая страница делится на подпакеты размером около 300-500 КБ, причем подпакеты могут относиться к основному пакету и общедоступным модулям.
После обработки подпакета время, необходимое для загрузки пакета кода, сокращается примерно на 500 мс, а общее время запуска сокращается до 3,2 с. В целом это на 1,3 с меньше, чем среднее время запуска в 4,5 с для небольших программ и больших дисков.
Однако наряду с этим были введены и другие проблемы, такие как сцена открытия страницы сведений о курсе с домашней страницы.
В настоящее время, когда вы нажимаете на страницу сведений, вам необходимо загрузить пакет страницы сведений, прежде чем вы сможете открыть страницу сведений о курсе.Очевидно, что этот опыт крайне плохой.
Мы можем решить эту проблему, передав предварительное решение по субподряду. Откройте домашнюю страницу, после загрузки основного пакета вы можете автоматически загрузить другие подпакеты, и вы можете выполнить предварительную загрузку подпакета, настроив preloadRule.
Помимо обычных схем субподряда, мини-программы также имеют независимые схемы субподряда. Вы можете открыть страницу подпакета, не полагаясь на загрузку основного пакета. Обычно используется для некоторых относительно независимых страниц, таких как страницы активности.
- Независимые подпакеты не могут ссылаться на ресурсы основного пакета или других подпакетов.
- Глобальные объекты приложений могут быть определены только в основном пакете, а объекты приложений не могут использоваться в независимых подпакетах.
- Жизненный цикл можно отслеживать только с помощью: wx.onAppShow, wx.onAppHide
Он решает трудоемкую загрузку пакета кода и использование субподряда, а также субподряда и загрузки для повышения производительности и эффективности открытия страниц. Посмотрим на время рендеринга.
Это типичная двухпоточная коммуникационная модель небольшой программы. При каждом вызове метода setData данные будут передаваться с логического уровня на собственный уровень, а затем на уровень рендеринга, формируя дерево VD для рендеринга.
Поэтому при использовании setData вы должны попытаться следовать следующим советам:
- Не вызывайте setData часто, попробуйте объединиться в один вызов setData
- Объем передаваемых данных зависит от производительности связи, старайтесь не превышать 64 КБ и избегайте сложных структур данных или длинных строк, которые не нужно отображать на странице.
- Лучше не задавать данные, не связанные с интерфейсом, в data
- Убрать ненужную привязку событий, уменьшить объем данных и количество коммуникаций
- Не помещайте слишком большие данные в префикс данных узла (необходимо передать currentTarget и набор данных цели)
5. Общая библиотека базовых компонентов
Чтобы повысить эффективность разработки и скорость повторного использования кода, мы инкапсулировали некоторые общие возможности и функциональные компоненты (последующие планы по открытию исходного кода).
Взяв здесь компонент запроса базовых возможностей, мы инкапсулируем его на основе wx.request, используем хранилище для хранения информации о файлах cookie после входа в систему и устанавливаем билет входа в заголовок запроса при инициации последующих запросов.
Метод упаковки подключаемых подключаемых модулей используется для создания различных подключаемых модулей к расширениям. Например, есть плагин загрузки, плагин, который может автоматически отображать загрузку при выполнении запроса и автоматически скрывать ее после выполнения запроса.
Вышесказанное является обменом опытом разработки небольших программ.
4. Апплет QQ
Со стороны пользователя он в основном похож на апплет WeChat. В раскрывающемся списке чата вы можете найти вход для апплета, есть торговый центр апплета, вы можете найти всевозможные апплеты и небольшие игры. Пользовательский интерфейс его инструментов разработчика также похож на инструменты разработчика WeChat.
Между ним и апплетом WeChat есть некоторые отличия:
API и функционал
- Префикс вызова: например: qq.getSystemInfoSync (также совместим с синтаксисом wx), охват 95 %.
- веб-просмотр: апплет QQ в настоящее время не поддерживает веб-просмотр
- Метод возбуждения: поддержка http-ссылки для вызова апплета
- Компоненты: компоненты live-player, live-pusher не поддерживаются
- Поделиться: апплет QQ поддерживает совместное использование в пространстве QQ
инструменты разработчика
- Базовая структура: все основаны на nw.js
- Возможность компиляции:
- Расширенная компиляция не поддерживается
- Многоядерная компиляция не поддерживается
- разное
- Подсчет опыта не поддерживается
- Автоматическое тестирование не поддерживается
В целом API апплета QQ в основном соответствует апплету WeChat, скорость его итерации высокая, а его возможности постепенно дополняются. И у него есть бонус экологического трафика QQ.Самое главное, что рабочая нагрузка при переходе с апплета WeChat на апплет QQ меньше, и более 95% кода можно использовать повторно.
Суммировать
С быстрым развитием экосистемы мини-программ крупные производители, такие как Alipay и Baidu, разрабатывают свои собственные мини-программы. С точки зрения разработчика, есть надежда, что набор спецификаций API можно будет унифицировать, чтобы сформировать отраслевой стандарт. Не так давно Китайская группа по интересам W3C также провела стандартизированное обсуждение экологии малых программ, и я считаю, что продолжение неизбежно будет развиваться в направлении стандартизации. Вышесказанное является обменом разработками и практикой мини-программ онлайн-обучения.Вы можете следить за официальным аккаунтом команды IMWeb и личным официальным аккаунтом через QR-код ниже.