pbootcms小程序demo引入百度一站式组件comment-list，效果图：



改造教程：
使用流程：
一、配置消息推送
（1）登录百度官方小程序后台，找到“设置”----“开发设置”----“消息推送”设置相关信息：

URL：随便写个可以访问的路径;
Token(令牌)和EncodingAESKey(消息加密秘钥)自己随便填写，符号百度的要求即可；
消息加密方式选择 安全模式（有些无法选择安全模式可以选择明文模式，影响不大）其他默认，保存即可

二、小程序端配置

1、打开app.json添加
（1）下载评论详情页放到pages文件夹下，评论详情页下载.rar
（2）添加动态库：

1. "dynamicLib": { 
2.         "myDynamicLib": { 
3.             "provider": "swan-interaction" 
4.         } 
5.     } 

（3）app.json最上面的pages填写你的评论详情页路径：“/pages/comment/detail”

效果如图：


2、找到你的详情页面（我的是show,以show为例）
（1）在show.json中引入动态库：

1. "usingSwanComponents": { 
2.         "comment-list": "dynamicLib://myDynamicLib/comment-list" 
3.     } 

（2）在详情页面show.swan加入评论组件，在最下边添加代码：

1. <!-- 评论列表组件 --> 
2. <comment-list class="clist" 
3.     comment-param="{{commentParam}}" 
4.     detail-path="{{detailPath}}" 
5.     toolbar-config="{{toolbarConfig}}" 
6.     bindclickcomment="clickComment" 
7.     bindunlogin="triggerLogin" 
8. ></comment-list> 

（3）找到show.js的最上面的data初始化数组里边，添加初始化内容：

1. detailPath: '/pages/comment/detail?params1=abd', 
2.         // 底部互动 bar 的配置 
3.         toolbarConfig: { 
4.             // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传 
5.             share: { 
6.                 title: '' 
7.             } 
8.         }, 
9.         commentParam: { 
10.             snid: '', 
11.             path: '', 
12.             title: '', 
13.             content: '', 
14.             images: [] 
15.         }, 

然后找到onLoad后添加一个onReady();如果用onReady的可以直接添加里边代码：

1. onReady() { 
2.         requireDynamicLib('myDynamicLib').listenEvent(); 
3.     }, 

然后在当前页面找到请求内容的方法，我的demo默认是getInfo()方法，在请求成功之后的返回里边封装一下当前评论的相关参数，并且setData一下，示例代码：
找到getInfo里边的setData，在setData之前加代码：

1. var commentParam = { 
2.                     snid: content.id, 
3.                     path: '/pages/comment/detail?snid='+content.id, 
4.                     title: content.title, 
5.                     content: content.description, 
6.                     images: [content.ico] 
7.                 }; 

在setData里边添加代码：

1. detailPath: '/pages/comment/detail?srid='+content.id, //评论路径 
2.                     commentParam: commentParam,  
3.                     toolbarConfig: { //底部 toolbar 的相关配置 
4.                         moduleList:['comment', 'like', 'favor', 'share'],  
5.                         share: {  
6.                             title: content.title, //文章标题 
7.                             content:content.content, //正文 
8.                             imageUrl:content.ico, //所路途 
9.                             path: '/pages/show/show?id='+content.id //文章路径 
10.                         },  
11.                     }, 

然后再setData后边放代码：

1. getApp().globalData.commentParam = commentParam; 

（4）下载评论详情页面放到pages文件夹下

搞完，重新编译测试一下。（由于一站式组件问题多多，很多时候开发者工具无法评论，可以用真机评论。）

需要技术支持可以加我Q:2863868475

上一篇：pbootcms小程序资源提交接口上线
下一篇：pbootcms小程序插件会员授权bug修复流程