1. Введение
С 16-летнего периода тестирования апплета WeChat и до настоящего времени апплет WeChat доказал свою трансформацию и ценность со временем и практикой, а правила апплета WeChat также стали более совершенными под влиянием сообщества разработчиков.
Для сторонних компаний WeChat предоставил порталы с огромным трафиком и новые недорогие каналы.Такие компании, как Didi, Meituan и JD.com, запустили свои собственные мини-программы. Как и компании по прокату велосипедов, WeChat — это вход для сканирования QR-кода для большинства пользователей, а небольшие программы, такие как Mobike, приносят огромный трафик.
Для небольших разработчиков приложений разработка эко-апплета постоянно совершенствуется, с самого началасобственный фреймворк, Tencent для разработки собственной спецификации vuewepy, а затем отправляйтесь в Meituan, чтобы разработать почти vue письмоmpvue, а затем к спецификации React, которую недавно запустила O2 Labs.Taro.
На данный момент существует множество способов разработки мини-программ WeChat, в основном это нативные фреймворки, wepy, mpvue, Taro и 4. Сравнительный анализ также проводится по этим 4 способам.
2. Сравнение и анализ рамок
Перед лицом 4-х методов разработки какой из них выбрать?В первую очередь,конечно,сравнительный анализ различных фреймворков,от удобства средств разработки,методов разработки,управления статусом приложения,активности сообщества(библиотека пользовательского интерфейса с открытым исходным кодом, и т.д.)
2.1 Разработка инструментов разработки
-
С точки зрения инструментов разработки: инструменты разработчика Wechat необходимы для настройки режима.Для написания кода, особенно для нашей фронтенд-разработки, самым добросовестным инструментом редактирования в 21 веке, несомненно, является vscode производства Microsoft.Если код выделен , требуется соответствующая конфигурация. , как настроить, можно поискать в сети (или посмотреть официальную документацию каждого метода разработки).
-
Инженерное дело: сам апплет WeChat почти не поддерживает инженерное дело.Демо wxapp-redux-starter, созданное другими, у wepy есть собственный wepy-cli, а mpvue и taro поддерживают привычную нам гибкую настройку webpack (например, проверку синтаксиса, горячие обновления и т. д.)
2.2 На пути развития
Родная разработка:Нам нужно изучить формат написания апплета.Текущая версия шаблона поддерживает слоты, но не поддерживает пакеты npm. Препроцессор css изначально не поддерживается, но плагин Easy WXLESS в vsCode может автоматически конвертировать меньше файлов в файлы wxss;
мыпи:Нам нужно быть знакомым с двумя синтаксисами vue и wepy, поддерживать слот распределения содержимого компонента слота, поддерживать пакет npm, поддерживать препроцессор css;
mpvue:Нам нужно быть знакомым с vue, текущая версия (v1.0.13) не поддерживает slot, поддерживает пакет npm и поддерживает препроцессор css;
taro:Он принимает стандарт синтаксиса React и поддерживает написание JSX, чтобы сделать код более выразительным.Taro не поддерживает прямой рендеринг дочерних элементов.
Что касается методов разработки mpvue и taro, степень поддержки и различия между синтаксисом vue и react можно найти в их официальных документах.
2.3 Управление состоянием приложения
Родная разработка:Нативного метода управления состоянием приложения нет, но в проект можно внедрить redux или mobx. Апплет изначально предоставляет способ объявить использование глобальных переменных, конкретный метод записи можно посмотреть на официальном сайте.область действия файла.
мыпи:Вы можете внедрить в свой проект redux или mobx.
mpvue:Вы можете напрямую использовать vuex для управления состоянием приложения, и вы можете выбрать, нужен ли вам vuex при инициализации с помощью mpvue.
таро:Поддерживает избыточность, а также предоставляет решение для глобальных переменных для не очень больших приложений, введение избыточности и решения для глобальных переменных, вы можете проверить деталиОфициальный сайт - с использованием редукса,Официальный сайт - лучшие практики.
2.4 Степень активности сообщества
Родная разработка:WeChat предоставляет специальное сообщество для разработчиков небольших программ, где они могут учиться и общаться.сообщество разработчиков. Для библиотек пользовательского интерфейса все еще существует довольно много собственных библиотек пользовательского интерфейса апплета, таких как официальные.weui, Имейте похвалуzanui-weapp, красивая, простая в использовании и легко расширяемая библиотека пользовательского интерфейса апплета WeChat.
Остальные 3 фреймворка:дляwepy,mpvue,taroДля такого рода проекта с открытым исходным кодом, если вы хотите учиться и общаться, он должен быть на выдаче github.Количество звезд на github пропорционально времени, когда проект появился Wepy: более 12к звезд, mpvue: более 11 тысяч звезд, таро: более 6 тысяч звезд. С точки зрения тренда, mpvue имеет тенденцию догонять wepy.
Для wepy и mpvue на их github есть несколько библиотек пользовательского интерфейса с открытым исходным кодом, и, поскольку taro был запущен недавно, пользовательский интерфейс необходимо разрабатывать самостоятельно.
2.5 Сравнительная сводная таблица
3. Мышление на основе бизнеса компании и команды
Для бизнеса компании он должен разрабатываться быстро и итеративно, а нативный фреймворк не дружит с инженерной поддержкой и может быть исключен.
Для большинства наших существующих продуктовых направлений, связанных с внешним интерфейсом, будь то фон управления на стороне ПК или страница h5 на стороне мобильных устройств, они построены и разработаны на основе реакции + веб-пакета, а пользовательский интерфейс основан на библиотека компонентов муравья. Связанная экология довольно знакома. На этом этапе, если мы выберем wepy или mpvue, нам всем нужно изучить новые точки знаний, синтаксис wepy и vue. Если используется таро, члены команды могут быстро начать разработку WeChat mini- программ.Однако,По зрелости фреймворка,wepy и mpvue появились раньше таро,и на многие ямы наступили.Если возникнут проблемы с разработкой,есть решения от предшественников,а таро только недавно запустили.Цель этот фреймворк очень хорош. Метод разработки React заключается в том, чтобы один раз написать код и сгенерировать приложения, которые могут работать на апплете WeChat, H5, React Native и т. д., и вы обязательно столкнетесь с различными проблемами при разработке.
Таким образом, независимо от того, какой фреймворк мы выбираем, он очень сложен для нас, и я лично думаю, что выбор таро еще более сложен, потому что таро был запущен совсем недавно, и многие функции и функции находятся в стадии разработки.план в разработке, например поддержка сторонних библиотек компонентов. Когда мы развиваем бизнес компании, мы не должны останавливать развитие бизнеса из-за того, что некоторые особенности фреймворка не были разработаны и дефекты не были устранены. Это побудит нас изучить нижний слой системы Таро, технические принципы.Технология TARO раскрывает: Taro-CLI,чтобы кардинально решить проблему,например,если нет UI библиотеки,можно разработать набор самостоятельно.Если дефекты на таро фреймворке давно не решаются,можно попробовать решить их самостоятельно.После того как вы сделайте это, вы можете попросить команду o2 попросить PR и сделать это для проекта с открытым исходным кодом.При необходимости внести свой вклад, вы также можете самостоятельно поддерживать исходный код набора фреймворков таро. Это определенно полезно на нашем пути к изучению интерфейсной архитектуры и фронтенд-инжиниринга.
4. Мысли о развитии
В настоящее время я пробовал только mpvue и taro для разработки, потому что один похож на vue, а другой похож на реакцию, и теперь можно сказать, что экология vue и react вполне совершенна, поэтому эти два фреймворка очень совершенны в Условия опыта разработки.
4.1 mpvue
Когда вы начинаете разрабатывать с помощью mpvue, вы должны сначала ознакомиться с синтаксисом vue.Для таких людей, как я, которые никогда не использовали vue и привыкли к синтаксису jsx, сначала немного неудобно читать официальную документацию vue и медленно писать и писать просто привыкнуть. Взгляните на опыт кода:
<template>
<div class="fontColor">hello,{{title}}</div>
</template>
<scriptt>
export default {
data() {
return {
title: 'hello,mpvue',
};
},
};
</scriptt>
<style scoped>
.fontColor{
color: red;
}
</style>
Думать об этой структуре довольно знакомо, разве это не структура html, css и js, написанная в одном файле, когда я начинал.
Когда вы столкнетесь с проблемами при разработке mpvue, просмотрите документы mpvue и документы vue, а также официальные документы апплета WeChat, которые можно быстро найти и легко решить.
mpvue-версия Адрес проекта:geekjc-weixin
Онлайн, вы можете сканировать и испытать
4.2 taro
При разработке с помощью таро, хотя я и знаком с синтаксисом реакции, я все еще сталкиваюсь с множеством проблем при его написании.Есть еще некоторые различия в синтаксисе.Вы можете увидеть разницу.Официальная документация — Дополнительные примечания по поддержке JSX, в то время я бы задавал вопросы по проблеме, и разработчики команды o2 тоже очень серьезно отвечали на мои вопросы и дефекты фреймворка таро.
Для преобразования в страницы h5 поддерживаются оба, но если mpvue нужно преобразовать в h5, то еще много чего нужно сделать вручнуюАпплет mpvue для сводки веб-практики. Гораздо проще преобразовать таро в страницу h5.При соблюдении синтаксиса, указанного таро, основные компоненты импортируются из таро/компонентов и могут быть преобразованы в соответствии с командой.Вы можете посмотреть на следующие две картинки, один для небольшой программы, а другой конвертируется в h5.
Судя по общему ощущению на картинке, нет большой разницы в пользовательском интерфейсе и опыте, когда таро конвертируется в h5.Можно сказать, что фреймворк таро довольно мощный. (Возможно, это просто небольшая демка. В процессе конвертации в h5 я не сталкивался с ситуацией, что апплет и страница h5 отличаются или сообщают об ошибках, но из вопроса github остается много проблем с компиляцией в h5 , я надеюсь, что команда o2 может быть решена вовремя).
Адрес демо-проекта версии таро:geekjc-taro
5. Резюме
Независимо от того, какой фреймворк вы выберете, все равно потребуется время, чтобы изучить базовые знания и базовые концепции мини-программ WeChat (см. официальную документацию илиМини-программы Wechat Комплексная практика, проектирование архитектуры и сокрытие рейдеров), из-за многих проблем, для их решения лучше использовать нативные, так же и компоненты.