Краткое изложение вопросов интервью по мини-программе WeChat

• HTML
• CSS-статьи
• JS-статьи
• Vue-версия
• TypeScript篇
• Реагировать
• Сводка вопросов по фронтенд-интервью (включая сверхподробные ответы, сводка по HTML, JS, CSS) — постоянное обновление
• Сводка вопросов по фронтенд-интервью II (включая сверхподробные ответы, резюме Vue, TypeScript, React, Webpack) — постоянное обновление
  

1. Расскажите, пожалуйста, о сходствах и различиях между WXML и стандартным html?

(1) WXML — это набор языков маркировки, разработанный структурой апплета, который используется для создания структуры страницы апплета, и его функция аналогична html в веб-разработке.

① используются для описания структуры страницы

② Оба состоят из меток, атрибутов и т. д.

③ Названия меток другие, меньше меток апплетов и больше одиночных меток.

④ Апплет имеет больше атрибутов, таких как wx:if, и таких выражений, как { {}}

⑤ Предварительный просмотр WXML возможен только в инструменте разработчика апплета WeChat, а просмотр HTML возможен в браузере.

⑥ Упаковка компонентов отличается, WXML переупаковывает компоненты

⑦ Апплет работает в JS Core, дерево DOM и объект окна отсутствуют, а объект окна и объект документа нельзя использовать в апплете.

2. Расскажите, пожалуйста, о сходствах и различиях между WXSS и CSS?

(1) Добавлена ​​единица размера rpx, и преобразование единиц пикселя необходимо выполнить вручную в css, например, rem

(2) WXSS поддерживает новый размер rpx, и апплет автоматически преобразует его на экранах разных размеров.

(3) Обеспечивает глобальный стиль и локальный стиль.app.wxss в корневом каталоге проекта будет действовать на всех страницах апплета, а стиль .wxss локальной страницы будет действовать только на текущей странице

(4) WXSS поддерживает только некоторые селекторы css:

① селектор класса, селектор идентификатора

② Селектор элемента

③ Селектор объединения, селектор потомков

④ Селекторы псевдоклассов, такие как ::after и ::before

3. Пожалуйста, расскажите о роли основного каталога и файлов программы WeChat Mini.

(1) project.config.json: файл конфигурации проекта, чаще всего используемый для настройки включения проверки https;

(2) App.js: установите некоторые глобальные базовые данные и т. д., файлы сценариев страницы, храните данные страницы, функции обработки событий и т. д.;

(3) App.json: файл конфигурации текущей страницы, внешний вид и производительность окна конфигурации и т. д., элементы конфигурации на странице перезапишут app.json;

(4) App.wxss: общедоступный стиль, импорт значков и т. д.;

(5) страницы: он содержит определенные страницы одну за другой;

(6) index.json: (настроить текущий заголовок страницы и компоненты импорта и т. д.);

(7) index.wxml: файл структуры шаблона страницы;

(8) файл .wxss: файл таблицы стилей текущей страницы;

(9) index.js: (логика страницы, обработка запросов и данных и т. д.)

4. Расскажите, пожалуйста, о сходствах и различиях двухсторонней привязки апплета и vue.

(1) Двусторонняя привязка мини-программы: сначала привяжите событие ввода текстового поля через bindinput

① Объявите содержимое переменной в данных и динамически привяжите ее к значению текстового поля.

② В событии bindinput последнее значение в текстовом поле можно получить с помощью параметра события e.detail.value.

③ Назначьте последнее значение текстового поля содержимому динамически привязанного значения через this.setData, чтобы реализовать двустороннюю привязку данных.

(2) Двусторонняя привязка Vue: сначала привяжите @input к текстовому полю, чтобы прослушать событие ввода текстового поля.

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

② В событии, связанном с @input, последнее значение в поле ввода можно получить с помощью параметра события event.target.value.

③ Присвоить полученное значение переменной, динамически связанной со значением

