Сезон поиска работы, предварительное собеседование для вас | Техническое эссе Nuggets

JavaScript браузер Апплет WeChat Vue.js HTML CSS

предисловие

В последнее время многие друзья поменяли работу, чтобы найти работу. Я могу только молча поддержать их в своем сердце, чтобы они нашли хорошую работу. Эта книга предварительных интервью дается моим друзьям. В ней в основном рассказывается о некоторых часто используемых знаниях в front-end. , даже если я ошибаюсь, друзья мои, даже если вы их поправите, сами заодно пересмотрите знания. В основном делится на следующие аспекты:

  • css и html
  • javascript
  • vue
  • Апплет WeChat

css и html

1. Роль типа документа? Разница между стандартным режимом и режимом совместимости.

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

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

2. Что такое встроенные элементы? Что такое блочные элементы?

Каждый элемент имеет атрибут diaplay, который определяет тип элемента.Например, значением по умолчанию для блочных элементов является блок, а встроенный элемент — встроенный.

Встроенный элемент: span a u i b img input select. . .

Элементы блочного уровня: div p ul li ol h1 h2. . .

3. Расскажите о разнице между ссылкой на стиль и импортом.

ссылка принадлежит html и напрямую вводится в html, а импорт вводится в css, импортировать можно только css

Ссылка уже вводится при непосредственном импорте страницы, а импорт необходимо вводить при импорте CSS, а производительность относительно низкая.

импорт предлагается в CSS2.1 и может быть распознан только в IE5 или более поздних версиях, а ссылка — это тег html, который не имеет проблем с совместимостью;

4. Каковы новые возможности HTML5? Как отличить html от html5

HTML5 добавил много вещей, таких как:

Некоторые семантические теги навигационного заголовка, нижнего колонтитула

холст для рисования

видео и аудио элементы для медиа

Локальное офлайн-хранилище localStorage долго хранит данные, данные не теряются после закрытия браузера, а данные sessionStorage автоматически удаляются после закрытия браузера;

Элементы управления формы, календарь, дата, время, электронная почта, URL-адрес, поиск

Различие между html5 и html:

Его можно отличить по упомянутому выше типу документа или по тегам.

5.html семантическое понимание:

Семантика означает, что структура html более четкая, что удобно для парсинга браузера, SEO-поиска, а также делает код более понятным и простым в обслуживании.

6. Создайте горизонтальную линию толщиной 1 пиксель, не используя сверло.

<div style="height: 1px;background:red;overflow:hidden;"></div

7. Реализовано два блока со свойством css, чтобы сделать один блок слева и один блок справа и в одну строку

 <div style="width: 100px;height: 100px;background:red;float: right;"></div>    
<div style="width: 100px;height: 100px;background:blue;"></div>

8. CSS метод вертикального и горизонтального центрирования

Используйте позиционное позиционирование: преимущество не зависит от размера окна, то есть ширина и высота не фиксированы.

{
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50%;
    margin-top: -50%;
}

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

Вы также можете использовать transform: translate(-50%, -50%); не нужно знать ширину и высоту

Позиционирование также можно использовать, если ширина и высота фиксированы.

