Практика Таро в приложении для покупок Jingdong

внешний интерфейс Апплет WeChat внешний фреймворк
Практика Таро в приложении для покупок Jingdong

О Таро

Taroосновывается наReactМноготерминальная унифицированная среда разработки с грамматическими спецификациями, которую можно пройтиtaro.aotu.ioУзнать больше о. После того, как Taro был выпущен некоторое время назад, апплет Jingdong для покупок начал рефакторинг некоторых страниц на основе Taro.Эта статья предназначена для того, чтобы поделиться некоторыми практиками рефакторинга кода с использованием Taro на страницах классификации продуктов.

Гибридная модель разработки

В прошлом апплет JD.com для покупок не использовал какую-либо стороннюю структуру, но на основе собственного режима апплета были инкапсулированы такие модули, как базовый класс страницы/компонента, сетевой запрос, локальное хранилище и переход на страницу. Из-за огромного размера проекта (охватывающего более 100 страниц) определенно невозможно напрямую преобразовать весь проект в метод разработки Таро, поэтому принят такой способ разработки, в котором смешаны нативные апплеты и Таро, а некоторые старые страницы повторно используются в структуре Таро, а некоторые новые страницы разрабатываются непосредственно с использованием Таро. Взяв в качестве примера страницу классификации продуктов, давайте сначала посмотрим на структуру каталогов исходного проекта апплета для покупок Jingdong:

├── dist
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   ├── assets/
│   ├── common/
│   ├── libs/
│   └── pages
│       ├── cate
│       │   ├── components/
│       │   ├── index.js
│       │   ├── index.json
│       │   ├── index.wxml
│       │   └── index.wxss
│       └── index/
├── src/
├── README.md
├── gulpfile.js
├── package.json
└── node_modules/

1. Инициализируйте Таро

Запустите команду в корне проектаtaro init jdwxa-taroПосле инициализации новый файл с именемjdwxa-taroкаталог, исходный код, связанный с Таро, написан в этом каталоге:

├── dist/
├── src/
└── jdwxa-taro
    ├── config
    │   ├── dev.js
    │   ├── index.js
    │   └── prod.js
    ├── node_modules/
    ├── package.json
    ├── project.config.json
    └── src
        ├── app.js
        ├── app.scss
        ├── index.html
        └── pages
            └── cate
                ├── index.js
                └── index.scss

2. Конфигурация Таро

Отдельный проект Taro будет включатьapp.js,app.json,app.wxssа файлы подкачки генерируются в каталоге dist/, а в режиме смешанной разработки нужно сгенерировать только одну страницу.Здесь нужно Таро настроить, открыть и отредактироватьconfig/index.jsдокумент:

const config = {
    outputRoot: '../dist',
    weapp: {
        appOutput: false,
        npm: {
            dir: '../../dist/common',
            name: 'taro'
        }
    },
    // ...
}

Как показывает код,outputRootПоле — это путь хранения сгенерированной целевой страницы, здесь он указывает на директорию dist/ верхнего уровня (то есть исходный проект);weappчасть, мы кладемappOutputУстановите значение false, чтобы три файла app.js, app.json и app.wxss не создавались.npmПоле указывает каталог хранения файлов среды выполнения Taro, который указан как каталог common/ в соответствии с исходной спецификацией проекта. Таким образом, целевой файл, сгенерированный компиляцией Taro, идеально интегрируется в исходный проект апплета.

3. Разработка страницы

В процессе разработки страницы самое большое отличие от нативного апплета заключается в том, чтоReact + JSXЕсли вы привыкли к нативному аплету, вам может понадобиться некоторый процесс адаптации.Конкретная кодировка не будет подробно обсуждаться.Вот некоторые меры предосторожности:

  • с апплетомsetDataСпособ другой, Таро используется для обновления данных страницыsetStateЭто асинхронно, и время выполнения связанного кода требует особого внимания;
  • Для облегчения написания JSX-шаблонов рекомендуется разбить исходный длинный WXML-контент на несколько небольших компонентов;
  • Что касается повторного использования старых компонентов, будь то нативные компоненты небольших программ, обычные JS-модули, файлы стилей или сторонние библиотеки компонентов, их можно хорошо импортировать и вызывать, так что об этом можно не беспокоиться;
  • В настоящее время трудно отлаживать целевой код, сгенерированный компиляцией Taro, ноSourceMapподдержка находится в активной разработке.