(3) В целом разница не большая, события привязки разные, и конкретные способы получения значения разные, и для установки данных в data в апплете нужно вызывать метод this.setData
для набор

5. Кратко опишите соответствующие типы файлов мини-программы WeChat.

(1) WXML (язык разметки weixin) — это набор языков разметки, разработанный фреймворком, в сочетании с базовыми компонентами и системой событий, он может создавать структуру страницы. Контент в основном представляет собой набор компонентов, определяемых самим WeChat.

(2) WXSS (таблицы стилей WeiXin) — это язык стилей, который в основном используется для описания стилей компонентов WXML.

(3) Логическая обработка JS, сетевой запрос

(4) настройки апплета json, статическая конфигурация

(5) app.json должен иметь этот файл.Этот файл используется для глобальной настройки апплета WeChat, определения пути к файлу подкачки, производительности окна, установки времени ожидания сети и установки не менее двух вкладок.

6. Каковы методы передачи значений (передачи данных) апплета WeChat?

(1) Используйте глобальные переменные для передачи данных

(2) Использовать передачу данных локального хранилища

(3) Используйте маршрутизацию для передачи данных

7. В чем разница между Bindtap и Catchtap?

(1) И Bindtap, и catchtap относятся к функции события щелчка, которая привязывает событие к компоненту, и функция может запускаться после щелчка компонента.

bindtap : после того, как дочерний элемент использует bindtap для привязки события, он будет всплывать к родительскому элементу при его выполнении (запускает событие bingtap, привязанное к родительскому элементу)

catchtap : не будет всплывать к родительскому элементу, предотвращая всплытие события

8. В чем разница между wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()?

(1) wx.navigateTo(Object): сохранить текущую страницу и перейти на страницу в приложении. Но не могу перейти на страницу вкладок. Используйте wx.navigateBack , чтобы вернуться на исходную страницу. Стек страниц в апплете может иметь до десяти слоев.

(2) Wx.navigateBack(): закрыть текущую страницу и вернуться на предыдущую страницу или многоуровневые страницы. Текущий стек страниц можно получить с помощью getCurrentPages , чтобы определить, сколько слоев нужно вернуть.

(3) wx.redirectTo(): ​​закрыть текущую страницу и перейти на страницу в приложении. Но переход на страницу вкладки не разрешен

(4) wx.switchTab(): переход на страницу tabBar и закрытие всех остальных страниц без tabBar.

(5) wx.reLaunch(): закрыть все страницы и открыть страницу в приложении.

9. В чем разница между мини-программой WeChat и h5?

(1) С точки зрения разработки: инструменты разработки H5 и апплеты очень разные, и все апплеты зависят от клиента WeChat, поэтому, условно говоря, инструментов разработки не так много, как H5; он отличается от стандартного H5. язык; И он также имеет много собственных компонентов приложения независимо, поэтому он также отличается от H5 с точки зрения упаковки компонентов.

(2) Из операционной среды: веб-разработчикам необходимо работать с различными браузерами, пользователям ПК необходимо работать с браузерами IE, Chrome, QQ и т. д., а мобильным приложениям необходимо работать с Safari, Chrome, iOS и различными веб-представлениями в Android. система. В процессе разработки небольшой программы необходимо иметь дело с клиентами WeChat для двух основных операционных систем, iOS и Android, а также с инструментами разработчика небольших программ, используемыми для помощи в разработке.Три операционные среды небольшой программы также другой.

(3) Конфигурация сервера: поскольку производительность апплета будет выше, чем у H5, поэтому с точки зрения требований к конфигурации сервера требования апплета выше, чем у H5.Системные разрешения: поскольку WeChat может получить больше системных разрешений. , такие как состояние сетевой связи, возможность кэширования данных и т. д., эти разрешения системного уровня могут быть легко связаны с апплетами WeChat, что является официальным заявлением о том, что апплеты WeChat могут иметь плавную работу собственного приложения (собственное приложение). Однако веб-приложения H5 имеют относительно меньший доступ к разрешениям самой системы, что часто вызывает критику веб-приложений H5. Поэтому большинство приложений H5 ограничены рамками простой бизнес-логики и одной функции.