{
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Вы также можете использовать флекс

{
    display: flex;
    justify-content: center;
    align-items: center;
}

Или используйте последнюю сетку, родительский элемент должен добавить атрибут сетки

{
    align-self: center;
    justify-self: center;
}

Еще одним недостатком использования центрирования таблицы является то, что если родительский блок имеет ширину и высоту 100%, необходимо добавить display:table;

{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

8. Очистить поплавок

Лучший способ очистить поплавок — использовать :after

:after { 
clear:both;
content:'';
display:block;
width:0;
height:0;
}

Вы также можете сначала создать пустой элемент, чтобы очистить поплавок.

.clear{ 
clear:both; 
height:0; 
line-height:0; 
font-size:0; 
}

Вы также можете добавить атрибут переполнения к родительскому элементу.

.over-flow{ overflow:auto; zoom:1;  }//zoom:1;是在处理兼容性问题

9. Представьте блочную модель css

Существует два типа: т.е. блочная модель и блочная модель w3c.

Блочная модель: содержимое, отступы, поля, границы;

Отличие: содержательная часть IE учитывает границы и отступы;

10.position имеет несколько значений

  • absolute создает абсолютно позиционированный элемент, позиционированный относительно первого родительского элемента, значение которого не является статическим.
  • фиксированное абсолютное позиционирование, позиционированное относительно окна браузера
  • реактивное относительное позиционирование для нормального позиционирования элемента
  • статическое значение по умолчанию, без позиционирования
  • inherit наследует свойство position от родительского элемента

11.css создает треугольники

{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

12. Зачем инициализировать стиль css

Из-за проблем совместимости браузеров разные браузеры имеют разные значения по умолчанию для некоторых тегов.Если CSS не инициализирован, часто будут различия в отображении страниц между браузерами.

Самый простой метод инициализации: * {padding: 0; margin: 0;} (настоятельно не рекомендуется)

13. CSS добавляет элементы псевдокласса

:nth-child :after :befor :checked :disable

14. Новые возможности css

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

javascript

15.js основные типы

js имеет пять основных типов: логическое значение строки число null неопределенный специальный тип: объект

Добавлен символ (уникальный и неизменный тип данных после создания)

16.js базовая спецификация

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

17. Определите функции

объявление функции имя функции() {}

выражение функции var name = function(){}

новый экземпляр (обычно не используется)

18. Цепочка прототипов

  • Проще говоря, каждая пара объектов будет внутренне инициализировать прототип свойства.Если у объекта нет этого свойства, он будет искать прототип на прототипе, а затем сам найдет прототип.

19.js наследование

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

Цепочка областей видимости 20.js

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

21. это указывает на

это указывает на непосредственного вызывающего абонента

это указывает на новый объект

В случае, если это указывает на объект этого IE события в attachEvent, это указывает на глобальное окно

текущий объект, к которому это относится

22.нулевой и неопределенный

null означает, что объект определен и значение равно null;

undefined означает, что значение не существует.

null==undefined true

23.eval

При синтаксическом анализе строк вам следует избегать использования eval, который является небезопасным и очень требовательным к производительности (2 раза, один раз проанализированный в инструкции js и один раз выполненный), вы также можете преобразовать строки JSON в объекты JSON.

24. Объект окна и объект документа

  • Объект окна относится к окну, открытому браузером.
  • Объект document представляет собой доступную только для чтения ссылку на объект Documentd (объект документа HTML), свойство объекта окна.

25. Что такое замыкание? Функция закрытия

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

характеристика:

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

26. Что такое строгий режим js

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

27. Как создать аякс

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
    function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);
            }
        };
    }

28. Разница между синхронным и асинхронным

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

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

29. Управляйте нодами дома

  • createEelement() конкретный элемент
  • creatTextNode() создает текстовый узел
  • appendChild() добавляет
  • removeChild() удалить
  • replaceChild() заменить
  • вставить дочерний элемент () вставить

30. Методы массива

push() pop() unshift() shift() splice() indexOf() sort() concat() jion() slice() reverse() include()

31. Измените это на точку

.call() .apply() .bind()

32. В чем разница между jquery.extend и jquery.fn.extend?

jquery.extend добавляет метод класса в класс jquery, что можно понимать как добавление статического метода

jquery.fn.extend: jquery.fn = jquery.prototype в исходном коде, поэтому расширение jquery.fn заключается в добавлении функций-членов в класс jquery. Использование:

Расширение jquery.extend нужно вызывать через класс jquery, а расширение jquery.fn.extend, все экземпляры jquery можно вызывать напрямую

33. Объем

Область действия Каждый метод имеет наибольшую область действия — окно.

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

Область поиска — от текущего поиска до предыдущего поиска.

34. Политика одинакового происхождения

То же доменное имя Тот же порт Тот же протокол

35. Что такое коды статуса http? Что значит представлять?

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

200 OK Нормальная информация о возврате

201 Created Запрос выполнен успешно, и сервер создал новый ресурс

202 Accepted Сервер принял запрос, но еще не обработал его.

301 Перемещено навсегда Запрошенная страница была окончательно перемещена в новое место.

302 Найдено временное перенаправление.

303 См. Другое Временное перенаправление и всегда используйте GET для запроса нового URI.

304 Not Modified Запрошенная страница не была изменена с момента последнего запроса.

400 Bad Request Сервер не понимает формат запроса, и клиент НЕ ДОЛЖЕН пытаться снова сделать запрос с тем же содержимым.

401 Unauthorized Запрос не авторизован.

403 Запрещено Запрещено.

