Добавить Автора

Адрес гитхаба:github.com/nervjs/taro

Адрес документа:taro-docs.jd.com

Taro v3.1 выпустила бета-версию

С начала июля мы официально выпустили TARO 3, уже потратили полгода. Пока мы продолжаем решить проблему, но и в следующей версии идеи с несовершеннолетним.

Перед лицом растущего числа платформ мини-программ Taro предпочитает оставаться в стороне и поддерживать только некоторые основные мини-программы или стать инфраструктурой для разработки всех платформ мини-программ и преобразования мультитерминалов, мы предоставили ответ в версии 3.1:открытая архитектура.

1. Открытая архитектура

задний план

В последние годы в отрасли запускается все больше и больше небольших программных платформ, но в основе Taro лежит всего 6 платформ (WeChat, Alipay, Baidu, Toutiao, QQ, JD.com), поэтому студенты часто спрашивают, стоит ли они могут поддерживать определенную платформу.

В соответствии с текущей архитектурой код совместимости для одной платформы распространяется во всех уголках основной библиотеки Taro, включая такие части, как время компиляции и время выполнения. Поддержка новой платформы требует изменения всех этих мест, что усложняет разработку и затрудняет участие сообщества.

Так у нас возникла идея создания открытого фреймворка. Цель состоит в том, чтобы расширить возможности поддержки конечных платформ Taro в виде плагинов:

• Разработчики подключаемых модулей могут написать подключаемый модуль терминальной платформы без изменения кода базовой библиотеки Taro.
• Пользователям подключаемого модуля необходимо только установить и настроить подключаемый модуль терминальной платформы, чтобы скомпилировать код для указанной платформы.
• Разработчики могут наследовать существующие подключаемые модули терминальной платформы, а затем настраивать логику адаптации платформы.

Схема архитектуры подключаемого модуля терминальной платформы

Taro на основе изменений открытой архитектуры

1. Синхронизированы последние функции мини-программ.

Мы упаковали 6 платформ со встроенной поддержкой в ​​плагины, и интерфейс командной строки загрузит все эти плагины по умолчанию. В процессе упаковки мы извлекли последние компоненты и API каждого апплета, а также обновили и поддержали их все, чтобы согласовать последние возможности каждого апплета.

2. Добавлены платформы, поддерживающие конвертацию

С открытой архитектурой мы написали несколько плагинов для конечных платформ, которые разработчики могут использовать после установки:

• Плагин корпоративного WeChat:@tarojs/plugin-platform-weapp-qy
• Плагин апплета DingTalk:@tarojs/plugin-platform-alipay-dd
• Плагин апплета Alipay IOT:@tarojs/plugin-platform-alipay-iot
• Подключатель апплета Kuaishou (экспериментальная версия):@tarojs/plugin-platform-kwai

Влияние на разработчиков

Никаких последствий, изменения относятся к рефакторингу внутренней архитектуры Taro и не повлияют на использование разработчиками.

Что еще можно сделать интересного

В дополнение к расширению новой платформы компиляции мы также можем писать собственные подключаемые модули конечной платформы, наследуя от существующих подключаемых модулей конечной платформы, чтобы настроить логику адаптации платформы:

Как написать плагин для боковой платформы:адрес документа

1. Быстрые исправления

Поскольку существует множество платформ мини-программ, и они постоянно обновляются, часто возникает проблема, заключающаяся в том, что Taro не поддерживает своевременно запускаемые компоненты или API-интерфейсы определенной мини-программы. В настоящее время разработчику необходимо сначала связаться с командой Taro, а затем подождать, пока мы проследим за исправлением и выпустим новую версию, прежде чем ее можно будет использовать в обычном режиме.На получение решения уходит в среднем одна или две недели. .

Основываясь на открытой архитектуре, разработчики могут быстро разрабатывать собственные подключаемые модули платформы терминалов, наследуя подключаемый модуль платформы терминалов для полной поддержки этих новых компонентов или API-интерфейсов, не дожидаясь выпуска версии Taro.

Пример расширения API для апплета WeChat:

1. API внедрения во время выполнения:

/** plugin/apis.ts */
export function initNativeApi (taro) {
  // 挂载额外 API：Taro.xxx()
  taro.xxx = function () {}
}

/** plugin/runtime.ts */
import { mergeReconciler } from '@tarojs/shared'
import { initNativeApi } from './apis'

// 把 initNativeApi 合并到 reconciler 中。
// 这样可以侵入 Taro 运行时并修改 Taro 对象，达到增加 API 的目的
mergeReconciler({
  initNativeApi
})

2. Запись подключаемого модуля терминальной платформы:

/** plugin/program.ts */
import { Weapp } from '@tarojs/plugin-platform-weapp'

// 继承微信小程序
export default class Example extends Weapp {
  platform = 'example'
  // 步骤 1 中，runtime 文件的路径
  runtimePath = `@tarojs/plugin-platform-example/dist/runtime`
}

/** plugin/index.ts */
import Example from './program'
import type { IPluginContext } from '@tarojs/service'