(4) Имя тега: при написании HTML часто используются теги div, p, span, а теги WXML апплета — вид, кнопка, текст и т. д. Эти теги представляют собой апплеты, которые упакованы для разработчиков. способность. Апплет имеет больше атрибутов, таких как wx:if, и выражений, таких как { { }}. В общем процессе разработки веб-страниц мы обычно манипулируем DOM (соответствующим дереву, сгенерированному описанием HTML) через JS, чтобы вызвать некоторые изменения в интерфейсе. , Изменения в ответ на поведение пользователя.

10. В чем разница между апплетом и vue?

(1) Разница в определении события: Vue использует @ для привязки событий, а апплеты используют привязку

(2) Значение передачи функции события: значение передачи Vue непосредственно записывается в квадратных скобках функции, значение передачи апплета WeChat должно использовать data-custom name={ {{значение, которое необходимо передать}}

(3) Ссылка на ключевое слово: добавьте «:» или v-bind перед именем атрибута в vue, и вам нужно всего лишь добавить «{ {}}» к значению атрибута в апплете WeChat, чтобы обернуть его .

(4) Как пользоваться инструкциями: используйте v- в vue, используйте wx: в апплетах

11. Понимание Rpx:

(1) Rpx — это блок ответа в апплете WeChat.

(2) rpx — это уникальная единица измерения размера для апплетов WeChat, позволяющая решить проблему адаптации экрана.

(3) Он может быть адаптирован в соответствии с шириной экрана.Независимо от размера экрана указанная ширина экрана составляет 750 пикселей, а когда ширина страницы составляет 750 пикселей, 1 пикселя = 1 пиксель.

12. Могут ли апплеты WeChat выполнять операции DOM?

(1) Апплеты WeChat не поддерживают document.querySelect для получения элементов, потому что уровень рендеринга и логический уровень апплетов WeChat независимы, но имеет два встроенных метода для получения элементов

① wx.createSelectorQuery() получает элементы dom

13. В чем разница между Mini Program и Vue?

(1) Жизненный цикл отличается, и жизненный цикл апплета WeChat относительно прост.

(2) Привязка данных также отличается. Привязка данных апплета Wechat должна использовать { {}}, vue напрямую: просто отлично

(3) Отображение и скрытие элементов.В vue используйте v-if и v-show для управления отображением и скрытием элементов.В апплетах используйте wx-if и hidden для управления отображением и скрытием элементов.

(4) Обработка событий отличается. В небольших программах используйте bindtap(bind+event) или catchtap(catch+event) для привязки событий, vue: используйте v-on:event для привязки событий или используйте @event для привязки событий

(5) Двусторонняя привязка данных тоже отличается.В vue нужно только добавить v-model к элементу формы, а затем привязать соответствующее значение в данных.При изменении содержимого элемента формы соответствующий значение в данных Значение также изменится соответственно, что является очень хорошей точкой зрения. Апплет WeChat должен получить элемент формы, изменить значение, а затем присвоить значение переменной, объявленной в данных.

14. Понимание пользовательской панели вкладок мини-программы?

(1) Сначала настройте панель вкладок в App.json, включите пользовательскую настраиваемую панель вкладок, создайте файл пользовательской панели вкладок после настройки, в это время содержимое файла будет создано в нижней части апплета и добавьте код структуры. tabBar в index.wxml, добавьте конфигурацию данных и методы событий в index.js

15. Как установить кеш для апплета WeChat?

(1) wx.getStorage/wx.getStorageSync считывает локальный кеш и записывает данные в кеш через wx.setStorage/wx.setStorageSync, где интерфейс с суффиксом Sync указывает на синхронный интерфейс

16. Как программа WeChat Mini отправляет сетевые запросы?

(1) wx.request(объект объекта) используется для отправки сетевых запросов

17. Жизненный цикл мини-программы разделен на три части.

(1) Уровень приложения:

① onLaunch: Запускается при инициализации мини-программы, глобально запускается только один раз.

② onShow: срабатывает, когда апплет запускается или переключается на основной экран.

③ onHide: срабатывает, когда апплет переходит в фоновый режим с переднего плана (например, при переключении на другое приложение).

④ onError: срабатывает, когда в апплете возникает ошибка сценария или сообщается об ошибке в вызове API.

(2) Уровень страницы:

① onLoad: выполняется при загрузке страницы только один раз.

② onShow: выполняется при отображении страницы, выполняется несколько раз.

③ onReady: выполняется при первом отображении страницы, только один раз.

④ onHide: выполняется, когда страница переходит на задний план с переднего плана.

⑤ onUnload: выполняется, когда страница выгружается.

(3) Уровень компонента:

① создан (важно): срабатывает, когда экземпляр компонента только что создан

② прикреплен (важно): срабатывает после полной инициализации компонента и входа в дерево узлов страницы

③ готово: выполняется после завершения компоновки компонента в слое представления.

④ перемещено: выполняется, когда экземпляр компонента перемещается в другое место в дереве узлов.

⑤ отсоединенный (важно): срабатывает после того, как компонент покидает дерево узлов страницы

⑥ Ошибка: выполняется всякий раз, когда метод компонента выдает ошибку.

18. Как сделать мини-программу WeChat модульной?

(1) Некоторый общий код можно извлечь в отдельный файл js в виде модуля. Модули могут открывать интерфейсы только через module.exports или exports.

(2) В файлах, которые должны использовать эти модули, используйте require для введения общего кода.

19. Где находятся все API WeChat и несколько кратких представлений

(1) Глобальный объект апплета: wx, все API хранятся в объекте wx

20. В каком порядке запускаются жизненные циклы приложения и страницы WeChat Mini Program?

21. Использование пользовательских компонентов программы WeChat Mini

(1) Создайте папку компонентов

(2) Создайте файл компонента (например, вкладки) и создайте новый компонент в виде компонента

(3) Установите компонент: true в json-файле вкладок

(4) В файле json страницы компонента, которую необходимо импортировать, напишите пару ключ-значение в usingComponent, имя компонента: путь

(5) Напишите теги на нужных страницах

Примечание. Имена меток узлов WXML могут состоять только из строчных букв, дефисов и знаков подчеркивания.

22. Использование канала событий апплета WeChat

Канал событий мини-программы WeChat (шина событий) — это механизм для связи между несколькими страницами или компонентами мини-программы путем запуска событий. При переходе на целевую страницу или компонент через метод wx.navigateTo или wx.redirectTo передайте параметр events и назначьте его объекту канала событий.

23. Как использовать библиотеку компонентов vant для апплетов

Если небольшая программа создана с использованием js в качестве языка сценариев веб-страницы и отсутствует файл package.json, команду npm использовать нельзя.

Сначала инициализируйте npm с помощью npm init, чтобы сгенерировать файл package.json.

Загрузите библиотеку компонентов через официальный сайт vantweapp npm

Создайте npm с помощью инструментов в апплете WeChat

Удалите «style»: «v2» в app.json, чтобы избежать путаницы со стилями, вызванной тем, что стиль апплета выше, чем vant.

Зарегистрируйте компоненты, используя компоненты в app.json.

24. Передача апплетов WeChat от родителей к детям

父传子: атрибуты привязываются через теги родительских компонентов, а дочерние компоненты получают атрибуты в свойствах.

子传父: через настраиваемое событие привязки родительского компонента, привязку собственной функции, а дочерний компонент передает this.triggerEvent('имя события привязки родительского компонента', параметры передачи) в функцию привязки родительского компонента в функции триггера.

25. Вход для авторизации в мини-программе

26. веб-просмотр

web-view — это компонент веб-браузера, который можно использовать для размещения веб-страниц и который автоматически заполняет всю страницу.