404 Not Found Ресурс не найден, как сопоставить URI.

500 Internal Server Error Самая распространенная ошибка на стороне сервера.

503 Служба недоступна Сервер временно не может обработать запрос (возможно, он перегружен или обслуживается)

36. Страница от входного URL до отображения загрузки страницы завершена, что произошло в этом процессе? (Чем подробнее процесс, тем лучше)

1. Браузер откроет поток для обработки запроса, и если URL-адрес будет проанализирован и признан протоколом http, он будет обработан в соответствии с веб-методом;

2. Вызовите соответствующий метод в ядре браузера, например, метод loadUrl в WebView;

3. Получите IP-адрес веб-сайта через разрешение DNS, установите UA и другую информацию для отправки второго запроса GET;

4. Провести сеанс протокола HTTP, и клиент отправляет заголовок (заголовок запроса);

5. Войдите в веб-сервер на веб-сервере, таком как Apache, Tomcat, Node.JS и другие серверы;

6. Введите развернутые серверные приложения, такие как PHP, Java, JavaScript, Python и т. д., чтобы найти соответствующую обработку запроса;

7. Конец обработки возвращает заголовок.Если браузер обращался к нему и в кеше есть соответствующий ресурс, он будет сравниваться со временем последней модификации сервера.Если он непротиворечив, он вернет 304;

8. Браузер начинает скачивать html-документ (заголовок ответа, код состояния 200) и при этом использует кеш;

9. Устанавливается дерево документов и указывается тип файла MIME (например, css, js) в соответствии с запросом тега, и одновременно устанавливается файл cookie;

10. Страница начинает отображать DOM, JS обрабатывает DOM в соответствии с DOM API, выполняет привязку событий и т. д., и отображение страницы завершено.

vue

37. Понимание мввм

MVVM — это сокращение от Model-View-ViewModel.

  • Model Представляет модель данных, и бизнес-логика для изменения данных и манипулирования ими также может быть определена в модели.
  • ViewПредставляет компонент пользовательского интерфейса, который отвечает за преобразование модели данных в отображение пользовательского интерфейса.
  • ViewModelЧтобы отслеживать изменения в данных модели, управлять поведением представления и обрабатывать взаимодействие с пользователем, это просто объект, который синхронизирует представление и модель и соединяет модель и представление.
В архитектуре MVVM нет прямой связи между View и Model, но через ViewModel.Взаимодействие между Model и ViewModel является двунаправленным, поэтому изменения данных View будут синхронизированы с Model, а изменения данных модели. Он также будет немедленно реагировать на представление.


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

38.жизненный цикл vue

  • beforeCreate(перед созданием) до начала наблюдения за данными и событий инициализации
  • created(После создания) Полное наблюдение за данными, работа свойств и методов, события инициализации, свойство $el не отображалось
  • beforeMount(перед загрузкой) Вызывается перед началом монтирования, при первом вызове соответствующей функции рендеринга. Пример завершил следующую конфигурацию: скомпилируйте шаблон, сгенерируйте html из данных и шаблон в данных. Обратите внимание, что HTML-код еще не смонтирован на странице.
  • mounted(после загрузки) Вызывается после того, как el заменяется вновь созданным vm.$el и монтируется на экземпляре. Экземпляр завершил следующую настройку: замените объект DOM, на который указывает атрибут el, скомпилированным выше html-содержимым. Завершите рендеринг html в шаблоне на html-странице. Во время этого процесса выполняется Ajax-взаимодействие.
  • beforeUpdate(перед обновлением) Вызывается перед обновлением данных, перед повторным рендерингом и исправлением виртуального DOM. Дальнейшие изменения состояния могут быть сделаны в этом хуке без запуска дополнительного процесса повторного рендеринга.
  • updated(после обновления) Вызывается после повторного рендеринга и исправления виртуальной модели DOM из-за изменений данных. При вызове DOM компонента обновляется, поэтому можно выполнять операции, зависящие от DOM. Однако в большинстве случаев следует избегать изменения состояния в течение этого времени, так как это может привести к бесконечному циклу обновлений. Этот хук не вызывается во время рендеринга на стороне сервера.
  • beforeDestroy(перед уничтожением) Вызывается перед уничтожением экземпляра. Экземпляр по-прежнему полностью доступен.
  • destroyed(после уничтожения) Вызывается после уничтожения экземпляра. После вызова все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены. Этот хук не вызывается во время рендеринга на стороне сервера.

