Введение

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

Архитектура программного обеспечения

Система блогов

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

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

При нажатии на статью вы переходите к экрану сведений о статье. На этом экране используется плагин towxml для рендеринга HTML-текста Markdown. Рендеринг выглядит довольно красиво. В настоящее время поддерживается только текст и изображения, то есть формат текста и изображений. Позже будут открыты аудиофайлы и другие файлы.

В правом нижнем углу статьи можно поставить лайки и оставить комментарии. При разработке функции комментариев мы долго обсуждали, следует ли размещать её в нижней части статьи или на отдельном экране. Поскольку многие технические статьи длинные, пользователи могут не захотеть читать их до конца, и некоторые ценные комментарии могут остаться незамеченными. Поэтому мы решили создать отдельный экран для комментариев, который можно открыть, нажав на значок комментария в правом нижнем углу. Затем вы можете нажать кнопку «написать комментарий» внизу, чтобы открыть окно для ввода комментария.

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

Вы можете перейти на главную страницу и написать статью, нажав «Написать» в навигационной панели на экране сведений о статье. Вы можете просматривать свои опубликованные статьи на своей домашней странице, организованной по категориям. Щёлкнув статью, вы перейдёте к экрану сведений о ней. Длительное нажатие на статью позволяет выбрать изменение или удаление статьи.

На навигационной панели экрана записи вы также можете перейти на свою домашнюю страницу и писать статьи. Ваша домашняя страница организована по категориям, и вы можете просматривать все свои опубликованные статьи. Щёлкнув статью, вы переходите к экрану её сведений. Длительное нажатие позволяет вам выбрать изменение или удаление статьи. На экране записи вы можете писать статьи, используя метод «один абзац — одно изображение», где первый абзац должен содержать изображение в качестве основного изображения статьи. После написания первого абзаца вы можете продолжить, добавив второй абзац без изображения.

Здесь стоит объяснить, почему мы используем этот метод написания нескольких абзацев. Мы знаем, что обычно пишем статьи в формате Markdown на компьютере, используя двойной экран для одновременного редактирования и предварительного просмотра. Однако на мобильных устройствах это невозможно из-за небольшого размера экрана. Как мы можем реализовать формат текста и изображений? Поэтому я придумал компромиссный метод: я разработал экран записи как несколько абзацев текста и изображений, где первая статья требует загрузки изображения в качестве основного изображения, которое будет использоваться в статье. Когда первый абзац готов, можно добавить второй абзац, но без необходимости загружать изображение. Эффект аналогичен изображению ниже. При публикации статьи определённый алгоритм автоматически преобразует текст и изображение в HTML-код Markdown для сохранения. Это также позволяет использовать плагин towxml для отображения содержимого статьи.

После завершения написания статьи вы можете предварительно просмотреть её, нажав кнопку предварительного просмотра в правом верхнем углу. Предварительный просмотр точно такой же, как и после публикации. Фактически, когда вы просматриваете статью, содержимое преобразуется в HTML-код Markdown с использованием того же алгоритма, а затем отображается с помощью плагина towxml.

Здесь мы столкнулись с небольшой проблемой: при редактировании статьи нам нужно вручную преобразовать введённый текст и загруженные изображения в HTML-текст, чтобы сохранить их. При редактировании статьи необходимо разделить текст и изображения на отдельные массивы. Этот процесс обратного анализа занимает 40 строк кода, но мне потребовалось всё утро, чтобы успешно проанализировать его. Вот код:

Системы друзей и чатов

Существует два способа добавления друзей: один — через экран сведений о статье, где вы можете щёлкнуть изображение профиля автора, чтобы перейти на домашнюю страницу автора и добавить автора в друзья; другой — поиск друзей через поле поиска вверху экрана друзей. Поиск друзей осуществляется путём ввода номера телефона пользователя, отправки запроса на добавление в друзья и просмотра запросов на добавление в друзья на экране сообщений в навигационной панели «Моя страница».

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

Щёлкнув друга, вы сможете войти в чат. Чаты являются мгновенными, и новые сообщения будут автоматически отображаться.

Щёлкнув изображение, отправленное другом, вы сможете просмотреть увеличенное изображение.

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

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

Раздел сообщений разделён на три категории: запросы на добавление в друзья, комментарии и лайки. Запросы на добавление в друзья обрабатываются после принятия или отклонения, становясь прочитанными сообщениями. Комментарии и лайки пока не поддерживают функцию установки прочитанного статуса, и можно только установить статус всех сообщений как прочитанных, выбрав «прочитать все» в нижней части. Выбор «прочитать всё» приведёт к исчезновению красного кружка.

Чтобы использовать функции системы друзей и чата, а также функцию написания статей, необходимо авторизоваться, привязав номер телефона. Весь проект, включая переднюю и заднюю часть, открыт на Code Cloud. Приглашаем вас присоединиться и поставить звезду. Адрес исходного кода:

https://gitee.com/mqzuimeng_admin/wx_blog.git

Приглашаем вас попробовать приложение. Если у вас есть предложения по улучшению, пожалуйста, свяжитесь со мной через WeChat.

Следите за обновлениями в общедоступной учётной записи: «Программист Чжоу Сяньшэн». В общедоступной учетной записи есть моя личная контактная информация и QR-коды технических групп.

Добро пожаловать в группу WeChat: «Команда программистов Чжоу Сяньшэна».