export default (ctx: IPluginContext) => {
  ctx.registerPlatform({
    name: 'example',
    useConfigName: 'mini',
    async fn ({ config }) {
      const program = new Example(ctx, config)
      program.start()
    }
  })
}

2. Снижение атрибута

Поскольку свойства и события компонента апплета должны быть записаны статически и не могут быть добавлены динамически, Taro заранее привяжет все свойства и события компонента в шаблоне.

Однако во многих случаях в реальных проектах используются не все свойства и события компонентов.Зацикливание этих избыточных свойств и привязок событий также будет занимать большую часть объема.Кроме того, слишком много привязок событий также будет использоваться для определенного степень снижения производительности апплета.

Вот псевдокод для шаблона компонента View:

<template name="tmpl_0_view">
  <view
    hover-class="..."
    hover-stop-propagation="..."
    hover-start-time="..."
    hover-stay-time="..."
    animation="..."
    onTouchStart="..."
    onTouchMove="..."
    onTouchEnd="..."
    onTouchCancel="..."
    onLongTap="..."
    onAnimationStart="..."
    onAnimationIteration="..."
    onAnimationEnd="..."
    onTransitionEnd="..."
    disable-scroll="..."
    hidden="..."
    onAppear="..."
    onDisappear="..."
    onFirstAppear="..."
    style="..."
    class="..."
    onTap="..."
    id="..."
  >
    ...
  </view>
</template>

Таро нужно положитьViewВсе свойства и события компонента заранее связаны, чтобы удовлетворить потребности разных разработчиков. Но, может быть, для разработчика весь проектViewкомпоненты не используютсяhover-stop-propagationЭтот атрибут, то вы можете рассмотреть его упрощение и не компилировать вViewв шаблоне компонента.

Следует отметить, что упрощение свойств может вызвать ненужные проблемы и затруднить сопровождение проекта, особенно когда проект становится большим и много разработчиков, его необходимо тщательно проектировать и использовать.

2. Ремонт важных проблем

Помимо внесения корректировок в открытую архитектуру, v3.1 не забывает консолидировать ядро. Ниже приведены исправления для важных проблем в версии 3.1, некоторые из которых были выпущены в версии исправления версии 3.0, а некоторые выпущены только в версии 3.1, все они перечислены:

1. [Критическое изменение] Исправлена ​​проблема, из-за которой жизненный цикл приложения вызывался дважды в Vue.

Обратите внимание, что это исправление включает [Breaking Change] Если вы обновляете свой проект Vue с версии 3.0 до версии 3.1, вам необходимо изменить компонент записи следующим образом:

// app.js

// v3.0
// Taro 运行时内部本来就会调用一次 new Vue，
// 用户的入口组件多调用一次的话，会导致生命周期函数重复触发
const App = new Vue({
  // ...
})

// v3.1
// 用户在入口文件中只需要导出入口组件的配置对象，不需要再调用 new Vue
const App = {
  // ...
}

2. Оптимизируйте функцию обратного преобразования

В v3.1 мы реализовали функцию обратного преобразования (Taro convert) прошел обширную проверку, исправил ряд проблем и теперь достиг состояния относительно высокой доступности.

Подробная документация:taro-docs.jingdong.com/taro/docs/you….

Большие перемены:

• поддерживать использованиеBehavior
• Поддержка использования пользовательской панели вкладок
• Поддержка глобальной конфигурацииusingComponents
• ремонтcatchПроблемы с событиями, не препятствующими всплыванию
• Устранена проблема, связанная с тем, что подключение дополнительных свойств к объекту приложения не поддерживается.
• Исправлена ​​ошибка, из-за которой значение ключа цикла не компилировалось правильно.
• Исправлена ​​ошибка, из-за которой шрифты, указанные в стилях, не обрабатывались во время компиляции.

пример обратного преобразования

мы пытаемся использоватьtaro convertПреобразование четырех самых популярных апплетов WeChat с открытым исходным кодом на GitHub, и все они показали хорошие результаты после преобразования:

EastWorld/wechat-app-mall- Торговый центр мини-программы WeChat

tumobi/nideshop-mini-program- Торговый центр апплетов WeChat с открытым исходным кодом на основе Node.js + MySQL.

RebeccaHanjw/weapp-wechat-zhihu- Имитация ноу

jectychen/wechat-v2ex - V2EX

3. Поддержка предотвращения проникновения скольжения апплета

Одна из наиболее часто встречающихся проблем после запуска версии 3.0 заключается в том, чтоtouchmoveВызывается в обратном вызове событияe.stopPropagation()Не препятствует проникновению со скольжением.

Это связано с тем, что механизм всплытия событий в Taro 3 реализован отдельно на уровне логики апплета, и все события связаны между собой.bindвместоcatch. следовательноtouchmoveВызывается в обратном вызове событияe.stopPropagation()Это только предотвратит запуск обратного вызова события верхнего компонента безcatchtouchmoveСпособность предотвратить проникновение со скольжением.