39. Принцип реализации двусторонней привязки данных в Vue: Object.defineProperty()

Vue в основном реализует двустороннюю привязку данных:Сочетание шаблонов издатель-подписчик с перехватом данныхпуть, черезОбъект.defineProperty()Чтобы захватить установщик и получатель каждого свойства, публикуйте сообщения подписчикам при изменении данных и запускайте соответствующий обратный вызов слушателя. При передаче простого объекта Javascript экземпляру Vue в качестве параметра данных Vue будет перебирать его свойства, превращая их в геттеры/сеттеры с помощью Object.defineProperty . Пользователи не видят геттеры/сеттеры, но внутри они позволяют Vue отслеживать зависимости и уведомлять об изменениях при доступе к свойствам и их изменении.

Двусторонняя привязка данных Vue использует MVVM в качестве точки входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных своей собственной модели через Observer, а также анализирует и компилирует инструкции шаблона через Compile (в Vue используется для анализа { {}}), и, наконец, используйте наблюдатель для создания коммуникационного моста между наблюдателем и компилятором, чтобы добиться изменения данных -> обновление просмотра; изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных.

39. Передача параметров между компонентами Vue

  • Родительские и дочерние компоненты передают значения
    • Родительский компонент передается дочернему: дочерний компонент получает данные через метод props;
    • Дочерний компонент передается родительскому компоненту: метод $emit передает параметры
  • Передача данных между неродительскими и дочерними компонентами, одноуровневые компоненты передают значения
    • eventBus предназначен для создания центра событий, который эквивалентен транзитной станции, которую можно использовать для передачи и приема событий. Проект относительно небольшой, целесообразнее использовать этот.
    • Вы также можете использовать vuex

40. Реализация маршрутизации Vue: режим хеширования и режим истории

  • хэш-режим:В браузере символ "#", символы после # и # называются хешем, и читаются они с помощью window.location.hash;
    • Возможности: хотя хэш присутствует в URL-адресе, он не включается в HTTP-запрос, используется для управления действиями браузера и бесполезен для обеспечения безопасности на стороне сервера.Хэш не перезагружает страницу.

  • режим истории:history использует новые функции HTML5 и предоставляет два новых метода: pushState(), replaceState() может изменять стек истории браузера, а событие popState отслеживает изменения состояния.

41. В чем разница между Vue и React?

  • Тот же пункт:
React использует специальный синтаксис JSX, а Vue.js также рекомендует писать специальный формат файла .vue при разработке компонентов.У него есть некоторые соглашения по содержимому файла, и оба должны быть скомпилированы перед использованием; центральная идея одна и та же : все является компонентом, экземпляром компонента. Они могут быть вложены друг в друга; все они предоставляют разумные функции-ловушки, позволяющие разработчикам настраивать свои требования к обработке; ни один из них не имеет встроенных функций AJAX, Route и других в основной пакет, но загружается в виде плагинов, в разработке компонентов Оба поддерживают функции примесей.
  • разница:
Виртуальный DOM, используемый React, выполнит грязную проверку визуализированных результатов, Vue.js предоставляет в шаблоне инструкции, фильтры и т. д., что позволяет очень удобно и быстро управлять виртуальным DOM.

42. Хук-функция маршрутизации vue

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

beforeEach В основном есть 3 параметра to, from, next:

  • to: целевой объект маршрута, в который должен войти маршрут,
  • from: проложить маршрут, по которому уходит текущая навигация
  • next: функция должна вызывать хук разрешения метода. Эффект выполнения зависит от параметров вызова следующего метода. Вы можете контролировать скачок веб-страниц.

43. Что такое векс? как использовать? В каких функциональных сценариях он используется?

Состояние, которое используется только для чтения, централизовано в хранилище, способ изменения состояния — отправка мутаций, что является синхронной вещью, асинхронная логика должна быть инкапсулирована в действиях.
Внесите store в main.js и выполните инжект. Создал новое хранилище каталогов, ...... экспорт.
Сценарии: в одностраничном приложении статус между компонентами, воспроизведение музыки, статус входа в систему, добавление в корзину
图片描述

  • state
Vuex использует единое дерево состояний, то есть каждое приложение будет содержать только один экземпляр хранилища, но единое дерево состояний и модульность не конфликтуют. Статус сохраненных данных нельзя изменить напрямую.
  • mutations
