NewWxComment

NewWxComment — это компонент для комментариев в небольших программах WeChat, который можно использовать бесплатно без необходимости в дополнительном личном или облачном сервере. Он решает проблему, связанную с необходимостью регистрации домена, получения разрешения и покупки облачного сервера. Компонент совместим с Valine, что позволяет объединить комментарии на ПК и мобильных устройствах. Это особенно полезно для тех, кто использует систему комментариев Valine и хочет разработать компонент для комментирования статей в небольших программах.

Цель создания плагина

Автор хотел создать универсальную платформу для блогов, ориентированную на мобильные устройства, и начал с разработки небольших программ WeChat. Уже завершена разработка компилятора для блогов и компонента для комментариев (который объединяет Valine), а также начата разработка классических тем для небольших программ. После выпуска классических тем ожидается, что больше разработчиков присоединятся к проекту и создадут дополнительные плагины и темы, чтобы объединить ПК и мобильные устройства.

Компилятор для блогов Hexo уже открыт для использования и напрямую связывает статические блоги с небольшими программами WeChat. Демо можно найти, выполнив поиск «Маленький белый AI блог» в WeChat.

Особенности

• Независимый плагин, который может быть легко интегрирован в проект небольшой программы.
• Объединение системы комментариев Valine для унификации комментариев на ПК и небольших программах.
• Удобный пользовательский интерфейс и взаимодействие.
• Связывание с информацией о пользователях WeChat для отображения аватара и имени пользователя.
• Поддержка функции статистики чтения статей.
• Поддержка функции ответа на комментарии, то есть возможность оставлять дочерние комментарии.
• Поддержка отображения эмодзи.
• Поддержка разбивки комментариев на страницы.
• Настройка параметров разбивки на страницы для комментариев.
• Встроенная функция получения общедоступной информации о пользователях WeChat.
• Поддержка двух тем: светлой и тёмной.
• Совместимость с различными моделями устройств, включая iPhone 11.

Протестированные модели устройств

iPhone 6s Plus, iPhone 11/XR, iPad 4 Pro, Redmi 6 Pro.

Скриншоты

На рисунке показан результат интеграции NewWxComment в конкретный блог. Эффект комментариев на ПК можно увидеть на сайте xiaobaiai.net.

Быстрое начало работы

Обратите внимание, что шаги 1–3 можно пропустить, если у вас уже настроена система комментариев Valine.

1. Зарегистрируйте учётную запись LeanCloud и создайте приложение.
2. Войдите в свою учётную запись LeanCloud, перейдите по ссылке https://leancloud.cn/docs/weapp-domains.html и добавьте домен в конфигурацию вашего сервера для небольшой программы WeChat.
3. Установите AppID и AppSecret для вашей небольшой программы WeChat:
   • Войдите в WeChat Developer Platform, перейдите в «Настройки» > «Разработка» и получите AppID и AppSecret.
   • Перейдите в LeanCloud «Консоль» > «Компоненты» > «Социальные сети» и сохраните AppID и AppSecret для «Небольших программ WeChat».
4. Клонируйте демонстрационный проект NewWxComment (демонстрационный проект уже включает компонент NewWxComment).

$ git clone https://github.com/yicm/NewWxComment.git

5. Скопируйте AppID и AppKey LeanCloud в соответствующие места в файле NewWxComment.js.

AV.init({
    appId: 'ваш AppID LeanCloud',
    appKey: 'ваш AppKey LeanCloud',
});

6. В файлах index.wxml и index.json небольшой программы уже включён компонент NewWxComment. index.wxml

<NewWxComment id="NewWxComment" articleTitle="О себе" articleURL="/2019/20190727172958.html" contentLen='1' articleID="/2019/20190727172958.html"></NewWxComment>

index.json

"usingComponents": {
    "NewWxComment": "/component/NewWxComment/NewWxComment"
}

В index.js добавьте функцию для получения данных о комментариях при достижении конца списка:

// Функция для получения данных о комментариях после достижения конца списка
// Добавить функцию для получения комментариев
onReachBottom: function() {
    let newWxComment = this.selectComponent('#NewWxComment');
    newWxComment.onReachBottom();
}

Если количество комментариев отображается неправильно, проверьте стиль app.js container:

.container {
    padding: 0 24rpx;
    background-color: #fff;
    font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}

Свойства компонента NewWxComment:

articleTitle: Заголовок статьи для комментария
articleURL: Ссылка на статью для комментария (без домена сайта)
homeURL: Путь к главной странице небольшой программы
pageSize: Количество комментариев на каждой странице, по умолчанию 5
contentMinLen: Минимальное требуемое количество символов для комментария, по умолчанию 2
contentMaxLen: Максимальное ограничение количества символов для комментария, по умолчанию 300
articleID: Уникальный идентификатор статьи для комментария
websiteURL: Домен сайта (необязательно, по умолчанию https://xiaobaiai.net)
theme: Тема оформления, поддерживает только light или dark

Демонстрация

Небольшая программа «Маленький белый ИИ блог» использует компонент NewWxComment для демонстрации:

Задачи

• Поддерживать список лайков.
• Поддерживать выделение ответов автора.
• Поддерживать фильтрацию нежелательных комментариев.
• Поддерживать совместное использование плаката.
• Поддерживать функцию пожертвований.
• ...

Лицензия

Mulan PSL v1 (http://license.coscl.org.cn/MulanPSL).