Почему я отказываюсь от setData и использую upData при разработке мини-программ WeChat?

GitHub Апплет WeChat
Почему я отказываюсь от setData и использую upData при разработке мини-программ WeChat?

Ввиду использования разработки апплета WeChat подsetDataПаршивый опыт, разработал библиотечную функциюwx-updata, после запуска проекта я размещаю эту библиотечную функцию для собственного использования на Github и открываю ее исходный код.wx-updata, эта библиотечная функция очень помогает мне при разработке, надеюсь, она также сможет помочь всем 👏

Если у вас возникнут проблемы при использовании, вы можете дать мне PR и вопрос, чтобы вместе улучшить опыт разработки небольших программ ~

  1. wx-updataВерсия 0.0.10
  2. Адрес на гитхабе:GitHub.com/Шерлок Эд9…
  3. Адрес предварительного просмотра фрагмента кода мини-программы:Developers.WeChat.QQ.com/Yes/cc XD O1 каждые 7…
  4. Адрес кода фрагмента кода небольшой программы:GitHub.com/Шерлок Эд9…

1. Неудобство setData

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

// 你的 data
data: {
    name: '蜡笔小新',
    info: { height: 140, color: '黄色' }
}

Если вы хотите изменитьinfo.height155, используйтеsetDataКак нам это сделать:

// 这样会把 info 里其他属性整不见了
this.setData({ info: { height: 155 } })

// 你需要取出 info 对象，修改后整个 setData
const { info } = this.data
info.height = 155
this.setData({ info })

Это не кажется слишком сложным, но еслиdataЭто очень большой объект, и необходимо менять глубокие и разные объекты и элементы массива один за другим:

data: {
    name: '蜡笔小新',
    info: {
        height: 140, color: '黄色',
        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}

Например, требование должноinfo.heightизменено на 155, при измененииinfo.descЭлемент 0 массиваage12, п.3colorА серый?

// 先取出要改变的对象，改变数字后 setData 回去
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = '灰色'
this.setData({ info })

// 或者像某些文章里介绍的，这样可读性差，也不太实用
this.setData({
    'info.height': 155,
    'info.desc[0].age': 12,
    'info.desc[3].color': '灰色'
})

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

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})

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

Вот почему я используюwx-updata, вместоsetData

Принцип wx-updata на самом деле очень прост, например:

this.upData({
    info: {
        height: 155,
        desc: [{ age: 12 }]
    }
})

// 会被自动转化为下面这种格式，
// this.setData({
//    'info.height': 155,
//    'info.desc[0].age': 12,
// })

Оказалось, что работу по конвертации пришлось делать вручную, а теперь wx-updata сделал это за нас, не правда ли, прекрасно!

Давайте представим преимущества и основные способы использования wx-updata~

2. Преимущества wx-updata

  1. служба поддержкиsetDataОбъекты объединяются автоматически, не нужно писать дерьмовые пути к объектам 🥳
  2. Поддержка вложенных массивов в объекты, вложенных объектов в массивы;
  3. Если вы не хотите перезаписывать определенное значение массива, используйте пустой массив, чтобы пропустить элемент массива, например[1,,3]Середина этого массива — пустое пространство массива;
  4. Если массив пуст, вашEslintошибка, вы можете использоватьwx-updataВместо этого укажите Пусто:[1, Empty, 3]
  5. Если вы не привыкли к пустому пространству массива или не хотите считать количество запятых, вы можете попробовать метод пути к объекту массива[1,,3] -> {'[0]': 1, '[2]': 3}

3. установка wx-updata

Вы также можете напрямую поставитьdistв каталогеwx-updata.jsскопировать в проект

использоватьnpm,yarnСпособ установки:

$ npm i -S wx-updata
# or
$ yarn add wx-updata

Потом:

  1. Поместите панель инструментов разработчика WeChat справа详情 - 本地设置 - 使用npm模块кнопка для открытия;
  2. Нажмите на панель инструментов панели инструментов разработчика WeChat.工具 - 构建npm;

Успешная сборка после сборкиminiprogram_npmПапка может использоваться как обычно

4. Как пользоваться wx-updata

способ использования

может быть установлен непосредственно наPageпуть выше, так что вы можетеPageПример использованияsetDataиспользовать то же самоеupDataохватывать

// app.js
import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})

// 页面代码中

this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [, , [, , , { color: '灰色' }]]
})

Используйте метод два

Некоторые рамки могут бытьPageНа объекте были произведены дальнейшие модификации, непосредственно заменяющиеPageПуть может быть не очень хорошим,wx-updataТакже доступны методы инструментов, и пользователи могут использовать методы инструментов непосредственно в коде страницы для обработки:

// 页面代码中

import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径

Page({
    data: { a: { b: 2}, c: [3,4,5]},

    // 自己封装一下
    upData(data) {
        return this.setData(objToPath(data))
    },

    // 你的方法中或生命周期函数
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})

Используйте пустой вместо пустого массива

можно использоватьwx-updataПредоставленный Empty используется для замены пустого места в массиве.Поскольку Empty по сути является символом, его можно использовать толькоwx-updataЭкспортировал, но не могу создать свой.

// 页面代码中
import { Empty } from './miniprogram_npm/wx-updata/index'

this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, '帅哥'],
    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色' }]]
})

метод пути к объекту для массивов

Если вы не привыкли к пространству массива или не хотите считать количество запятых, вы можете попробовать метод пути к объекту массива, вам нужно передать конфигурацию config{arrObjPath: true}

// 页面代码中
import { Empty } from './miniprogram_npm/wx-updata/index'

// 原来的方式
this.upData({
    info: { height: 155 },
    desc: [, '靓仔'],
    family: [, , [, , , { color: '灰色' }]]
})

// 使用数组路径方式
this.upData({
    info: { height: 155 },
    desc: {'[1]': '靓仔'},
    family: { '[2]': { '[3]': { color: '灰色' }
})

5. API, связанный с wx-updata

Page.prototype.upData(Object data, Function callback)

  1. data: данные, которые вы хотите установить
  2. callback: иsetDataВторой параметр такой же, вызывает функцию обратного вызова после обновления и рендеринга интерфейса.

updataInit(Page, config)

  1. Page: объект страницы, который должен бытьapp.jsвызывать;
  2. configнастроить
    • Параметры конфигурации{ debug: true }, данные пути будут распечатаны, чтобы помочь пользователям отладить, значение по умолчанию false не включено;
    • Параметры конфигурации{ arrObjPath: true }, функция пути к объекту массива будет включена, значение по умолчанию false не включено;

objToPath(Object data, Object config)

  1. data: объект данных, который вы хотите установить
  2. configнастроить
    • Параметры конфигурации{ arrObjPath: true }, функция пути к объекту массива будет включена, значение по умолчанию false не включено;

Большинство сообщений в Интернете имеют разную глубину и даже некоторые несоответствия. Следующие статьи являются кратким изложением процесса обучения. Если вы найдете какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать ~

Справочная документация:

  1. Практические советы по разработке мини-программ — расширение объектов страницы — самородки

PS: адрес моего блогаGithub - SHERlocked93/blog, вы также можете обратить внимание на мой публичный аккаунт [послеобеденный чай], давайте работать вместе~

Кроме того, вы можете присоединиться к группе WeChat «Front End Afternoon Tea Exchange Group», нажмите и удерживайте, чтобы определить QR-код ниже, чтобы добавить меня в друзья, и я приглашу вас в группу ~

Категории