Каковы болевые точки разработки небольших программ?
-
SetData и частые вызовы setData page jump flash process
-
Поддержка компонентизации слишком слабая (почти нет)
-
Нельзя использовать less, scss и прочие прекомпиляторы
-
запрос ограничения параллелизма
Зачем использовать сторонний фреймворк?
- Если вы знакомы с Vue или React, вы можете быстро начать работу, а стоимость обучения низкая.
- Набор кода может быть скомпилирован и запущен на нескольких терминалах (WeChat, Alipay, h5, RN) Апплет Alipay еще не идеален
- Компонентная разработка отлично решает проблемы изоляции компонентов, вложенности компонентов, взаимодействия компонентов и т.д.
- Поддержка использования сторонних ресурсов npm
- Заставьте апплет поддерживать обещание и решите проблему с обратным вызовом
- Такие функции, как функция генератора/класс/асинхронная функция, могут использоваться для повышения эффективности разработки.
- Оптимизация самого апплета, например, дополнение жизненного цикла, оптимизация производительности и т. д.
- Компилятор стилей поддержки: Scss/Less, компилятор шаблонов, компилятор кода: Babel/Typescript.
Сравнение сторонних фреймворков wepy mpvue taro
Здесь я провожу всестороннее сравнение трех широко используемых фреймворков апплетов с открытым исходным кодом, и есть основанный на реакции фреймворк перевода апплетов под названием nanchi, который не будет сравниваться из-за отсутствия исследований и исследований;
Структура апплета спецификации синтаксиса, подобная Vue, исходный код которой открыт командой Tencent, использует стиль синтаксиса и функциональные особенности Vue и поддерживает многие функции Vue, такие как компоненты «родитель-потомок», связь между компонентами, расчет вычисляемых свойств, прослушиватель-наблюдатель. , Поддерживается значение пропсов, распределение слотов и множество расширенных функций: микширование миксинов, перехватчики и т.д., первая версия WePY вышла в декабре 2016 года, то есть когда апплет только запустился. Выпущено 52 версии, последняя версия 1.7.2;
-
MpVue MPV UE.com/MPV UE/#-htm…
Внешний фреймворк, разработанный командой Meituan для разработки мини-программ WeChat с использованием Vue.js. Используя эту платформу, разработчики получат полный опыт разработки Vue.js, а также предоставят возможности повторного использования кода для H5 и апплетов. mpvue получил 2,7 тыс. звезд через несколько дней после выпуска, и скорость его роста резко возросла: на данный момент у него 13,7 тыс. звезд;
-
Taro taro.aotu.io/
Внешний фреймворк, использующий React.js для разработки мини-программ WeChat, открытый исходный код которого предоставлен JD.com. Он использует ту же идею компонентизации, что и React, и жизненный цикл компонентов соответствует React. В то же время он поддерживает использование синтаксиса JSX, чтобы сделать код более выразительным. Использование Taro для разработки может получить тот же опыт разработки, что и React. . , При этом из-за использования react, кроме компиляции h5 и небольших программ, его можно компилировать и в ReactNative;
Жизненный цикл
Жизненный цикл Vue с той же спецификацией mpvue и wepy и множество различных методов
wepy
Жизненный цикл wepy в основном такой же, как и у нативных апплетов, и на этой основе объединяются некоторые функции vue; для атрибута method в WePY, поскольку он несовместим с привычками использования в Vue, очень легко вызвать Здесь необходимо подчеркнуть: в WePY атрибут method может объявлять только события связывания и перехвата тега wxml страницы, но не может объявлять пользовательские методы, что несовместимо с использованием в Vue. `импортировать wepy из 'wepy';
класс экспорта по умолчанию MyPage расширяет wepy.page { // класс экспорта по умолчанию MyComponent extends wepy.component { customData = {} // пользовательские данные
customFunction () {} //自定义方法
onLoad () {} // 在Page和Component共用的生命周期函数
onShow () {} // 只在Page中存在的页面生命周期函数
config = {}; // 只在Page实例中存在的配置数据，对应于原生的page.json文件
data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定
components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的Mixin实例
computed = {}; // 声明计算属性（详见后文介绍）
watch = {}; // 声明数据watcher（详见后文介绍）
methods = {}; // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
events = {}; // 声明组件之间的事件处理函数
}`
mpvue
В дополнение к жизненному циклу самого Vue, mpvue также совместим с жизненным циклом апплета.Эта часть хука жизненного цикла происходит от страницы апплета WeChat.За исключением особых случаев, не рекомендуется использовать жизненный цикл апплета. велосипедный крючок.
Простой пример
Таро точно такой же, как и жизненный цикл реакции.
Рендеринг списка
Существуют также различные способы применения рендеринга списка.
Когда wepy необходимо зациклить и отобразить компоненты WePY (аналогично отображению собственных тегов wxml через цикл wx:for), необходимо использовать вспомогательные теги, определенные WePY.
mpvue использует v-for в соответствии с vue, просто нужно обратить внимание на один момент, рендеринг вложенного списка, необходимо указывать разные индексы!
Использование цикла списка таро в основном такое же, как и в React. Следует отметить, что в React JSX будет скомпилирован в обычное выполнение JS. Каждый элемент JSX будет фактически создан в объект JavaScript (элемент React) через createElement, так что на самом деле вы можете написать такой код, и React полностью отрисовывает:
Но в Taro JSX будет скомпилирован в строку шаблона апплета WeChat, поэтому вы не можете рассматривать шаблон, сгенерированный функцией карты, как массив. Когда вам нужно это сделать, вы должны сначала обработать массив, который нужно зациклить, а затем вызвать функцию карты с обработанным массивом. Например, приведенный выше пример следует записать так:
обработка событий
В настоящее время mpvue полностью поддерживает обработчик событий апплета и вводит виртуальный DOM Vue.js.События, связанные в предыдущем шаблоне, будут висеть на vnode, а компилятор привязывает события апплета к wxml, и Соответствующее сопоставление выполнено, поэтому, когда вы на самом деле щелкаете, вы можете использовать handleProxy во время выполнения для распределения событий на vnode через типы событий, что совпадает с механизмом Vue в WEB, поэтому он может обеспечить поддержку без потерь. Кстати, он также поддерживает пользовательские события и механизм $emit.
Таблица сопоставления событий, левая сторона — событие WEB, правая сторона — соответствующее событие апплета
**click** : 'tap',<br>
**touchstart**: 'touchstart',<br>
**touchmove**: 'touchmove',<br>
**touchcancel**: 'touchcancel',<br>
**touchend**: 'touchend',<br>
**tap**: 'tap',<br>
**longtap**: 'longtap',<br>
**input**: 'input',<br>
**change**: 'change',<br>
**submit**: 'submit',<br>
**blur**: 'blur',<br>
**focus**: 'focus',<br>
**reset**: 'reset',<br>
**confirm**: 'confirm',<br>
**columnchange**: 'columnchange',<br>
**linechange**: 'linechange',<br>
**error**: 'error',<br>
**scrolltoupper**: 'scrolltoupper',<br>
**scrolltolower**: 'scrolltolower',<br>
**scroll**: 'scroll'<br>
Обратите внимание на то, чтобы наступить на яму (официальный документ):
- Собственные события, которых нет в списке, также можно использовать для прямого изменения привязки к @@regionchange в домене с помощью события bindregionchange. В то же время это событие также очень особенное. Его типы событий — начало и конец, что делает мы не можем отличить его в handleProxy.Что это за событие, поэтому вы слушаете имя события и тип события одновременно при прослушивании таких событий
- Из-за возможности апплета, когда события связывания и перехвата связаны одновременно, будет запущено только связывание, а перехват не будет запущен, поэтому не наступайте на яму.
- модификатор события Использование .stop предотвратит всплытие, но одновременное связывание не всплывающего события приведет к сбою catchEventName для элемента! .prevent можно убить напрямую, потому что в апплете нет события по умолчанию, например, submit не переходит на страницу .capture поддерживает 1.0.9 .self не имеет идентифицируемой личности .once тоже не может этого сделать, потому что в апплете нет removeEventListener.Хотя это можно обработать прямо в handleProxy, это очень неэлегантно и идет вразрез с первоначальным замыслом, поэтому я пока не буду его рассматривать.
- В апплете вообще нет клавиатуры для других модификаторов ключ-значение, т.е. . .
Привязка событий Wepy отличается от vue и обеспечивает оптимизацию синтаксиса на основе собственных событий апплета.
привязать событие
замените bindtap="click" на @tap="click",
отменить пузырение
Замените оригинальный catchtap="click" на @tap.stop="click".
Захват событий прослушивания
замените Capture-bind:tap="click" на @tap.capture="click",
Монитор перехвата прерываний
захват-ловля: тап = "клик" Заменить @ tap.capture.stop = "клик".
Обработка событий для элементов Taro очень похожа на обработку событий для элементов DOM. Но есть небольшая синтаксическая разница:
Свойства привязки событий Таро названы в верблюжьем регистре, а не в нижнем регистре. Если вы используете синтаксис JSX, вам нужно передать функцию в качестве обработчика события вместо строки (способ написания элементов DOM). Например, традиционный шаблон апплета WeChat:
Таро немного отличается:
Другое отличие Taro заключается в том, что вы не можете использовать catchEvent для предотвращения всплытия событий. Вы должны явно использовать stopPropagation. Например, чтобы событие не всплывало, вы можете написать:
запрос запрос
Wepy модифицировал wx.request для приема параметров, стоит отметить, что он предоставляет глобальный перехватчик intercapter.
перехватчик
Taro дважды инкапсулирует запрос, вы можете использовать Taro.request(OBJECT) для инициации сетевых запросов и поддержки использования Promise.
государственное управление
- Wepy может относиться к Redux и Mbox.В настоящее время redux интегрирован в строительные леса wepy, вы можете выбрать то, что вам нужно;
- mpVue использует vuex;
- таро использует Redux;
Как выбрать подходящий для вас проект
- Если вам нужно только сделать апплет WeChat, выберите mpvue или taro в соответствии с вашим собственным фреймворком.
- Если текущий старый проект хочет перейти на программу, а старый проект разработан с помощью vue, рекомендуется использовать mpvue или wepy.
- Если это старый проект, разработанный с помощью React и нуждающийся в частичной миграции апплета, рекомендуется использовать taro
- Если это новый проект, и новый проект должен поддерживать апплет WeChat и апплет Alipay одновременно, рекомендуется использовать собственную разработку, потому что поддержка перевода текущей платформы для апплета Alipay не очень хороша, и ее трудно найти и изменить, если есть проблема Демонстрационные проекты, которые не включают слишком много логики, могут использовать фреймворк в качестве раннего внедрения, но если он включает слишком много логики взаимодействия, не рекомендуется использовать перевод фреймворка. в основном то же самое, что и апплет на уровне представления, рекомендуется вручную изменить и заменить некоторые методы и заменить некоторые атрибуты или имена файлов глобально, например, заменить wxml на axml, соотношение времени ручного преобразования составляет примерно четыре к одному; конечно , если есть достаточно людей, чтобы разработать один на одном конце, это лучше всего ...