Описание

Это приложение, имитирующее Zhihu Daily, разработанное с использованием MUI и Vue, идеально подходит для новичков, чтобы быстро ознакомиться с разработкой на MUI.

Основные технологии: MUI + Vue.

Внимание: Vue поддерживает только Android версии 6.0 и выше!

Реализованные функциональные модули

• Чтение ежедневных новостей и тематических дневных выпусков
• Просмотр длинных и коротких комментариев к дневным выпускам
• Локальное хранение закладок дневных выпусков

Демонстрация функций

Главная страница и страница с подробностями

Меню и тематические дневные выпуски

Страница комментариев

Как запустить

1. Скачайте проект и используйте HBuilder для отладки на реальном устройстве.
2. Скачайте собранное приложение Android.

Используемые API

Анализ API Zhihu Daily от Xiao Liang## Структура проекта

│  index.html      Главная страница приложения
│  manifest.json   Конфигурационный файл
│  ....
├─css  
│    components.css  Глобальные стили компонентов Vue
│    iconfont.css    Стили шрифтов
│    imgload.css     Стили кэширования изображений
│    news.css        Стили, предоставленные Zhihu Daily
│    vue-loaders.css Стили плагина vue-loaders
│    ....
├─doc  Описание проекта
│   ....
├─fonts  Шрифты
│   ....     
├─html    
│    collection.html Страница закладок     
│    comment.html    Страница комментариев
│    detail.html     Страница с подробностями
│    menu.html       Страница меню
│    theme.html      Страница тематических дневных выпусков
├─img
│  ....
├─js  
│    components.js       Глобальные компоненты Vue
│    config.js           Конфигурация системы
│    imgload.js          Кэширование изображений
│    smoothscroll.js     Плагин плавного скролла
│    vue-loaders.umd.js  Плагин vue-loaders
│      ....

Логика страниц

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

Логика JS для главной страницы:

Логика обновления при прокрутке вниз:

Как происходит смена страниц

Подробная документация: MUI H5+

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

Этот пример кода не является идеальным с точки зрения элегантности, так как он ограничен традиционным подходом к разработке MUI. На главной странице я объединил множество контентов, что привело к некоторому беспорядку. Из-за недостатков компонентов MUI, приходится создавать свои собственные решения для некоторых задач. В целом: если вас интересует MUI, этот пример можно использовать как базовый пример для изучения разработки приложений с использованием MUI, но не рекомендуется углубляться в его изучение.

Дополнительная информация 2018/07

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

1. В списке ежедневных отчетов при чтении кэша возникает смещение изображений.
2. При использовании функции "Обновление при прокрутке вниз" для обновления нескольких элементов, некоторые из них не отображаются. (Проблема решается перезапуском приложения)
3. Кэширование списка ежедневных отчетов не имеет временных ограничений, что приводит к снижению производительности загрузки из-за избыточного кэширования. (Проблема решается ручной очисткой кэша приложения)Хотя я использую его ежедневно, из-за лени и разочарования в MUI, я не решил эти проблемы. В будущем я планирую разработать версию на RN (React-native) или мини-приложение, чтобы заменить этот.

После завершения этого DEMO, из-за бизнес-потребностей, я изучил и использовал IONIC3 и RN.

Вот сравнение, которое может быть полезным для тех, кто заинтересован:

IONIC3: Можно рассматривать как улучшенную версию MUI: ng4 (Angular4), SCSS, TypeScript, а также множество встроенных компонентов, которые обеспечивают схожие интерактивные реакции для iOS и Android. В основе лежит WebView, что позволяет в реальном времени отлаживать в браузере, но не поддерживает отладку на реальном устройстве.

RN: RN основывается на React и представляет собой чисто компонентный подход, что на один уровень выше по сравнению с IONIC и другими оболочками WebView. Пакетирование происходит напрямую в исходный код, что позволяет использовать множество встроенных компонентов и открытых компонентов. Сообщество активно, и количество пользователей значительно превышает IONIC3. Проблемы легко решаются. В RN CSS частично урезан, а стиль написания JS не так приятен, как в IONIC3. Разработка сильно зависит от открытых компонентов, что может ухудшить стабильность. Отладка в реальном времени в браузере не поддерживается, но поддерживается отладка на реальном устройстве, что позволяет избежать неожиданных ошибок.Я сам больше верю в будущее RN.

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

/* rem адаптивный */
@media screen and (min-width: 375px) {
    html {
        /* 375px размер iPhone6 как база 16px, 414px как 18px, 600px как 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39) !important;
        font-size: calc(16px + 2 * (100vw - 375px) / 39) !important;
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px, каждый 100 пикселей ширина увеличивает шрифт на 1px (18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586) !important;
        font-size: calc(18px + 4 * (100vw - 414px) / 586) !important;
    }
}
```@media screen and (min-width: 600px) {
     html {
         /* 600px-1000px, каждый 100 пикселей ширина увеличивает шрифт на 1px (20px-24px) */
         font-size: calc(125% + 4 * (100vw - 600px) / 400) !important;
         font-size: calc(20px + 4 * (100vw - 600px) / 400) !important;
     }
 }
 @media screen and (min-width: 1000px) {
     html {
         /* 1000px и далее, каждый 100 пикселей ширина увеличивает шрифт на 0,5px */
         font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000) !important;
         font-size: calc(22px + 6 * (100vw - 1000px) / 1000) !important;
     }
 }```  
  Примечание: взято с блога Zhang Xinxu. В этом проекте не используется.