Часто задаваемые вопросы на собеседовании

Эта статья одновременно публикуется в моем блоге:xueshiming.cn

Советы: сначала немного галантереи

wx: ключ больше, чем уникальный идентификатор

Когда данные списка изменяются и страница повторно отображается, элементы в списке могут сохранять свое собственное состояние. например, вinputВ компоненте после ввода содержимого После отображения страницы не нужноinputСодержание изменилось, вам нужно использовать это свойство Это свойство, когда страница повторно отображается, убедитесь, что оно установлено сkeyКомпоненты переупорядочиваются, а не перерисовываются, что повышает эффективность отрисовки страницы.

Дополнительно: если не указаноwx:key, сообщитwarning, вы можете игнорировать его, если знаете, что список является статическим, или если вам не важен его порядок.

Блок — это элемент упаковки, а не компонент, после рендеринга страницу не видно

wx: разница между if и hidden

wx:ifСуществует локальный процесс рендеринга при переключении, чтобы гарантировать, что при рендеринге условного блока его можно будет уничтожить и повторно рендерить с более высоким потреблением переключения.hiddenВсегда рендерить. Может управлять отображением и скрывать в представлении с более высокой начальной стоимостью рендеринга, Поэтому, если элементы часто переключаются, используйтеhidden

wxml поддерживает ссылки на файлы

import: может ссылаться только на блок содержимого шаблона, где мы определяем файл шаблона

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

include: ввести весь код в целевой файл, кроме блока кода шаблона, что эквивалентно копированию вincludeместо здесь

Сравнение wxss и css

единица размера rpx

Сначала поймите несколько понятий:

设备像素: наименьшая физическая единица отображения, которой может управлять устройство. Эта минимальная физическая единица представляет собой точку на экране, и точка фиксирована.
CSS像素: Концепция внешнего программирования, логические пиксели, используемые в коде css
PPI/DPI: количество пикселей на дюйм

DPR: отношение пикселей устройства к пикселям CSS в определенном направлении телефона.

несмотря на то чтоwxssслужба поддержкиrem, но мы знаемremосновывается наhtmlкорневого элементаfontSizeразмер, чтобы соответствовать,wxssне может работать напрямуюhtmlатрибут стиля, поэтомуremПлан адаптации недействителен.rpxПоявился, указанная ширина экрана750rpx, чтобы мы могли адаптироваться к ширине экрана,rpxа такжеremРеализация похожа, иrpxнаконец-то превратился вrem

импорт стиля

Введение в стиль контура:@import ‘./ss.wxss’
Введение в встроенный стиль:styleОбычно используется для написания динамических стилей

Селектор

приоритет

Обычно используется, когда вы хотите изменить стиль других плагинов.!import

Механизм работы мини-программы

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

Горячий перезапуск: если пользователь уже открыл определенный апплет и снова открывает его в течение определенного периода времени, нам больше не нужно перезапускать в это время, что требует переключения нашего апплета, открытого в фоновом режиме, на передний план для использования.
Холодный запуск: когда пользователь открывает апплет в первый раз или активно уничтожается и повторно открывается WeChat, апплет необходимо перезагрузить и запустить.

Когда апплет будет активно уничтожен?

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

Механизм обновления мини-программы:

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

wx.getUpdateManager

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

Механизм загрузки мини-программы:

В блок-схеме запуска апплета:

Часть слева — это запуск, некоторая логика взаимодействия на уровне представления и уровне логики в клиенте WeChat, а также операции доступа к кешу данных, когда апплет запускается, он будет отправлен вcdnЧтобы запросить последний пакет кода, при первом запуске необходимо дождаться загрузки пакета кода и внедрения его в систему.webViewСтраницу апплета можно увидеть только после ее выполнения в контейнере, поэтому в случае плохой сети мы почувствуем, что страница открывается медленно, и клиент поможет нам кэшировать пакет кода локально, когда мы запустим его в следующий раз. время, мы начнемcdnЗапросите, доступна ли последняя версия пакета кода.

Приложение апплета и жизненный цикл страницы:

