Фактическая разработка проекта WeChat Mini Program - Использовать wepy.mpvue.taro для создания эффективной мини -программы
Вес товара: ~0.7 кг. Указан усредненный вес, который может отличаться от фактического. Не включен в цену, оплачивается при получении.
Описание товара
Принцип этой книги практичен, и ее цель — эффективная разработка небольших программ.С помощью WePY, mpvue, Taro и других фреймворков читатели могут быстро освоить этапы и методы разработки небольших программ с нуля.Вся книга включает в себя не только внешний интерфейс мини-программ, но также включает в себя написание внутренней логики, призванной дать читателям возможность по-настоящему ощутить возможности разработки проектов мини-программ.Эта книга в основном разделена на три части. *Часть знакомит с компонентами и API мини-программы, а также с тем, как загрузить и использовать официальную платформу WePY.Часть D2 представляет собой фактическую борьбу с инфраструктурой WePY, включая разработку обычных небольших программ, таких как анкеты, датчики, отображение форматированного текста, загруженные файлы, Canvas и т. д. Часть D представляет собой практический пример двух часто используемых небольших программных фреймворков, mpvue и Taro, в том числе“ИсторияJR”, Разработка апплета тестирования созвездия.Эта книга подходит для читателей, которые хотят создавать и изучать небольшие программы, особенно для энтузиастов с нулевым уровнем программирования и новичков в разработке небольших программ. Читателям не обязательно понимать слишком базовые части. В этой книге основное внимание уделяется востребованным функциям и включено большое количество примеров популярных небольших программ. Эта книга может быстро повысить интерес читателей, тем самым позволяя читателям глубже изучить соответствующие знания.
Глава D1 Вход в мини -программу 1
1.1 Происхождение апплета 1
1.1.1 Что такое мини-программа 2
1.1.2 Разработка мини -программы 3 3
1.2 Шаг D при разработке небольших программ 4
1.2.1 Регистрация мини-программы 4
1.2.2 Настройка мини-программы 6
1.3 Инструменты разработки мини-программ 8
1.3.1 Загрузка и установка 8
1.3.2 Иллюстрация часто используемых функций 11
1.4 Бой 1: Привет, мир 13
1.4.1 Написание ссылок на страницы 13
1.4.2 Написание нового контента страницы 15
1.5 Что такое WePY 17
1.5.1 Почему стоит выбрать WePY 17
1.5.2 Установка среды разработки WePY 18
1.6 Реальный бой 2: версия Hello World 20 для WePY
1.6.1 Создать проект Helloworld 20
1.6.2 Ввод кода страницы 23
1.7 Итоги и упражнения 26
1.7.1 Резюме 26
1.7.2 Упражнение 26
Глава D2 Мини-программный компонент 27
2.1 Просмотреть контейнер апплета 27
2.1.1 Компоненты на основе Z: вид 28
2.1.2 Область просмотра с возможностью прокрутки: просмотр с прокруткой 28
2.1.3 Картинки в карусели: swiper 28
2.1.4 Контейнер подвижного представления: movable-view 29
2.1.5 За пределами нативных компонентов: Cover-View и Cover-Image 30
2.2 Основные компоненты мини-программы 32
2.2.1 Компонент значка: значок 32
2.2.2 Текстовый компонент: текст 33
2.2.3 Компонент форматированного текста: форматированный текст 34
2.2.4 Компонент индикатора выполнения: прогресс 34
2.2.5 Компонент формы: форма 35
2.2.6 Важный компонент кнопки: кнопка 36.
2.3 Медиа-компоненты и компоненты навигации 37
2.3.1 Навигационный компонент: навигатор 37
2.3.2 Компонент изображения: изображение 38
2.3.3 Видеокомпонент: видео и API: wx.createVideoContext 43
2.3.4 Компонент камеры: камера и API: wx.createCameraContext 45
2.4 Компонент карты и компонент холста 50
2.4.1 Компонент карты: карта 50
2.4.2 Компонент Canvas: Canvas и API: wx.createCanvasContext 51
2.5 Поддержка HTML и поддержка открытых возможностей, обеспечиваемая мини-программами 54
2.5.1 Область открытых данных: открытые данные 55
2.5.2 Поддержка HTML и других веб-страниц: веб-просмотр 56
2.5.3 Источник дохода застройщика: объявление 58.
2.5.4 Мини-программа поможет вам подписаться на официальный аккаунт: официальный аккаунт 59
2.6 Итоги и упражнения 60
2.6.1 Резюме 60
2.6.2 Упражнение 60
Глава D3 Программа API 61
3.1 Mini Program Basics—&-API сетевых запросов 62
3.1.1 Инициирование запроса 62
3.1.2 Загрузка и скачивание 64
3.1.3 WebSocket 65
3.2 Практический бой: простой апплет сокетного чата 68
3.2.1 Разработка на стороне сервера 68
3.2.2 Развитие клиентов 70
3.3 Основной API мини -программы—&-Обновления и информация об устройстве 77
3.3.1 Автоматическое обновление мини-программ 77
3.3.2 Получение информации о пользовательском терминале 79
3.3.3 Получение информации по мини-программам 81
3.3.4 Получение статуса Wi-Fi устройства 81
3.3.5 Получение устройства акселерометра, гироскопа и направления 83
3.3.6 Получите устройство Bluetooth и NFC 84
3.3.7 API экрана устройства 86
3.3.8 Сканирование устройства и вибрация 87
3.3.9 Получение буфера обмена устройства 88
3.3.10 API для получения местоположения устройства 88
3.4 Переход к странице маршрутизации и кэширование данных API 90
3.4.1 Переход между страницами 90
3.4.2 API добавления и получения кэша данных 92
3.4.3 API удаления кэша данных 94
3.5 Exic Program Interface Interactive API 95
3.5.1 Окно подсказки и модальное окно 95
3.5.2 Настройка одинарного D панели навигации 97
3.5.3 Настройки панели вкладок 98
3.5.4 Шрифты и прокрутка 101
3.5.5 Другой дисплей API 102
3.6 СМИ и документы 102
3.6.1 API, связанный с изображениями 102
3.6.2 API 104, связанный с видео
3.6.3 API 105, связанный с записью
3.6.4 API, связанный с файлами 106
3.7 Другие открытые интерфейсы 108
3.7.1 API обслуживания клиентов 108
3.7.2
3.7.3 Адрес доставки 111
3.8 Подведение итогов и упражнения 112
3.8.1 Тихонг 112
3.8.2 Упражнение 112
Глава D4 Серверная часть мини-программы 113
4.1 Начало работы с написанием Backend API 113
4.1.1 Выбор серверной технологии 114
4.1.2 Настройка серверной технической среды 114
4.1.3 Простая структура 117
4.1.4. Создание простого сервера платформы 117
4.1.5 Использование MySQL 120
4.1.6 Описание серверной технологии 121
4.1.7 Создание маршрута 121
4.2 Построение пользовательской системы 122
4.2.1 Логика пользовательской системы 122
4.2.2 Кодирование реализации пользовательской системы 124
4.2.3 Тестирование пользовательских систем 132
4.3 Другие часто используемые серверные API 135
4.3.1 QR-код API 135
4.3.2 API спортивных данных 140
4.3.3 Получение пользователей 148
4.4 Подведение итогов и упражнения 151
4.4.1 Резюме 151
4.4.2 Упражнение 151
Глава D5 Практический бой: мини-программа анкеты 152
5.1 Совет мини -программы Введение 152
5.1.1 Зачем необходимо анкетирование 153
5.1.2 Анализ спроса 153
5.2 Специальное кодирование приложения-анкеты 154
5.2.1 Получить письмо 154
5.2.2 Написание небольших программ 162
5.3 Подведение итогов и упражнения 168
5.3.1 Резюме 168
5.3.2 Упражнение 168
Глава D6. Практический бой: встряхните игру 169
6.1 Анализ проекта 169
6.1.1 Анализ функции встряхивания 170
6.1.2 Shake Yi Shao План проекта 171
6.1.3 Определение интерфейса встряхивания 172
6.2 Код проекта 173
6.2.1 за кулисами небольшой программы 173
6.2.2 1 Стр. 185 встряхивания апплета
6.2.3 Страница заполнения приложения Shake 188
6.2.4 Встряхните трясущуюся страницу мини-программы 194
6.2.5 Встряхните рейтинговый список мини-программ 202
6.3 Подведение итогов и упражнения 204
6.3.1 Резюме 204
6.3.2 Упражнение 205
Глава D7. Практический бой: API распознавания изображений Baidu 206
7.1 Анализ проекта 206
7.1.1 Популярные технологии идентификации 207
7.1.2 Функциональный дизайн 207
7.1.3 Проектирование маршрутизации 208
7.2 Специальное кодирование 208
7.2.1 Фоновое кодирование системы 208
7.2.2 Функция загрузки изображения 215
7.2.3 Мини-программа анализа и отображения изображения 219
7.3 Подведение итогов и упражнения 221
7.3.1 Резюме 221
7.3.2 Упражнение 221
Глава D8 Практический бой: мини-программа публикации текстовой информации 222
8.1 Требования к проекту 222
8.1.1 Функциональное подразделение 223
8.1.2 Раздел маршрутизации 223
8.2 Специальное кодирование 224
8.2.1 Реальная реализация 224
8.2.2 Создание нового мини-проекта программы 233
8.2.3 реализация на 1 странице 234
8.2.4
8.2.5 Написание стиля на одну страницу 239
8.2.6 Реализация деталей статьи стр. 241
8.2.7 Отображение содержания статьи 243
8.2.8 Отображение комментариев к статье 246
8.2.9 Функция, подобная статье 248
8.3 Подведение итогов и упражнения 251
8.3.1 Резюме 251
8.3.2 Упражнение 251
Глава D9. Практический бой: использование холста для рисования изображений 252
9.1 Как использовать Canvas для рисования и создания изображений 252
9.1.1 Почему необходимо рисовать и генерировать картинки 253
9.1.2 Необходимые факторы для рисования и создания изображений 253
9.2 Практический бой 1: Нарисуйте необходимые картинки в мини-программе 254.
9.2.1 Анализ спроса 254
9.2.2 Создайте небольшую программу 255
9.2.3 Создание компонентов 256
9.2.4 Домашняя страница изображения 257
9.2.5 Рисование изображений 261
9.3 Практический бой 2: Популярный апплет для создания фона мобильного телефона 262
9.3.1 Планирование и проектирование системы 262
9.3.2 Проектирование фоновой маршрутизации 264
9.3.3 Фоновое кодирование системы 264
9.3.4 Написание страницы мини-программы 266
9.3.5 Мини -программная логика написания 269
9.3.6.
9.4 Итоги и упражнения 275
9.4.1 Резюме 275
9.4.2 Упражнение 275
Глава D10 Практический бой: реализация с использованием mpvue“ИсторияJR” мини -программа 276
Фреймворк 10.1 mpvue, поддерживающий синтаксис Vue.js 276
10.1.1 Основы фреймворка mpvue 277
10.1.2 Настройка среды mpvue framework 277
10.1.3 Быстрый старт с mpvue 280
10.1.4 Описание проектной документации 281
10.2 Создать с помощью mpvue“ИсторияJR” мини -программа 285
10.2.1 Планирование проекта 285
10.2.2 Страница нового проекта 287
10.2.3 Запись логики интерфейса запроса 288
10.2.4 Подготовка к показу проекта 291
10.2.5 Поколение проекта 295
10.3 Подведение итогов и упражнения 296
10.3.1 Резюме 296
10.3.2 Упражнение 297
Глава D11 Практический бой: использование Таро для реализации мини-программы тестирования расстановок 298
11.1 Платформа Taro, поддерживающая синтаксис React 299
11.1.1 Что такое Таро 299
11.1.2 Быстрый старт с Taro 300
11.2 Использование платформы Taro для создания апплета тестирования созвездия 303
11.2.1 Описание интерфейса 303
11.2.2 Создание нового апплета Таро 304
11.2.3 Домашняя страница 305 тестового апплета Constellation
11.2.4 Компоненты домашней страницы апплета Constellation Test 307
11.2.5 Подробности теста созвездия, стр. 310
11.3 Компиляция проекта и поколение 314
11.3.1 Компилировать в небольшую программу 314
11.3.2 Компиляция в апплет Baidu 315
11.3.3 Скомпилируется в ZFB Applet 318
11.3.4. Компиляция в другие небольшие программы 321
11.4 Подведение итогов и упражнения 321
11.4.1 Резюме 321
11.4.2 Упражнение 321. Показать всю информацию.
★? Структурированный метод разработки небольших программ
★Меньше объездов и эффективное развитие
★Принцип этой книги практичен, но цель состоит в том, чтобы эффективно разрабатывать небольшие программы.
★ С помощью фреймворков WePY, mpvue и Taro вы можете быстро освоить этапы и методы разработки небольших программ с нуля.
★Вся книга включает не только интерфейсный интерфейс мини-программы, но и написание внутренней логики.
★ Направлен на то, чтобы позволить читателям по-настоящему ощутить возможности разработки небольшого программного проекта.
К практическим проектам относятся:
★ Проект Weype:
-Анкетный апплет
- Игра «Встряхни»
- API распознавания изображений Baidu
- Апплет публикации текста и информации
- Используйте Canvas для рисования изображений
★ Project MPVUE:
-“ИсторияJR” мини -программа
★ Taro Project:
- Апплет тестирования созвездия
6.1.1 Анализ функции встряхивания 6.2 Кодирование проекта Этот раздел начинается с конкретного кодирования проекта. Бэкэнд-сервер проекта по-прежнему использует инфраструктуру Laravel.В то же время, поскольку примеры в этой главе не включают содержимое входа пользователя, в этом примере также указан адрес для онлайн-тестирования.6.2.1 Серверная часть приложения Shake по-прежнему написана в предыдущем проекте Laravel. (1) Планирование маршрута проекта для этого проекта.Согласно определению маршрутизации, приведенному в предыдущем разделе, 1 сначала определяет новый файл маршрутизации в файле RouteServiceProvider.php. Код следующий. //Встряхиваем запрос пользователя Route::prefix('shake/api') - middleware('api') - пространство имен($this-namespace) - группа(base_path('routes/shake.php')); (2) Создайте новый файл Shake.php в папке маршрутов и определите маршрут, указанный в предыдущем разделе файла. Код следующий.?php Route::group(['namespace' ='ShakeApi'], function () { // Участвуем в Route::post('activity/join','IndexController@join'); // Создать route :: post ('activity/create','IndexController@create');
6.1.1 Анализ функции Shake
Для функции встряхивания в мини-программе на самом деле требуется только простой датчик J, то есть датчик ускорения.
Датчик ускорения — это датчик, который может измерять ускорение. Обычно он состоит из массового блока, демпфера, упругого элемента, чувствительного элемента и схемы регулировки. В процессе ускорения датчик измеряет силу инерции на блоке массы и использует закон D-секунды Ньютона для получения значения ускорения. В зависимости от чувствительных компонентов датчика распространенные датчики ускорения включают емкостные, индуктивные, тензорезисторные, пьезорезистивные, пьезоэлектрические и т. д.
Вообще говоря, датчик ускорения в оборудовании мобильного телефона может обнаруживать изменения угла наклона вверх, вниз, влево и вправо и может использоваться для мобильных игр, фотографии, определения положения устройства и т. д.
Апплет инкапсулирует датчик ускорения, поэтому разработчикам не нужно управлять самим датчиком ускорения. Им нужно вызвать всего три метода, чтобы получить состояние акселерометра мобильного телефона перед D и значение переднего угла D. Эти 3 метода:
l wx.stopAccelerometer (объект объекта)
l wx.startAccelerometer (объект объекта)
l wx.onAccelerometerChange(обратный вызов функции)
Основная функция встряхивания — определить, трясется ли текущее состояние телефона или стабильно.То есть, когда пользователь заходит на предыдущую страницу:
l Используйте wx.startAccelerometer(объект Object), чтобы включить запись и мониторинг датчика.
l Отслеживайте изменение статуса с помощью API wx.onAccelerometerChange(function callback).Если считается, что тряска, то сумма будет увеличена, время ожидания закончится и данные будут возвращены.
l Когда интерфейс закрывается или игра завершается, вызовите wx.stopAccelerometer(объект Object), чтобы отключить датчик ускорения.
Все запросы в Shake могут получить доступ к серверу, используя опрос интерфейса вместо сокета. Это также облегчает написание кода интерфейса для внутреннего сервера.Используя метод опроса, J обязательно воспользуется таймером в апплете и т. д.
Таймеры мини-программ аналогичны таймерам JavaScript и обычно делятся на два типа.
D. Установите таймер для выполнения зарегистрированной функции обратного вызова в соответствии с указанным периодом (в миллисекундах) для повторного выполнения.Код следующий.
номер setInterval (обратный вызов функции, задержка номера, любой отдых)
// использовать
let timer = setInterval(
()=>{
// Код, который необходимо выполнить
},1000
)
Код функции, выполняемый с использованием этого таймера, можно отменить с помощью метода ClearInterval(number интервалID).Другими словами, для приведенного выше кода, который выполняется раз в секунду, выполнение можно остановить с помощью следующего кода.
// Передаем идентификатор таймера, который нужно отменить
clearInterval(timer)
Второй вариант — установить таймер и выполнить зарегистрированную функцию обратного вызова по истечении времени таймера или отложить выполнение на определенный период времени. Код следующий.
число setTimeout (обратный вызов функции, задержка номера, любой отдых)
// использовать
let timer = setTimeout (
()=>{
// Код, который необходимо выполнить
},1000
)
Аналогично, этот таймер задержки выполнит код, указанный функцией, после задержки в 1 секунду. Существует также соответствующий метод остановки выполнения кода.Используйте методclearTimeout(number timeoutID), чтобы отменить выполнение таймера задержки. Код следующий.
// Передаем идентификатор таймера, который нужно отменить
clearTimeout (timer)
Функции опроса и отложенного запуска проекта в этой главе будут широко использовать эти два таймера.
6.1.2 Shake Yishuo Plange Project
В этом примере не используется логин пользователя openid и другой контент. Он оценивается только по коду, введенному пользователем, и коду участия, введенному вначале. Номер теста можно использовать для завершения разработки мини-программы без регистрации настоящего APPID.
При входе в мини-программу вам необходимо выбрать, создавать ли новую игру или участвовать в игре. Вам необходимо ввести две части информации о пользователе:
l 1 — это первое имя пользователя, которое используется для связи с пользователем и идентификации пользователя в будущем.
l Второй — это код участия, который означает, в какой игре-шейкере участвовал пользователь или какой код участия в игре был создан.
Для настройки игрового времени требуется значение менее 1 минуты, а базовая единица — секунды. Вы можете использовать это время, чтобы установить время окончания игры.Это значение может быть установлено только один раз, один игровой раз для одного кода участия, и может быть установлено только лицом, ранее создавшим код участия в игре.
Время запуска игры контролируется кнопкой на устройстве создателя, а другие устройства запрашивают и считывают интерфейс посредством опроса с постоянным временем.Поскольку это не игра с сильным характером реального времени, такая как онлайн-игры, небольшая задержка не повлияет на игровой процесс.
Когда все тайминги этой машины истечет, соответствующие значения данных будут возвращены на сервер, которые могут быть записаны в базу данных в течение допустимого времени.Если допустимое время превышено, результаты будут считаться недействительными.
Наконец, все данные передаются на каждое участвующее устройство. Полная логика показана на рисунке 6-1.
6.1.3 Определение интерфейса Shake
Согласно плану раздела 6.1.2, приложению Shake требуются следующие интерфейсы:
l Интерфейс для получения информации о мобильном телефоне и информации о коде участия, когда пользователи участвуют в мероприятиях.В этом интерфейсе также будет получена продолжительность активности.
l Интерфейс, связанный с информацией о мобильном телефоне, кодом участия и продолжительностью, когда пользователи создают действия.
l Интерфейс, в котором пользователь нажимает, чтобы начать игру.
l Интерфейс, через который все пользователи получают информацию о начале игры.
l Пользователю возвращается интерфейс потрясения связанных данных.
l После завершения передачи всех данных пользователь возвращает номер рейтинга участия, код и количество встряхиваний кода участия на основе информации о коде участия.
На стороне внутреннего сервера можно предоставить шесть интерфейсов. Конкретные интерфейсы и описания показаны в Таблице 6-1.
6.2 Код проекта
Этот раздел начинается с конкретного кодирования проекта. Бэкэнд-сервер проекта по-прежнему использует инфраструктуру Laravel. В то же время, поскольку примеры в этой главе не включают содержимое входа пользователя, в этом примере также указан адрес для онлайн-тестирования.
6.2.1 Встряхните фон небольшой программы
Все еще написано в предыдущем проекте Laravel.
(1) Планирование маршрута проекта для этого проекта. Согласно определению маршрутизации, приведенному в предыдущем разделе, 1 сначала определяет новый файл маршрутизации в файле RouteServiceProvider.php.Код следующий.
// Встряхиваем запрос пользователя
Route::prefix('shake/api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/shake.php'));
(2) Создайте новый файл Shake.php в папке маршрутов и определите маршрут, указанный в предыдущем разделе файла.Код следующий.
Route::group(['namespace' => 'ShakeApi'], function () {
// Участвовать
Route:: post('activity/join','IndexController@join');
// Создать
Route:: post('activity/create','IndexController@create');
// Интерфейс запуска игры
Route:: get('activity/start/{create_id}','IndexController@start');
// Пользователь получает стартовый интерфейс
Route:: get('activity/getStart/{join_id}','IndexController@getStart');
// Данные об участии пользователей в активности
Route::post('activity/saveData','IndexController@saveData');
// Данные рейтинга
Route:: get('activity/getData/{code}','IndexController@getData');
});
Все эти шесть связанных интерфейсов пересылают запросы маршрутизации соответствующему IndexController. Среди них действия по участию, действия по созданию и окончательные данные отправки представлены в форме POST, а остальные — в форме GET, а их параметры помещаются непосредственно в код пути.
Отображать всю информацию