Методы, определенные мутациями, динамически изменяют состояние или данные в хранилище Vuex.
  • getters
Вычисляемые свойства, подобные vue, в основном используются для фильтрации некоторых данных.
  • action 
Действия можно понимать как метод асинхронной обработки данных путем изменения метода обработки данных в мутациях, то есть просто для асинхронной обработки данных. Уровень представления отправляет действия через store.dispath.

Апплет WeChat

44. Апплет WeChat имеет несколько файлов

WXML (язык разметки WeiXin) – это набор языков разметки, разработанный фреймворком. В сочетании с базовыми компонентами и системой событий можно построить структуру страницы. Интерьер в основном представляет собой набор компонентов, определяемых самим WeChat.
  • WXSS (таблицы стилей WeiXin) — это язык стилей, используемый для описания стилей компонентов WXML.
  • js логическая обработка, сетевой запрос
  • настройки апплета json, такие как регистрация страницы, заголовок страницы и tabBar.
  • app.json должен иметь этот файл. Без этого файла проект не может быть запущен, потому что платформа WeChat использует его как запись файла конфигурации, глобальной конфигурации всего апплета. Включая регистрацию страницы, сетевые настройки и цвет фона окна апплета, настройку стиля панели навигации и настройку заголовка по умолчанию.
  • app.js должен иметь этот файл, иначе он сообщит об ошибке! Но просто создайте этот файл, ничего писать не нужно, после этого мы можем отслеживать и обрабатывать функции жизненного цикла апплета и объявлять глобальные переменные в этом файле.
  • app.wxss Настроить глобальные CSS

45. Упаковка компонентов апплета WeChat

Вы можете увидеть мою последнюю статью об инкапсуляции компонентов апплета WeChat:juejin.cn/post/1

46. ​​Как мини-программы WeChat передают значения с событиями

Добавляем в HTML-элементы атрибуты data-* для передачи нужных нам значений, а затем получаем их через e.currentTarget.dataset или параметр param onload. Но данные - имена не могут иметь заглавные буквы и не могут хранить объекты

47. В чем разница между wxss и css апплета?

Введение изображения WXSS требует внешнего адреса цепи;

Нет тела; стили можно импортировать напрямую с помощью импорта

48. Как официальная учетная запись WeChat, связанная с мини-программой, определяет уникальность пользователя?

Используйте метод wx.getUserInfo, когда withCredentials имеет значение true, чтобы получить зашифрованные данные, которые содержат union_id. Серверная часть должна выполнять симметричное дешифрование

49. Как апплет WeChat получает информацию о пользователе

Апплет WeChat требует авторизации пользователя для получения информации о пользователе.Сначала пользователь входит в апплет WeChat с помощью API wx.login, а затем получает информацию о пользователе через API wx.getUserInfo.

50. Разница между апплетом WeChat и Vue

  • Жизненный цикл другой, жизненный цикл апплета WeChat относительно прост
  • Привязка данных также отличается. Привязка данных апплета Wechat должна использовать {{}}, vue напрямую: вы можете
  • Отображение и скрытие элементов, в vue используйте v-if и v-show для управления отображением и скрытием элементов, в апплете используйте wx-if и h idden для управления отображением и скрытием элементов.
  • Обработка событий отличается. В апплете для привязки событий используется bindtap(bind+event) или catchtap(catch+event).Vue: используйте v-on:event для привязки событий или используйте @event для привязки событий.
  • Двусторонняя привязка данных тоже отличается.В vue нужно только добавить v-model к элементу формы, а затем привязать соответствующее значение в данных.При изменении содержимого элемента формы соответствующее значение в данные также изменятся соответственно, что является очень хорошей точкой зрения. Апплет WeChat должен получить элемент формы, изменить значение, а затем присвоить значение переменной, объявленной в данных.

Значение тоже разное, в апплете значение получается через this.data.reason, а в vue значение получается через this.reason

Связь между родительским и дочерним компонентами также отличается

Ссылки на эту статью:сегмент fault.com/ah/119000001…

Большое спасибо автору выше.

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

адрес проекта:GitHub.com/Mr-M_BO/F…

Узнайте больше об акции по поиску работы Nuggets Autumn Recruitment 👉При приеме на работу осенью есть подарки за написание статей | Nuggets Technology Essay


Категории