Жизненный цикл приложения апплета: onLaunch, onShow, onHide, onError

Первый вход в апплет изcdnИли апплет получает пакет кода локально и внедряет его в работающую среду, Клиент WeChat предоставит нам логический уровеньapp.jsизappэкземпляр для отправкиonLaunchмероприятие, На логическом уровне,app.jsизappв параметрах конструктораonLaunchметод будет вызван. когда пользователь используетhomeфайл или нажмите кнопку закрытия апплета в правом верхнем углу, чтобы закрыть апплет, аплет не уничтожается напрямую.appв параметрах конструктораonHiedeБудет вызван метод. Когда мы снова открываем апплет, WeChat вызывает апплет,onShowбудет вызван метод, когда сценарий апплета находит ошибку илиapiЕсли вызов не удался, он будет вызванonError.

Жизненный цикл страницы апплета: onLoad, onShow, onReady, onHide, onUnload,

Прежде чем страница будет уничтожена,onLoadПозвонит только один раз, После отображения страницы она вызовет экземпляр Page.onShowПосле первого рендеринга страницыonReadyбудет вызван, он будет вызван только один раз, прежде чем страница будет уничтоженаonReadyПосле триггера логический слой и слой представления взаимодействуют, Когда мы открываем новую страницу на текущей странице, текущая страница будет запускатьсяonHide, Срабатывает, если текущая страница закрытаonUnload

отвечает за просмотр страницыviewСлужба обслуживания и обработки данных и обслуживания обслуживания потоков обслуживания,AppService, Совместная работа для завершения вызова жизненного цикла

Модель события мини-программы

1. Фаза захвата события

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

2. Этап обработки события

После того, как событие достигнет целевого узла, оно вызовет функцию обратного вызова слушателя, привязанную к целевому узлу.

3. Фаза пузырька событий

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

targetСвойства: Текущий компонент, вызвавший событие.currentTargetАтрибут: исходный компонент, вызвавший событие.

eg:если есть внешний слойviewЕсть еще внутренний слойviewвложенные, как черезbindПривязать событие клика,targetдля внешнего слояviewобъект события компонента,currentTargetдля нижнего слояviewобъект события компонента

typeТип триггера, который запускает событие
timestampВременная метка инициирующего события
targetИсходный компонент, который инициирует событие, включая набор настраиваемых атрибутов идентификатора исходного компонента, который инициирует событие.
currenTargetПривязки событий для текущего компонента, включаяid,Типы,dataКоллекция пользовательских свойств
touchesпредставляет собой массив, каждый элемент которогоtouch object , идентифицирующий точку касания и информацию, которая в данный момент находится на экране.
changedTouchesЭто данные, которые идентифицируют точку касания, которая изменилась, то есть изменение текущей точки касания с существования на ничто или с нуля на существование.
detailОпределите данные, переносимые каждым событием, нажмите событие: «Расстояние между точкой касания и левым верхним углом документа». Медиа-событие, состояние воспроизведения, когда событие было запущено, и отметка времени

Операционная среда мини-программы:

в разных средахjavascriptСреда запуска скрипта другая, апплет WeChat работает на трех терминалах：iOS（iPhone/iPad）,Androidи инструменты разработчика для отладки.

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

существуетiOSвыше логический слой апплетаjavascriptкод работает наJavaScriptCore, слой представления состоит изWKWebViewДля рендеринга среда имеетiOS8,iOS9,iOS10;
существуетAndroidначальство,
- Старая версия, уровень логики апплетаjavascriptкод работаетX5 JSCore, слой представления состоит изX5на основеMobile Chrome 57Ядерные ядра
- Новая версия, апплетный логический слойjavascriptкод работает наV8, слой просмотра разработанXWebдвигатель на базеMobile Chrome 67 ядер для рендера;
В средстве разработки логический слой апплетаjavascriptкод работает наNW.js, слой представления состоит изChromium 60 Webviewрендерить.

Вывод: при разработке небольших программ не забывайте понимать некоторые принципы и детали, потому что это ключ к совершенствованию.to be an engineer,not a coder.