All Projects → yicm → NewWxComment

yicm / NewWxComment

Licence: other
兼容 Valine (https://github.com/xCss/Valine) 评论组件,打通PC端和移动端评论,特别适合使用Valine评论系统且想同时开发小程序文章评论的同学们。有问题可以加微信号XEthanm讨论

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to NewWxComment

awesome-cml
awesome for chameleon
Stars: ✭ 66 (+34.69%)
Mutual labels:  miniprogram
MP-CU
MP-CU, colorui3.x 微信小程序原生版
Stars: ✭ 141 (+187.76%)
Mutual labels:  miniprogram
mp-progress
专注于小程序圆环形进度条的小工具
Stars: ✭ 72 (+46.94%)
Mutual labels:  miniprogram
wechat-miniprogram-dialog
微信小程序弹窗组件 wxapp dialog component
Stars: ✭ 50 (+2.04%)
Mutual labels:  miniprogram
mobx-wxapp
在小程序中使用mobx
Stars: ✭ 54 (+10.2%)
Mutual labels:  miniprogram
better-mock
Forked from Mockjs, Generate random data & Intercept ajax request. Support miniprogram.
Stars: ✭ 140 (+185.71%)
Mutual labels:  miniprogram
chameleon-runtime
chameleon 运行时框架
Stars: ✭ 32 (-34.69%)
Mutual labels:  miniprogram
wx2bd
微信和百度小程序的互转工具,脚本转换率目标为100%,持续更新中~~
Stars: ✭ 21 (-57.14%)
Mutual labels:  miniprogram
watch-behavior
小程序自定义组件扩展 behavior, watch 属性实现
Stars: ✭ 18 (-63.27%)
Mutual labels:  miniprogram
miniprogram-picker
微信小程序自定义组件Picker。本组件对微信小程序原生Picker组件进行了二次封装,开发者只需要提供固定数据结构的sourceData,再进行一些必要配置,本组件就可以自动帮助开发者处理联动逻辑。
Stars: ✭ 30 (-38.78%)
Mutual labels:  miniprogram
mpvue-gesture-lock
微信小程序手势解锁(Dom实现,避免小程序Canvas卡顿问题),基于 Mpvue
Stars: ✭ 34 (-30.61%)
Mutual labels:  miniprogram
miniprogram
微信小程序过审指南
Stars: ✭ 96 (+95.92%)
Mutual labels:  miniprogram
front-end-interview-guide
前端面试手册,含JS,HTML,CSS,算法和数据结构,计算机系统,计算机网络,浏览器,性能优化,前端工程化,数据库,前端框架,小程序,设计模式,数据可视化
Stars: ✭ 42 (-14.29%)
Mutual labels:  miniprogram
WX MultiTabList
微信小程序,多个Tab列表的上下拉刷新方案
Stars: ✭ 25 (-48.98%)
Mutual labels:  miniprogram
cheers-mp
Almost 零配置微信原生小程序脚手架,vue-cli般的体验~ (゜-゜)つロ 干杯~
Stars: ✭ 32 (-34.69%)
Mutual labels:  miniprogram
we-timer
🌈⏱ A beautiful interval timer wechat miniprogram | 一个好看的间隔计时微信小程序
Stars: ✭ 61 (+24.49%)
Mutual labels:  miniprogram
Undergraduate
🔧mini program of NJUPT | 南京邮电大学小程序
Stars: ✭ 138 (+181.63%)
Mutual labels:  miniprogram
laravel-miniprogram-poster
Use Laravel to building a miniprogram poster.
Stars: ✭ 72 (+46.94%)
Mutual labels:  miniprogram
weapp-template
🚀一个简单实用的微信小程序基础配置模板
Stars: ✭ 112 (+128.57%)
Mutual labels:  miniprogram
miniprogram-template
a wechat miniprogram template project the best practice with miniprogram-build 小程序模板最佳实践(TypeScript)
Stars: ✭ 46 (-6.12%)
Mutual labels:  miniprogram

NewWxComment

NewWxCommenthttps://github.com/yicm/NewWxComment是一个微信小程序的评论组件,结合BaaS提供商LeanCloud,无需其他另外的个人或者云服务器,就可以免费使用。解决了需要个人去注册域名、备案、购买云服务器的繁杂问题。且兼容Valinehttps://github.com/xCss/Valine评论,打通PC端和移动端评论,特别适合使用Valine评论系统且想同时开发小程序文章评论的同学们。

ps: 打造这个插件的目的在于本人想要打造一个类似hexo通用博客框架,且是一个移动端的框架,首先采用微信小程序实现,现已完成博文编译器的开发,评论插件的开发(打通PC端Valine插件),微信小程序的经典主题开发(未发布),期待发布经典主题后,有更多开发者加入,开发更多的插件和主题,一起打通PC端和"现在移动端",实现移动端的个人博客;

Hexo博客编译器已开源https://github.com/yicm/HMP,直接打通静态博客和微信小程序,Demo可微信搜索小白AI博客查看。

先提前“剧透”下经典主题首页,倾心打造:

image

特色

  • 独立插件,独立放入小程序项目即可使用
  • 打通Valine评论系统,统一PC端和小程序端
  • 友好的UI界面和交互界面
  • 与微信用户信息绑定,显示微信用户头像和昵称
  • 支持文章阅读量统计功能
  • 支持评论回复功能,即子评论
  • 支持emoji表情显示😉
  • 支持评论分页加载
  • 支持评论分页参数设置
  • 内置获取微信用户公共信息授权
  • 支持light/dark两种主题
  • 机型兼容友好,包括全面屏iphone11等

已测试通过机型

  • iphone6s plus
  • iphone11/xr
  • ipad4 pro
  • redmi6 pro

屏幕截图

下图为NewWxComment嵌入式到具体博客中显示的效果。PC端评论效果可以访问网站https://xiaobaiai.net

image

快速入手

注意:下面的前三步也可以参考Valine评论插件方法,如果是Valine已经设置好了,直接跳过前三步;

  1. 注册LeanCloud账号,并创建过LeanCloud应用;

  2. 登陆LeanCloud账号,打开链接https://leancloud.cn/docs/weapp-domains.html,将显示域名配置到你的微信小程序服务器配置中;

  3. 设置小程序的 AppID 与 AppSecret 3.1 登录 微信公众平台,在设置 > 开发设置 中获得 AppID 与 AppSecret 3.2 前往 LeanCloud 控制台 > 组件 > 社交,保存「微信小程序」的 AppID 与 AppSecret

  4. 克隆Demo项目NewWxComment(Demo项目已附带NewWxComment组件)

$ git clone https://github.com/yicm/NewWxComment.git
  1. 将LeanCloud自己的AppID和AppKey复制到NewWxComment.js对应位置;
AV.init({
    appId: 'your leancloud appid',
    appKey: 'your leancloud appkey',
});
  1. 在小程序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: 待评论文章唯一ID
websiteURL: PC端网站域名(若无可不填),默认值`https://xiaobaiai.net`
theme: 主题设置,仅支持 light 或者 dark 两个属性值

Demo

小程序小白AI博客引用NewWxComment组件示例:

TODO

  • 支持点赞列表
  • 支持作者回复高亮标志
  • 支持垃圾评论过滤
  • 支持海报分享
  • 支持赞赏
  • ...

License

Mulan PSL v1

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].