OSCHINA-MIRROR/x1299906945-Mark

Марк

Это чисто развлекательный учебный проект, в котором время от времени записываются проблемы и идеи, возникающие при разработке. Проект периодически обновляется. Если у вас есть какие-либо предложения, пожалуйста, сообщите мне (issues). В проекте я упаковал некоторые компоненты, которые можно просмотреть в структуре проекта.

~~Все данные о фильмах взяты из API Douban (https://developers.douban.com/).~~ В настоящее время бесплатный доступ к поисковому интерфейсу Douban больше не предоставляется. Предоставленный мной интерфейс развёрнут на Vercel. Он не зарегистрирован и не может быть добавлен в бэкэнд WeChat. В то же время проект предоставляет mock-данные для использования. Ограничения на разработку личных мини-программ слишком велики, и их невозможно полностью развернуть. Если вам нравится, вы можете клонировать проект и запустить его самостоятельно.

💥 Сканирование QR-кода для тестирования

🔱 Ветви Branches

main — использует облачную разработку Weixin Mini Program (https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html), без необходимости бэкэнда можно разработать полноценную мини-программу.
master — бэкэнд поддерживается LeanCloud Cloud Service (https://leancloud.cn/).
cdn-ui — без поддержки бэкэнда, все запросы являются HTTP-запросами к личному блогу статических файлов JSON.

Онлайн-диаграмма процессов

Примечание:

При использовании пользовательских компонентов Component (https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/) базовая версия библиотеки мини-программы должна быть 1.6.3 или выше.
При использовании wxParse (https://github.com/icindy/wxParse) базовая версия библиотеки мини-программы должна быть 1.6.6 или выше.
Мини-программа поддерживает двустороннюю привязку данных (https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html), базовая версия библиотеки 2.9.3 и выше.

🎨 Функции Features

Реализация входа в WeChat с помощью облачных функций.
Облачные функции реализуют ежедневные карточки задач по расписанию.
Облачные функции агрегируют запросы для реализации карточек коллекций.
Многоколоночная компоновка Grid.
Компоновка Grid реализует водопадную прокрутку.
Облачная функция извлекает GitHub Trending.
Фоновый звук на странице сведений.
Использование шаблонов и компонентов для реализации общих компонентов.
Анимированные свойства CSS3.

🐢 Кодекс поведения Code of conduct

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

CODE_OF_CONDUCT.md

🛠 Запуск Run

Клонируйте этот проект и откройте корневой каталог проекта с помощью инструмента разработки WeChat.

Установка зависимостей

yarn # or npm install

Меню инструментов → сборка npm.

Среда облачной разработки

После открытия среды облачной разработки синхронизируйте проект /cloudfunctions/ с облаком (см. инициализацию среды облачной разработки (https://developers.weixin.qq.com/miniprogram/dev/devtools/api-mock.html)). Измените app.js.

wx.cloud.init({
  traceUser: true,
  env: 'dev-oucwt' // Замените на свой собственный идентификатор среды облака
});

Примечание: при предварительном просмотре реальной машины необходимо включить отладку.

Mock API

См. официальную документацию (API Mock/правила импорта и экспорта (https://developers.weixin.qq.com/miniprogram/dev/devtools/api-mock.html)), импортируйте файл mock/mock.config.json (./mock/mock.config.json). Функция Mock, предоставляемая инструментом разработки, в настоящее время не поддерживает предварительный просмотр на мобильных устройствах. Инструмент разработки должен отключить проверку безопасности доменного имени, меню инструментов → подробности → настройки проекта → отметьте «не проверять безопасность доменного имени...» и сертификат HTTPS.

🪶 Заметки Notes

Vercel размещает Next для реализации GitHub Trending API.

Использование IconFont в мини-программе.

Пример использования таблицы ассоциаций в облачной разработке.

Мысли во время написания проекта.

Записывайте заметки во время работы.

Как использовать внешние шрифты в мини-программе.

Пользовательский компонент рейтинга мини-программы — реализация шаблона (точность 0,1).

Пользовательский компонент рейтинга мини-программы — реализация компонента (точность 0,1).

📐 Структура Structure

├── apis
├── assets
├── components  Компоненты Component
│    ├── cover-page Можно свернуть и закрыть половину экрана
│    ├── pre-image Предварительная загрузка изображения
│    ├── rating Рейтинг
│    └── tabs
├── cloudfunctions
├── pages
│    └── common  Шаблоны template
│        ├── actionsheet Меню операций
│        ├── cell Список элементов
│        ├── dropmenu Выпадающее меню
│        ├── loading Загрузка / загрузка дополнительных данных
│        ├── rating  Рейтинг
│        ├── share Нижнее меню общего доступа
│        ├── wxParse  Анализ богатых текстов, HTML и MD, базовая версия библиотеки mini-program 1.6.6 и выше
│        └── component.js  wux На основе шаблона для компонентов, написано довольно хорошо, стоит изучить
├── style
│    ├── weui.wxss
│    ├── animate.wxss Анимированный CSS
│    └── font-awesome.min.wxss Шрифты Font Awesome
├── utils
│    └── wxCloud.js Повторная упаковка облачных функций
├── app.js
├── app.json
└── app.wxss

Проблемы

Мини-программы не поддерживают глобальные компоненты, и каждый экран должен импортировать компоненты. Например, настраиваемое глобальное окно подсказки.

🔗 Ссылка Reference

Официальный стиль WeUI (https://github.com/Tencent/weui-wxss/).
Анализ богатых текстов, HTML и Markdown (https://github.com/icindy/wxParse).
Пользовательские компоненты на основе шаблонов (https://github.com/skyvow/wux). Предоставляется поддержка бэкенда облачными сервисами.
Официальная среда разработки облачных сервисов.
Официальное решение для мобильных мини-программ.