4. Окончательный эффект

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

小程序码 of 京东购物小程序 - 商品分类页

Польза от Таро

Многотерминальная работа

Самым большим преимуществом является то, что можно создать несколько версий, избегая дублирования работы и экономя затраты на разработку. Возьмите страницу категории в качестве примера, просто запуститеnpm run build:h5Страница классификации версии H5 может быть сгенерирована, а эффект работы такой же, как и у апплета.Вы можете отсканировать следующий QR-код, чтобы испытать:

Taro 生成的 H5 版商品分类页

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

повышение производительности

Большинство проблем с производительностью, возникающих в проектах апплетов, вызваны частым вызовом setData, что связано с тем, что каждый вызовsetData, апплет будет хранить эту часть данных на логическом уровне (среда выполненияJSCore) для операций, подобных сериализации, преобразования данных в строку и передачи их на уровень представления (среда выполненияWebView), уровень представления получает данные посредством десериализации, а затем отображает страницу. Этот процесс имеет определенные накладные расходы на производительность.

Поэтому в процессе разработки мы рекомендуемsetDataОбъединить, уменьшить количество звонков, например:

this.setData({ foo: 'Strawberry' })
this.setData({ foo: 'Strawberry', bar: 'Fields' })
this.setData({ baz: 'Forever' })

Приведенный выше код вызывается 3 разаsetData, вызывая ненужные накладные расходы на производительность, которые следует объединить:

this.setData({
    foo: 'Strawberry',
    bar: 'Fields',
    baz: 'Forever',
})

После использования Таро вызывается при обновлении данныхsetStateКак асинхронный метод, он будет автоматически вызываться несколько раз в одном и том же цикле событий.setStateвызов обработки слияния, в дополнение к даннымdiffОптимизация, автоматически удаляющая эти неизмененные данные, что эффективно предотвращает такие проблемы с производительностью. Например:

// 初始时
this.state = {
    foo: '1967',
    bar: {
        foo: 'Strawberry',
        bar: 'Fields',
        baz: 'Forever',
    }
}
// 第一次更新
this.setState({
    bar: {
        foo: 'Norwegian',
        bar: 'Fields',
        baz: 'Forever',
    }
})
// 紧接着进行第二次更新
this.setState({
    foo: '1967',
    bar: {
        foo: 'Norwegian',
        bar: 'Wood',
        baz: 'Forever',
    }
})

Хотя приведенный выше код проходит дваждыsetState, но были обновлены только данные bar.foo и bar.bar. В это время Taro автоматически объединит данные и удалит повторяющиеся данные. Окончательный код выполнения:

// this.$scope 在小程序环境中为 page 实例
this.$scope.setData({
    'bar.foo': 'Norwegian',
    'bar.bar': 'Wood',
})

другой доход

По сравнению с нативной разработкой апплетов, Taro предлагает множество интересных функций (таких как поддержка TypeScript, NPM, расширенный синтаксис JSX, более продвинутые функции ES и т. д.), которые не только улучшают процесс разработки, но также поддерживают автоматическое тестирование, непрерывное построение, и т.д. Также будет небольшая помощь.

Например, апплет для покупок Jingdong инкапсулируетgetImgметод, этот метод принимает URL-адрес изображения и необязательную ширину и высоту в качестве параметров, а затем решает, использовать ли формат webp в соответствии с типом устройства, применяет соответствующую степень сжатия изображения в соответствии с текущей сетевой средой, автоматически обрабатывает заголовок протокола и преобразование доменного имени и, наконец, генерирует целевой размер URL-адреса изображения. Мы требуем, чтобы все изображения прошли черезgetImgПосле того, как метод обработан, его можно отобразить, но, поскольку метод JS можно вызвать только на логическом уровне, его можно передать вWXMLОн отображается, что затрудняет его обнаружение в автоматизированных средствах и своевременное обнаружение того, что он не вызывается.getImgСитуация выходного изображения.

После использования Таро вы можете напрямуюJSXшаблонImageКогда этикетка выводитсяsrcпередачаgetImgметод, и после того, как это написание указано как спецификация, его легко обнаружить автоматизированными инструментами:

render () {
    return <Image src={getImg(url, 750)} />
}

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

Спасибо за прочтение этой статьи отЛаборатория удароввсе права защищены. При перепечатке просьба указывать источник: Bump Lab (Bump.IO/notes/2018/…)
Категории