источник
С момента пребывания в Nuggets в 2017 году и до того, как я начал вести блог в прошлом году, я всегда чувствовал, что Nuggets делают большую работу в техническом сообществе, и я хочу внести в нее свой вклад в дополнение к написанию статей.
В настоящее время основными входными портами Nuggets являются приложение, ПК, подключаемый модуль и h5.
- Функция приложения большая и полная, но ее нужно скачать и установить.
- С ПК неудобно пользоваться мобильным телефоном, и нет возможности где-то просматривать и ловить рыбу
- Версия H5 очень полная, но трудно найти запись, чтобы войти после выхода, что не очень удобно
Подводя итог, это также причина, по которой наша группа диггеров задумала сделать укороченную версию апплета.
дизайн продукта
Во-первых, все программисты, и у них нет хорошего продуктового мышления или профессионального вмешательства в продукт, они могут только разработать эту небольшую программу, основываясь на своем обычном опыте.
Я обсуждал, какие функции должен предоставить новый апплет и что делать.Помимо блога Nuggets, какой значимый контент может быть вам предоставлен?
После двух раундов мозгового штурма и после обращения к различным программам (связанным с блогами и контентом) мы выбрали интернет-информацию в качестве основного входа, чтобы в то время, когда все рыбачат, помимо чтения блогов, они также могли видеть Интернет Есть больше горячей информации внутри, чтобы убить время.
Итак, есть следующий прототип первой версии
Креативность и стиль домашней страницы позаимствованы у Bad Review Daily, и я хотел бы выразить здесь свою благодарность отраслевому исследованию Bad Review.
Во-вторых, мы думаем, что приложение Nuggets, в качестве большого и всеобъемлющего приложения, необходимо предоставить полную версию функций, но в реальном использовании, таких как интерфейс разработки, это может сосредоточиться только на модулях, связанных с передним - И не слишком много обращают внимание на задневские модули, такие как Java, Python и т. Д. Затем после выбора заинтересованного вами модулей вы можете сделать страницу достаточно кратко, то есть вы можете видеть только модули, которые нам нужны вместо всех модулей на домашней странице.
На первом этапе, согласно группе пользователей, мы сначала выбрали следующие модули, и в будущем мы будем постепенно улучшать больше функций.
Это нормально срезать углы так громко (ручная собачья голова).
Перечень основных функций, выполненных на первом этапе, выглядит следующим образом:
- Активно сканируйте основную новостную информацию каждого Интернета каждый день
- Случайным образом получите 5 основных информационных дисплеев дня на главной странице, нажмите, чтобы переключиться на другой случайный контент.
- Список информации и детали завершены (загрузка страницы должна быть завершена)
- Горячие точки и детали самородков завершены (загрузка страниц должна быть завершена)
- Генерация графиков обмена горячими блогами Nuggets
Небольшая разработка программы
Раньше я использовал Taro 1.0 и Remax, для сравнения, синтаксис при рендеринге очень удобен, поэтому в этот раз в качестве разработки апплета выбрал Taro 3. Также есть некоторый опыт и моменты в разработке апплета, которыми можно поделиться с фронтендом. студенты. Поделитесь некоторыми.
В настоящее время многотерминальный фреймворк условно делится на два режима: рендеринг и предварительная компиляция.Вы можете выбрать сами.Как правило, размер пакета фреймворка при рендеринге будет больше, чем при прекомпиляции.
рендеринг уценки
Поскольку содержимое самородков — это синтаксис уценки, мы также захватываем содержимое уценки, как разобрать синтаксис уценки и отобразить его на странице — тоже проблема.
Стоимость разбора уценки самостоятельно немного высока, мы используем реакцию Taro 3.0 и нативные плагины апплета.towxmlСуществует метод сосуществования для решения этой проблемы.Конкретные примеры не представлены здесь слишком много.Вы можете перейти на официальный сайт, чтобы проверить.Если у вас есть какие-либо вопросы, вы можете оставить сообщение и связаться со мной.В принципе, вы можете следовать учебник.
рендеринг больших данных
Первая версия была выпущена на прошлой неделе, но эффект был неудовлетворительным.
Во-первых, рендерится слишком много контента, и беглость резко падает. В отличие от H5, когда setData апплета слишком велик (официальный максимум отображения не должен превышать 1 м), это приведет к зависанию всей страницы, что серьезно повлияет на интерактивный опыт.
Но некоторые посты в блогах — это настоящие товары первой необходимости.Содержимое уценки превышает 4 М, что намного превышает ограничение в 1 м для одного setData. В это время, в дополнение к низкой скорости рендеринга, страница будет чувствовать себя очень застрявшей.
Как показано на рисунке выше, поскольку виртуальному списку нужна фиксированная высота, а апплет обеспечивает более хлопотную операцию dom, для справки используется идея виртуального списка, а содержимое блога загружается в виде псевдовиртуального списка. После экранирования содержимого уценки разделите на группы по 10. Визуализированный вид принимает текущий вид, а также лицевую и обратную стороны вместе, всего страниц 3. При скольжении вниз или вверх содержимое предыдущей или следующей страницы будет перезагружено.
В настоящее время все еще есть некоторые проблемы в просмотре, например, некоторый уценочный контент, полученный от Nuggets, не может быть полностью разобран, кроме того, когда скользящая загрузка слишком быстрая, все равно будет зависание. Мы решим эти проблемы как можно скорее, чтобы предоставить студентам хороший опыт.
Создать общий образ
В апплете есть 3 способа создания персонализированной картинки для обмена.
- Холст напрямую рисовать
- С помощью функции веб-просмотра h5, используя метод промежуточной страницы, используйте html2canvas для прямого преобразования отображаемой страницы в холст.
- Генерируется в фоновом режиме, получено во внешнем интерфейсе
Ну и по разным причинам мы выбрали первый, самый хлопотный для лицевой части, непосредственно рукописный холст. Затем по разным причинам две разные диаграммы совместного использования разработаны следующим образом.
Есть изображение для предварительного просмотра:
Нет превью изображения:
В последнее время я был немного занят, и у меня нет времени вести блог, поэтому я напрямую позаимствовал контент двух братьев выше, чтобы создать общую картинку.
Когда возникает проблема с изображениями и данными аватара, которые мы получаем из интерфейса Nuggets, например, перехват или не указан адрес загрузки апплета, мы напрямую используем режим без создания изображения предварительного просмотра, чтобы поделиться картой.
Аналогично, если ссылку на аватарку невозможно получить нормально, автоматически будет использоваться режим собачьей головы, а в следующей версии будет выбран более профессиональный аватар ==!
На более позднем этапе учащимся могут быть открыты различные шаблоны схем обмена, и это зависит от того, смогу ли я PUA прожить наших студентов-дизайнеров.
В настоящее время QR-код общего изображения вводится непосредственно в апплет, а QR-код сведений будет обновлен в следующей версии.Сканирование может напрямую перейти на страницу сведений.
Особая благодарность
Текущие члены команды мини-программы:
@Kerwin_,@ и ушиодноклассникиФоновые данныеработа, которую нужно сделать
@молодой и молодойодноклассники какДизайн и материалы предоставлены UI
Капитан @Captain,@отличная арка Как особый опыт тех небольших программ, предоставляя советы и PUA
напиши в конце
Люди часто жалуются на различные мелкие проблемы и опыт Наггетов, но только после того, как они действительно примут участие в разработке, они смогут понять различные проблемы и трудности, которые возникнут при проектировании и разработке продукта.
Поскольку в проекте нет тестового одноклассника, если у вас есть какие-либо вопросы или предложения в процессе использования апплета, пожалуйста, оставьте сообщение или свяжитесь со мной в любое время, чтобы связаться с CookieBoty.
2021, вперед.