Это второй день моего участия в Gengwen Challenge.Подробности мероприятия смотрите:Обновить вызов

предисловие

Иногда мне кажется, что родной пользовательский интерфейс апплета WeChat немного хуже, так что можем ли мы ввести трехстороннюю структуру? В этой статье в качестве примера рассматривается введение Vant, которое включает 8 шагов. Он используется одинаково, независимо от того, является ли он проектом облачной разработки или нет.

Этапы реализации

1. Откройте средство разработки апплета WeChat и войдите в проект. Щелкните правой кнопкой мыши файл корневого каталога проекта. Выберите Открыть в терминале. (обратите внимание на корневой каталог)

2. Введите npm init в командном окне. Затем все настройки выполняются по умолчанию, просто нажмите Enter.

3. Введите npm install в командном окне для сборки, после успешного завершения файлы package.json и package-lock.json будут сгенерированы в корневом каталоге.

4. Далее продолжайте установку фреймворка Vant, шаги можно выполнять в соответствии с официальным сайтом.van T-cont japan.git ee.IO/van T-we app/…

• 4.1 npm i @vant/weapp -S --production

• 4.2 npm i vant-weapp -S --production

• 4.3 Изменить app.json

• 4.4 Изменить файл project.config.json

5. Вернитесь в Инструменты разработчика WeChat и найдите «Сборка npm» в столбце «Инструменты». Подождите, пока сборка завершится успешно.

6. Наконец, мы хотим использовать модуль npm, находим флажок «модуль npm» в «Подробностях».

7. Используя компоненты Vant, введите компоненты в app.json или index.json.Подробнее см.Официальный сайт Vant, чтобы быстро начать работу

8. Чтобы использовать на странице, вы можете напрямую импортировать компонент.

         

Поскольку мой проект был построен по тестовому номеру AppId, он не разрабатывался с использованием облака. В результате после выполнения последующих шагов сообщается об ошибке! Сообщение об ошибке показано на рисунке (1); в это время я обнаружил, что каталог проекта отличается от каталога файла другого проекта, разработанного в облаке, с моим, поэтому файл не может быть найден. конкретная причина. Но я добился успеха в проекте облачной разработки, как показано на рисунке (2) ниже, шаги точно такие же, как написано выше.

из этого мы получаем结论, все пытаются использовать официальный AppId (то есть AppId после успешной регистрации на общедоступной платформе Mini Program). Избегайте неприятностей, чем дальше вы идете.

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

····················································· ･････････ ･･･

На следующий день я открыл инструмент разработчика WeChat и обнаружил, что проект с тестовым номером AppId снова в порядке, а сообщение об ошибке консоли исчезло. Это так неловко! Я не совсем понимаю, что происходит (если кто-то знает, пожалуйста, киньте мне ответ! Не смей говорить...). Непосредственно сверху, как показано ниже (3);

Рисунок (1): Сообщение об ошибке

Рисунок (2): Компоненты Vant успешно используются в облачных проектах разработки

Рисунок (3): Тестовый номер AppId успешно использует платформу Vant.

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