Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Шаблонные компоненты WeChat Mini Program, охватывающие основные потребности: включая компоненты слайдера (накладывающиеся слайдеры и т. д.), canvas (кольца, постеры, обрезка изображений и т. д.), map, echarts, CSS3 анимации, scroll-view, шаги, компоненты календаря, пользовательские tabbar + навигационную панель, анимацию загрузки, CSS градиенты, спрайты, водопад, выделение ключевых слов, историю поиска, ленивую загрузку изображений, тайминг и дебаунс, выбор индекса (например, городов), WeChat распределение подарков, дождь из подарков, анимацию появления меню, 3D облако, перетаскивание кнопок, маркетинговые компоненты (9-квадратные сетки и т. д.) и т. д. ! ( _Без UI компонентной библиотеки )##### Внимание: используемые изображения имеют образовательные цели и предназначены для обмена опытом. Пожалуйста, не используйте их в коммерческих целях. Мы не несем ответственности за любые юридические споры, возникшие из этого.### Это сборник компонентов WeChat Mini Program, охватывающий основные потребности. Этот выпуск является открытым исходным кодом, и в будущем я планирую переработать его и добавить новые компоненты, чтобы он стал UI-компонентной библиотекой, ориентированной на WeChat Mini Program и uniapp!
Открытие исходного кода — сложная задача. Если вам понравился проект, вы можете оставить ему Star, это будет стимулом для меня продолжать обновлять код. Спасибо за вашу поддержку.
2022! С Новым Годом 🎉 Всем!
2023! С Новым Годом 🎉 Новый год должен быть еще лучше!
2. Импортировать папку mini, импортировать среду разработки, и переключиться на свой APPID
Сводка функций
1. Главная страница для навигации по всем страницам (2021. 8. 15 добавлена навигация по страницам)
2. cal: страница календаря
3. demo/index: логистическая страница, до полной загрузки страницы отображается скелетный экран (требуется ручное управление), после загрузки данных, заменяется на реальный контент, demo/index2: добавлена новая запись псевдоэлемента.
4. dots: страница с пользовательскими индикаторами для слайдера
5. touchRemove: страница корзины с возможностью удаления слайдом влево
6. touchMove2: страница с возможностью удаления слайдом влево 2, использует компонент movable-area
7. cardCircle: реализация карт-кода в виде полукруга
9. pie: график в виде пирога и линейный график (wxcharts.js) с использованием echarts
10. charts/index: компонент ec-canvas, рекомендованный официальной документацией echarts для mini-programs, использует echarts.js
11. index: пользовательский компонент tabbar, использует cover-view для накладывания
12. getStar: система оценок от 1 до 5 звезд, соответствующие 'отлично', 'хорошо', 'средне', 'плохо', 'ужасно', при изменении оценки, обновляется поле с звездами
13.sendCode/index: пользовательский компонент стиля для input, (вставка текста не реализована, долгое нажатие для вставки не работает, баг требует улучшения)
14. sendCode/index2: пользовательский компонент для ввода кода подтверждения (v-code)+ добавлена фоновая картинка с размытием (filter: blur(10rpx);)+ добавлены треугольники, стрелки, прямоугольники, трапеции, дуги и другие стили
15. addImg: загрузка нескольких изображений wx. chooseImage()+ просмотр изображений wx. previewImage()+ загрузка файлов на сервер wx. uploadFile()
16. choseList: страница фильтрации (1. встроенный календарь выбора даты 2. переключение между вкладками 3. диалоговое окно справа для фильтрации, при превышении 4 данных, скрытие по умолчанию, возможность разворачивания)
17. charts/index: пользовательский стиль навигации "navigationStyle": "custom" для получения высоты капсул и навигационной панели, а также для создания пользовательских значков
18. scroll: scroll-view для заполнения оставшегося пространства, прокрутка выбирает соответствующую категорию, клик по категории осуществляет фиксацию на маркере
19. index2: пользовательская навигационная панель + swiper + добавленное диалоговое окно для прокрутки сообщений + слайдер вкладок слева
20.charts/index2: Реализация графика в виде пирога с использованием ECharts, canvas является встроенным компонентом, имеет высокий уровень, cover-view используется для накладывания, что позволяет накладывать map, video, canvas, camera, live-player, live-pusher. Добавлено использование cover-view для создания фиксированной панели вкладок в верхней части. Множественные cover-view имеют уровни, определенные порядком их появления на странице, страница, появляющаяся позже, имеет более высокий уровень! (существует баг, когда tooltip скрыт под нижними текстовыми элементами, требует решения)
21. another/choseGoods: числовые вычисления, включает math.min.js для решения проблем точности
22. choseAddress: выбор адреса, wx.chooseLocation(требует разрешения пользователя)+wx.chooseAddress (не требует авторизации пользователя, можно вызвать напрямую)
23. scroll/index3: Страница с подробным описанием товара, верхнее навигационное меню — это пользовательский tab (fixed)+двусторонний anchor (scroll-view реализует выбор соответствующего раздела при клике на tab, при прокрутке страницы выбирается верхнее навигационное меню). Добавлены новые стили для richText, регулярные выражения используются для соответствия. (Ситуация 1: richText без стиля, в этом случае стиль и класс можно добавить с помощью регулярных выражений, или определить стиль в rich-text или родительском элементе!)Ситуация 2: richText с стилем, в этом случае можно добавить только класс с помощью регулярных выражений)
24. another/mrovevideos: Страница с видео, пользовательский интерфейс для воспроизведения и остановки видео
25. another/swiper-threeD: Добавлены swiper+transform: scale(1) для реализации эффекта 3D-цилиндра, анимация для анимационных эффектов, 360-градусное вращение, прокрутка и другие эффекты
26. subPack/animationBox: Добавлены wx. createAnimation+css3: transform для создания эффекта пятилистника с помощью rotate+translate
27. another/circleRing/index: Добавлен компонент для рисования кругового сегмента с помощью интерфейса wx. createCanvasContext, уровень компонента высокий, cover-view имеет ограниченные возможности, используется wx. canvasToTempFilePath для преобразования в изображение и отображения, чтобы избежать проникновения (этот интерфейс был отозван, canvas2d поддерживает рендеринг на одном уровне)
28. subPack/canvas2d/index: Добавлен компонент для рисования кругового сегмента с прогрессом с помощью canvas2d, рендеринг на одном уровне, уровень canvas не проникает (оригинальный интерфейс wx. createCanvasContext был отозван)
29. another/scroll-x: Добавлены scroll-view+swiper для реализации прокрутки навигационного меню влево и вправо
30. subpack/loading/index: Добавлены 17 анимаций загрузки, которые можно использовать для других изменений, анимация для реализации
32. Раздел пакета csscase/conic-gradient/index: Добавлены конические градиенты CSS для реализации прогресс-бара, цветового диска, круговой диаграммы и других стилей
33. csscase/colorChange: Цветовой диск, обновлены два цветовых диска, последующее обновление градиентного цвета
37. Реализация истории поиска, localStorage для хранения первых пятнадцати записей, выбранная последняя запись помещается в начало массива
38. Реализация навигатора и связанных свойств, различие между hover-class и интерфейсом перехода страниц
39. Кнопка переключения в стиле печенья (input + label + псевдоэлементы)
40. Вращающиеся символы + перевернутые символы
41. Анимация ввода текста
42. Интересная страница 404
43. -webkit-clip-text реализует текст с градиентным фоном
44. scroll-view обёртывает одностраничный выбор и textarea, textarea имеет заданный id, связанный с scroll-into-view, что позволяет осуществлять позиционирование страницы к текстовому полю ввода
48. Обычная версия главной страницы магазина (пользовательская навигационная панель)
49.(Этот модуль был удален, если требуется, можно самостоятельно перейти на сайт Vant) Vant календарь с выбором нескольких дат (установка Vant шаг 1: npm init шаг 2: npm i @vant/weapp -S --production шаг 3: удалить "style": "v2" из app.json шаг 4: использовать npm модуль шаг 5: сборка npm)
50. Фоновое изображение в пределах одного экрана
51. Пользовательская actionSheet + сохранение изображения (включение разрешения -> направление пользователя на страницу настроек) требуется для запуска в режиме отладки.
52. Лампочка с анимацией колебания
53. Раскрытие и сворачивание текста
54. Раскрытие и сворачивание текста определённой высоты
персонализированный навигационный бар (точное позиционирование)
! введите описание изображения
! введите описание изображения##### Календарь Vant (выбор нескольких дат) (этот модуль был удален, если требуется, можно самостоятельно перейти на официальный сайт Vant)
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1102/104516_6f6ed9ce_8576727. png "экран. png")
фоновое изображение на весь экран
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1102/175157_e2eedfa3_8576727. png "экран. png")
сохранение авторизованных изображений
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1107/123530_a8e55a87_8576727. png "экран. png")
анимация колеблющегося лампочки
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1109/135245_a1043136_8576727. gif "лампочка. gif")
развертывание и сворачивание текста
! [введите описание изображения здесь](https://images. gitee. com/uploads/images/2021/1110/190031_ece1d834_8576727. png "screen_capture. png")
! [введите описание изображения здесь](https://images. gitee. com/uploads/images/2021/1111/193011_b672c847_8576727. png "screen_capture. png")
анимация переворота карточки
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1112/011030_44abb6b1_8576727. gif "Асад. gif")
подпись (SDK карт Google Maps)
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1114/235332_f44cc0cf_8576727. gif "123123. gif")
ввод с пользовательским стилем
! [введите описание изображения](https://images. gitee. com/uploads/images/2021/1115/191543_05224ce8_8576727. gif "Чипсы. gif")
Мы предоставим вам отзыв в течение 2 рабочих дней через внутреннее сообщение!
Заполните причину отчета внимательно и по возможности подробно опишите ее.
Выберите тип отчета
Отмена
Отправить
Обжалование ошибочного суждения
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
отменить
Создать
Введение
Пакет компонентов для小程序, охватывающий основные требования: включает компоненты слайдера (в том числе стек-слайдер), canvas (включая круговые диаграммы, постеры, обрезку изображений, рисование и т.д.), карты, различные типы диаграмм ECharts, CSS3 анимации, шаговые компоненты, компоненты календаря, пользовательские tabbar и навигационные панели, ...
Развернуть
Свернуть
##### Однонажатие для возврата в начало страницы
! 
/com/susuhhhhhh/su-sus-picture/raw/master/小程序/条纹背景.png)
##### Пользовательский стиль tabbar с использованием маски
##### Переключение вверх/вниз/влево/вправо (transform)
! 
Опубликовать ( 0 )