为你的小程序快速添加评论组件

2021-01-18 18:10:26

介绍如何为小程序快速接入评论系统

WxComment是一个微信小程序的评论插件,结合BaaS提供商LeanCloud,无需其他另外的个人或者云服务器,可以免费使用。

这里以科技爱好者周刊为例,介绍下如何使用WxComment插件为小程序添加评论功能。

# 账号准备

# LeanCloud

1.注册LeanCloud账号,创建LeanCloud应用;
2.前往 LeanCloud 控制台 > 组件 > 社交,保存「微信小程序」的 AppID 与 AppSecret
3.前往 LeanCloud 控制台 > 存储 > 结构化数据,点击『创建 Class』新建名为Admin、WxComment、Count的类。
4.前往 LeanCloud 控制台 > 设置 > 应用 Keys,记录 应用的 AppID 和 AppKey 备用。

# 微信小程序

登录微信小程序后台,进入 开发 > 开发管理 > 开发设置 > 服务器域名,添加如下域名:

  • https://nwfwwkyp.api.lncld.net;
  • https://nwfwwkyp.lc-cn-n1-shared.com;

# 代码修改

1.克隆项目WxComment并将其放入小程序目录:
git clone https://github.com/yicm/WxComment.git
这里的示例小程序是使用mpvue框架开发的,所以选择存放在根目录下的static目录
2.修改static/WxComment/component/WxComment/WxComment.js中的 LeanCloud 应用的 ID 和 Key。改成自己的。


AV.init({
  appId: 'LeanCloud 应用 AppID',
  appKey: 'LeanCloud 应用 AppKey',
});

3.小程序详情页引入WxComment组件
页面 wxml:


<Wxcomment tipOne="Markdown " tipTwo="will be supported" submitBtnText="回复" :articleID="name" contentLen='1'></wxcomment>

页面 json配置:


"usingComponents": {
    ...
    "wxcomment": "/static/WxComment/component/WxComment/WxComment"
}

属性说明:

  • tipOne: 颜色显示tip区域文字内容
  • tipTwo: 无颜色显示tip区域文字内容
  • submitBtnText:提交按钮文字内容
  • articleID:文章与WxComment绑定的唯一ID
  • contentLen:评论内容至少为多长限制

# 演示效果


扫码体验:

# 参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~