В v3.1 мыViewдобавлены компонентыcatchMoveсвойства, покаcatchMoveСтоимость свойстваtrue, буду использоватьcatchtouchmoveзаменятьbindtouchmoveСвязывайте события, чтобы получить возможность предотвратить скользящее проникновение.

Применение:

<View class='parent'>
  <View class='modal' catchMove>滑动 .modal 时，并不会令 .parent 也一起滑动</View>
</View>

4. Устранить проблему, из-за которой метод общего жизненного цикла не запускается после использования HOC.

Если мы обернем страницу HOC под React framework v3.0, напримерreact-reduxиз@connect, затем некоторые общие жизненные циклы, которые мы настроили:onShareAppMessage, onShareTimelineне сработает. В это время вам необходимо установить соответствующие настройки в конфигурационном файле страницыenableShareAppMessage: true,enableShareTimeline: trueбыть решенным.

v3.1 будет сканировать во время компиляцииonShareAppMessage,onShareTimelineБудет ли он вызываться, а затем автоматически добавлять соответствующую конфигурацию в файл конфигурации страницы, в большинстве сценариев пользователям не нужно устанавливать вручную.

Обратите внимание, что если общий жизненный цикл инкапсулирован в базовый класс или настраиваемые хуки, вам все равно нужно вручную добавить соответствующую конфигурацию.

5. Устраните проблему, связанную с тем, что апплет Alipay использует собственные пользовательские компоненты для сообщения об ошибках.

В версии 3.0, когда апплет Alipay использует собственные пользовательские компоненты, будет сообщено об ошибке «элемент не существует».

Это связано с тем, что апплет Alipay предусматривает, что пользовательские компоненты, на которые ссылается страница, должны быть определены в файле axml, соответствующем странице. А Taro определит пользовательские компоненты в глобальном файле шаблона base.axml.

Таким образом, версия 3.1 будет определять страницы, использующие собственные пользовательские компоненты, и определять шаблоны этих страниц в файле axml, соответствующем странице.

6. Оптимизируйте размер шаблона base.xml

Версия 3.0 только что была запущена, и многие студенты сообщали о проблеме, связанной с тем, что небольшая программа слишком велика.Одна из причин заключается в том, что скомпилированный продуктbase.xmlРазмер этого шаблона слишком велик.

Начиная с версии 3.0.9, мы изменили логику генерации шаблонов: компоненты, которые ссылаются сами на себя, могут быть вложенными, а шаблон по умолчанию генерируется 16 раз, напримерView. Компоненты, которые ссылаются сами на себя, не будут вложены друг в друга, и шаблон будет сгенерирован только один раз, напримерMap.

Взяв за пример апплет WeChat, в самых крайних случаях скорость оптимизации объема достигает85%над:

3. Руководство по обновлению

Учащиеся, выполняющие обновление с версии 2.x, должны нажатьРуководство по миграцииработать.

Учащимся, выполняющим обновление с версии 3.x, сначала необходимо установить инструмент командной строки версии 3.1:

npm i -g @tarojs/cli@next

Затем зайдите в проект и поставьтеpackage.jsonВерсия связанных с таро зависимостей в файле изменена на3.1.0-beta.4, а затем переустановить зависимости (рекомендуется ставитьnode_modulesудаление папки). Это конец модернизации.

Breaking

v3.1 приносит критическое изменение, используйтеVueУчащиеся, которые разрабатывают, должны модифицировать согласно инструкции (выше).

4. Планирование будущего

Поддержка Таро 3 скоро появитсяReact Native, добро пожаловать в опыт:«В объявлении о тестировании версии Taro 3.2.0 добавлена ​​поддержка React Native»

5. Будьте благодарны сообществу

С открытым исходным кодом не просто, упорство обходится дороже. Команда Taro искренне благодарит всех, кто принимал участие в разработке этого проекта с открытым исходным кодом, независимо от того, представляли ли они код для Taro, создавали окружающую среду или сообщали о проблемах, или даже просто обсуждали и жаловались на Taro после еды.

Мы искренне приглашаем вас поделиться своим использованием с официальной командой Таро, с вами Таро будет еще более захватывающим!Адрес анкеты

Наконец, я особенно благодарен TARO от V3.0 до V3.1 за вклад в код, ранжирование не делится:

• @wuchangming
• @SyMind
• @zhuxianguo
• @Songkeys
• @vdfor
• @Spencer17x
• @wingsico
• @w91
• @fjc0k
• @Leechael
• @southorange1228
• @alexlees
• @cncolder
• @rottenpen
• @gcxfd
• @twocucao
• @pengtikui
• @kala888
• @LengYXin
• @iugo
• @xuchengzone
• @csolin
• @xiaoyao96
• @zhaoguoweiLLHC
• @baranwang
• @fred8617
• @huanz
• @Cslove
• @002huiguo
• @jazzqi
• @Jetsly
• @yuezk
• @lukezhange001
• @k55k32
• @Soul-Stone
• @hisanshao
• @gjc9620
• @younthu
• @digiaries
• @ZeroTo0ne
• @GoodbyeNJN