megaloЭто фреймворк апплета на основе Vue (да, это фреймворк апплета на основе Vue), но он поддерживает не только апплет WeChat, но и апплет Alipay, а также поддерживает использование дополнительных функций Vue во время разработки.
задний план
Для пользователей мини-программы могут обеспечить лучший опыт, но для разработчиков, чтобы заставить приложение работать на нескольких платформах, необходимо написать несколько наборов кодов. Как повысить эффективность разработки апплета — головная боль многих разработчиков.
В отрасли также есть связанные решения, такие как taro и mpvue, оба из которых реализованы на основе режима разработки react и vue, что позволяет разработчикам разрабатывать небольшие программы в знакомом режиме react или vue для повышения эффективности разработки.
Выпуск mpvue дал нам много вдохновения.Ранее мы разработали фреймворк под названием mpvue на основе RegularJS (собственно разработанный интерфейсный фреймворк NetEase).mpregularкаркас апплета. Во время разработки и фактического использования mpregular мы обнаружили, что если функции, поддерживаемые фреймворком апплета, являются лишь подмножеством исходного фреймворка (например, он не поддерживает фильтры, шаблонные сложные выражения и т. д.), эффективность разработки будет сильно сократиться.
Поэтому мы предприняли много попыток в программе, цель состоит в том, чтобы поддерживать больше функций и уменьшить разницу между апплетом и H5 перед разработкой. В настоящее время mpregular широко используется в бизнесе апплетов Koala, и студенты-разработчики смежных предприятий говорят, что стоимость обучения стала ниже, а эффективность разработки межконечного бизнеса (H5 и апплет) почти удвоилась.
После того, как решение было проверено в течение определенного периода времени, мы решили снова реализовать это решение с помощью vue, во-первых, чтобы адаптироваться к изменениям и обновлениям стека технологий, а во-вторых, немного поработать для сообщества, поэтому у нас мегало.
характеристика
Поддержка дополнительных функций синтаксиса шаблона
По сравнению с другими режимами разработки небольших программ, megalo ближе к собственному режиму разработки Vue, поскольку поддерживает больше функций.
| характеристика | Апплеты | mpvue | megalo |
|---|---|---|---|
| вычисляемые свойства | ❌ | ⭕️ | ⭕️ |
| двусторонняя привязка v-модели | ❌ | ⭕ | ⭕️ |
| слот слот | ⭕️ | ⭕️ | ⭕️ |
| слот с прицелом | ❌ | ❌ | ⭕️ |
| фильтр фильтр | ❌ | ❌ | ⭕️ |
| V-html форматированный текст | ❌ | ❌ | ⭕️ |
| Интерполяция сложных выражений | ❌ | ❌ | ⭕️ |
Как видно из таблицы, одной из самых больших особенностей megalo является то, что он поддерживает больше функций синтаксиса Vue. Это означает, что если вам нужно перенести существующий код Vue в апплет, вам не нужно слишком много менять. Потому что ваш код может использовать много фильтров, слотов с ограниченной областью действия, интерполяции сложных выражений.
базовая грамматика
Поддерживает базовый синтаксис шаблона vue, включаяv-for,v-if. Нет ограничений на способ привязки класса и стиля, поддерживается официальное использование.
<!-- v-if & v-for -->
<div v-for="(item, i) in list">
<div v-if="isEven(i)">{{ i }} - {{ item }}</div>
</div>
<!-- style & class -->
<div :class="classObject"></div>
<div :class="{ active: true }"></div>
<div :class="[activeClass, errorClass]"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="styleObject"></div>
<div :style="[baseStyles, overridingStyles]"></div>
slot & scoped-slot
Поддерживаются слоты и слоты с заданной областью.
<div>
<Container>
<Card>
<div slot="head"> {{ title }} </div>
<div> I'm body </div>
<div slot="foot"> I'm footer </div>
</Card>
</Container>
<List :list="list">
<span slot-scope="scopeProps">{{ scopeProps.item.label }}</span>
</List>
<div>
Сложные выражения и фильтр
Вы можете писать сложные выражения и вызывать методы для экземпляров в шаблонах.Конечно, вы также можете использовать более простой синтаксис фильтра, как вы обычно разрабатываете с помощью Vue.
<div>
<div>{{ message.toUpperCase() }}</div>
<div>{{ toUpperCase( message ) }</div>
<div>{{ message | toUpperCase }}</div>
</div>
v-html
нужно использоватьv-htmlНужно добавить плагин@megalo/vhtml-plugin, и представить библиотеку разбора шаблоновoctoparse, установите плагин в запись на странице:
import Vue from 'vue'
import VHtmlPlugin from '@megalo/vhtml-plugin'
Vue.use(VHtmlPlugin)
использоватьv-htmlЗатем директива может отображать html в апплете.
<div v-html="'<h1>megalo</h1>'"></div>
Улучшенная производительность обновления данных
Официальное четкое описание апплета, при звонкеsetDataЕсли объем данных слишком большой или более частый при обновлении данных, это вызовет проблемы с производительностью. В нижней части платформы megalo помогла разработчикам оптимизировать это.Каждый раз, когда данные изменяются, megalo будет обновлять только измененные данные для отображения в представлении.setDataОбъем обновления данных сведен к минимуму, а частота обновления данных ограничена.
Как и следующий код, если представление нужно отображать толькоuser.nameЕсли это поле используется, толькоuser.nameЭта строка обновляется до уровня представления, а остальные поля не будут синхронизированы с объектом апплета.
<div>{{ user.name }}</div>
<script>
export default {
data() {
return {
user: {
name: 'kaola',
age: 3,
favorite: [
'encalyptus',
'sleeping'
]
}
}
}
}
</script>
Поддержка большего количества платформ
С начала этого года основные платформы трафика сделали некоторые шаги в области небольших программ: Ant Financial создала подразделение небольших программ, а Baidu и Toutiao также запустили свои собственные небольшие программы. В настоящее время Megalo поддерживает мини-программы WeChat и Alipay, а также планируются такие платформы, как мини-программы Baidu.
Мини-программы WeChat и Alipay
использовать
Разработка с megalo очень проста, просто настройте общую конфигурацию сборки веб-пакета проекта Vue.@megalo/targetи представить@magalo/template-compilerВот и все. Если вам нужно скомпилировать его в апплет Alipay, вам нужно только установитьplatform: 'alipay'.
const { createMegaloTarget } = require('@megalo/target');
module.exports = {
target: createMegaloTarget( {
compiler: require('@megalo/template-compiler'),
platform: 'wechat'
} )
// 其他 webpack 配置，如 vue-loader 等
};
Затем вы можете разрабатывать апплеты точно так же, как разрабатывать приложения Vue. Примеры могут относиться кmegalo-demo.
Если вы хотите разрабатывать машинописный текст, вы можете обратиться кmegalo-ts-simple.
выполнить
Апплет в основном состоит из двух частей: Service (JavascriptCore) и View (WebView) по структуре (апплеты WeChat и Alipay имеют аналогичную структуру, а апплет WeChat используется в качестве примера ниже и для краткости называется апплетом). ), которые соответственно работают в независимой среде, между ними нет общего канала данных, и метод связи между ними заключается в инкапсуляции данных в скрипт js и их передаче. Экземпляр страницы находится в сервисе черезsetDataметод для передачи данных в представление. Представление передает события, инициированные уровнем представления, в Службу посредством привязки событий. Узлы DOM уровня представления не могут манипулироваться на уровне сервиса.
В реальной разработке логика и шаблон апплета должны быть написаны на.jsа также.wxmlДва файла выполняются в Service и View соответственно. Если вы хотите запустить Vue на стороне браузера в апплет, вам нужно поместить.vueФрагмент шаблона в файле преобразуется в.wxmlфайл и изменить исполняемую часть Vue, удалить в нем операцию DOM и связаться с представлением через API на экземпляре страницы в службе апплета.
Конечным эффектом является то, что когда данные на виртуальной машине Vue обновляются, vdom будет повторно отображаться.На этапе исправления фреймворк не оперирует DOM, а передает страницу на странице.setDataМетод обновляет измененные данные на уровне представления и завершает обновление представления Vue и апплета, что и делает нижний слой megalo.
Реализация megalo в основном разделена на следующие четыре части, каждая из которых будет представлена в следующей статье.
Жизненный цикл
В апплете каждая страница (Page) является экземпляром, и существует множество зацепок жизненного цикла страницы, но два ключевых жизненных цикла создания экземпляра таковы:onLoadа такжеonReady, они в页面加载，实例初始化后"а также"初次页面渲染完成" срабатывает. Чтобы установить соединение между экземпляром Vue и экземпляром апплета, после создания экземпляра Page апплета, то есть вonLoadВ функции ловушки для инициализации соответствующего корневого экземпляра Vue экземпляр страницыpageПодключен к экземпляру Vue$mp, хуки жизненного цикла Vue также будут активированы в это время.created. После того, как первоначальный рендеринг страницы завершится, она будет называться$mountметод, который отличается от монтирования узла DOM в браузере, который инициализирует данные экземпляра Vue в слое представления. В результате экземпляр Vue связан с реализацией Page апплета.
В дополнение к этим двум крючкам жизненного цикла, таким как апплетonShow,onHideКогда запускается хук жизненного цикла, он также пытается запустить функцию хука с тем же именем в экземпляре Vue, чтобы реализовать привязку жизненного цикла между двумя экземплярами. Когда страница апплета закрывается и уничтожается, она срабатываетonUnloadХук, экземпляр Vue также будет уничтожен в это время.
Преобразование шаблона
Апплет имеет собственный синтаксис шаблона и суффикс имени файла, поэтому на этапе сборки мы.vueЧасть шаблона в файле извлекается и преобразуется в соответствующий.wxmlдокумент. Имя тега и синтаксис будут соответствующим образом преобразованы, как показано на рисунке.
Эта часть выполняется на этапе сборки, что означает, что megalo не поддерживает то, как написана функция рендеринга. Помимо преобразования шаблона в.wxmlКроме того, необходимо преобразовать каждый узел в шаблоне и добавить соответствующую информацию тега узла в функцию рендеринга продукции, которая требуется для сопоставления данных и делегирования событий.
отображение данных
Поскольку мы не можем напрямую манипулировать DOM слоя представления, мы можем использовать толькоpage.setDataЭтот метод завершает сопоставление данных со слоем представления. Самый простой и жестокий метод — собрать все данные об экземпляре Vue и вызватьpage.setDataМетод обновляет данные экземпляра Page.Этот метод будет монтировать данные на экземпляре Page, а также передавать данные на уровень представления.
Однако у этого грубого метода обновления есть два недостатка:
я. Полное обновлениеvmНевозможно различить, какие данные нужны слою представления, а избыточные и бесполезные данные будут обновлены доpageна экземпляре. Как и в приведенном ниже примере, слой просмотра должен отображать только две строки, еслиvmТакже есть два больших массива наpageначальство.
II. Синхронизировать сpageДанные в экземпляре на самом деле являются исходными данными, а не фактическими данными, которые будут отображаться на уровне представления.Поэтому форматирование и преобразование отображаемых данных должны полагаться на способность синтаксического анализа шаблона апплета, что приводит к некоторым синтаксисам шаблона. поддерживаемые Vue, не могут поддерживаться, например, фильтр, сложные выражения, передача объектов класса и т. д.
Конечно, два вышеупомянутых недостатка не повлияют на разработку функций, но в реальном развитии бизнеса опыт разработки будет противоречивым, особенно когда код H5 переносится в апплет, что сильно влияет на эффективность. Чтобы решить эту проблему, megalo использует другой метод, который заключается в обновлении данных о vnode, сгенерированных во время рендеринга в представление, данные vnode представляют собой обработанные данные отображения, построение структуры данных каждого узла в соответствии с vnode. , а затем синхронизируйте его с представлением Floor.
Например, в следующем коде megalo будет помечать каждый узел на этапе построения, чтобы vnode, сгенерированный во время рендеринга, мог соответствовать каждой интерполяции в шаблоне.
<!-- 编译前的 Vue 模版 .vue -->
<div :class=“classObj”>
{{ date | format( 'YYYY' ) }}
</div>
<!-- 编译后的小程序模版 .wxml -->
<view class="{{ node_1.class }}">
{{ node_2.text }}
</view>
Для сопоставления данных, реализованного таким образом, только две строковые данные, требуемые уровнем представления, будут синхронизированы с экземпляром Page апплета, а остальные данные считаются нерелевантными для представления и не будут синхронизированы.
export default {
data() {
return {
classObj: {
'kaola': true
},
date: new Date(),
users: {
// big object
}
}
}
}
Как показано на рисунке ниже, vnode, визуализируемый Vue, будет сопоставлен со страницей с определенной структурой данных, а затем синхронизирован со слоем представления апплета.
Сопоставление данных, реализованное таким образом, может лучше поддерживать синтаксис шаблона Vue и минимизировать объем данных, передаваемых при обновлении представления, избегая уровня фреймворка.setDataпроблемы с производительностью.
агент событий
После того, как представление апплета инициирует событие, оноeventОбъект уведомляется экземпляру Page, затем нам нужно только делегировать все события в слое представления наpage.proxyВ этом методе, а затем полагайтесь на этот метод, чтобы найти соответствующий экземпляр из дерева экземпляров Vue.vmа такжеhandlerЗаймитесь обработкой событий. Для этого при компиляции шаблона на этапе сборки в дополнение к преобразованию метода прослушивателя событий вproxyКроме того, необходимо пройтиdata-Отметьте соответствующий компонент на элементеcompidи узелnodeid.
<!-- 编译前的 Vue 模版 .vue -->
<div @click="onClick"></div>
<!-- 编译后的小程序模版 .wxml -->
<view bindtap="proxy" data-compid="0" data-nodeid="0"></view>
Когда событие запускается, прокси-метод получает соответствующую информацию об идентификаторе и типе события из объекта события, затем начинает поиск с корневого виртуального узла Vue и, наконец, находит соответствующий обработчик на виртуальном узле и выполняет обработку события для завершения. передача события апплета агенту событий экземпляра Vue.
настоящее и будущее
В настоящее время megalo постепенно используется при разработке приложения апплета koala, но схема отображения данных megalo уже была проверена в большом количестве приложений апплета koala через mpregular. Теперь megalo поддерживает разработку машинописных текстов и апплет Alipay.
Также планируется поддержка интеллектуальных апплетов Baidu.В то же время мы также планируем разработать библиотеку компонентов пользовательского интерфейса и библиотеку API, совместимых с каждой платформой, пытаясь свести к минимуму различия между разработкой приложений на H5 и различных платформах апплетов и повысить эффективность разработки. .