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

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

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：评论内容至少为多长限制

# 演示效果

扫码体验：

# 参考资料

• https://leancloud.cn/
• WxComment
• 科技爱好者周刊小程序