AOTOO-XQUERY

Данный проект представляет собой упрощённый проект мини-программы, включающий в себя некоторые полезные пользовательские интерфейсы (UI) и демонстрационные примеры мини-программ. Проект периодически обновляется, приглашаем следить за обновлениями и ставить лайки на GitHub.

• На основе оригинальной мини-программы WeChat;
• Динамическое создание шаблонов;
• Встроенная поддержка HTML и Markdown.

Дополнительная документация.

Примеры мини-программ:

miaoui:

.

Календарь Magic Taro:

.

Полный список DEMO:

• Многофункциональный компонент календаря;
• Универсальный компонент фильтра списка;
• Компонент формы;
• Компоненты Markdown/HTML;
• Всплывающее окно с возможностью любого позиционирования;
• Оценочный компонент с поддержкой вибрации;
• Выпадающее меню;
• Двунаправленный слайдер;
• Индексный список;
• Геолокация Tencent;
• Фруктовый барабан;
• Складной компонент панели;
• Двухколоночный навигационный компонент (слева направо);
• Двухколоночный навигационный компонент (сверху вниз);
• Колесо фортуны;
• Панель навигации;
• Лотерея;
• Замок жестов.

Как использовать:

1. Используйте aotoo-hub для удалённой установки queryui через фреймворк (на основе компиляции webpack).
2. Клонируйте этот проект и откройте его с помощью инструмента разработки мини-приложений WeChat.
3. Внедрите основной исходный код в другие проекты и ознакомьтесь с инструкциями ниже.

Каталог исходного кода:

css — стили для календаря, документации и форм.
pages — базовые примеры.
app.json — регистрация глобальных компонентов.
components —
    ├─ aotoo — обязательный основной код ✔︎.
    ├─ actionSide — компонент всплывающего окна.
    ├─ form — компонент формы.
    ├─ calendar — компонент календаря.
    ├─ markit — компонент документации.
    ├─ modules ✔︎ — файлы в этом каталоге являются сборниками компонентов.
    └─ templates ✔︎ — шаблоны.

Основные каталоги/файлы:

Объедините следующие основные каталоги и файлы в свой проект.

components — 
    ├─ aotoo — основной код должен быть включён ✔︎.
    ├─ markit — компонент документации ✔︎.
    └─ templates — шаблоны ✔︎.

Обязательно определите основные глобальные компоненты в app.json.

"usingComponents": {
  "ui-item": "/components/aotoo/item/index",
  "ui-list": "/components/aotoo/list/index",
  "ui-tree": "/components/aotoо/tree/index",
  "ui-markit": "/components/markit/index"
}

Встроенные компоненты:

1. Markdown.
2. HTML.
3. Item.
4. List.
5. Tree.
6. Image.

Встраиваемые компоненты:

Встраиваемые компоненты можно удобно вставлять в конфигурации для создания сложных структур. Все встроенные компоненты могут использоваться как встраиваемые. Также можно создавать собственные встраиваемые компоненты.

1. @item.
2. @list.
3. @tree.
4. @url.
5. @md.
6. @html.

Пример встраивания компонента списка в компонент элемента:

Pager({
  data: {
    itemConfig: {
      title: 'Заголовок списка',
      "@list": {
        listClass: 'list-class-name'
        data: [...]
      }
    }
  }
})

/*
wxml шаблон
<ui-item item="{{itemConfig}}" />
*/

Пример внедрения компонента Markdown в компонент элемента:

Pager({
  data: {
    itemConfig: {
      title: 'Заголовок списка',
      "@md": {
        content: `...`
      }
    }
  }
})

/*
wxml шаблон
<ui-item item="{{itemConfig}}" />
*/

Поддержка по желанию, спасибо!