百度小程序评论、点赞功能接入百度互动组件：（只接入文章、视频 、行家文章、行家视频的评论和点赞）

举例：

1. A 动态，B 评论了，这个目前不推送

2. B这个评论被 C 回复了，B收到推送

3. B这个评论被 D 点赞了，B收到推送

4. C回复B的评论的那条回复，被D评论了，C收到推送

## 组件名称

点赞

zan

## 可配置属性与控制的功能

#### 属性说明：

|属性名 | 类型 | 必填 | 默认值 |说明 |

|---|---|---|---|---|

|isZan|Boolean|是|false|赞的状态|

|mode|String|否|icon|按钮模式，有两种选择icon: 仅有图标; mixture: 图标文字结合|

|iconType|String|否|hand|图标类型，提供两种，包括hand(默认)和heart|

|style|String|否|none|仅在mode为mixture时可配置, none:无边框; border:有边框,有边框模式需在深色背景下使用|

|zanText|String|否|赞|点赞按钮上的文案，默认为赞|

|zanNum|Number|否|0|点赞数|

|zanType|Number|否|0|点赞的对象类型，0:代表动态; 1:代表评论|

|zanParam|Object|否||点赞服务需要的必要参数|

|zanParam.openid|String|是||点赞服务需要的必要参数|

|zanParam.snid|String|是||动态在开发者侧的唯一标识。当为空，默认开发者将数据托管在宿主，小程序侧创建动态后返回唯一标识给开发者。|

|zanParam.srid|String|是||不为空，表示对评论进行点赞。若小程序侧没有 srid 对应的标识，则认为此时对主题进行点赞。|

|zanParam.appKey|String|是||小程序App Key，在小程序管理中心>设置>开发设置中获取|

|animationType|Number|否|1|点赞动效形式，0:无动效；1:轻动效；2:强动效|

|isShowToast|Boolean|否|true|点赞后的结果反馈是否弹出toast提示|

|toastText|Array|否|['已点赞', '已取消']|toast文案，默认为已点赞、已取消|

## 使用示例

1.安装组件

    npm install @smt-ui/s-component

json:

    {

        "navigationBarTitleText": "标题",

        "usingComponents": {

            "s-zan": "@smt-ui/s-component/src/zan"

        }

    }

swan:

    <view>点赞：仅图标</view>

    <view class="zan-demo">

        <s-zan zanParam="{{zanParam}}"></s-zan>

        <s-zan iconType="heart" zanParam="{{zanParam}}"></s-zan>

        <s-zan animationType="{{animationType}}" zanParam="{{zanParam}}"></s-zan>

        <s-zan iconType="heart" animationType="{{animationType}}" zanParam="{{zanParam}}"></s-zan>

        <s-zan animationType="{{animationType2}}" isShowToast="{{false}}" zanParam="{{zanParam}}"></s-zan>

        <s-zan

            iconType="heart"

            isShowToast="{{false}}"

            animationType="{{animationType2}}">

        </s-zan>

    </view>

    <view>点赞：带文字</view>

    <view class="zan-demo">

        <s-zan

            class="custom-class"

            mode="mixture"

            iconType="heart"

            zanParam="{{zanParam}}"

            zanText="{{zanText}}">

        </s-zan>

        <s-zan

            class="custom-class"

            mode="mixture"

            zanParam="{{zanParam}}"

            zanText="{{zanText}}">

        </s-zan>

        <s-zan

            class="custom-class"

            mode="mixture"

            iconType="heart"

            zanParam="{{zanParam}}"

            animationType="{{animationType}}"

            zanText="{{zanText}}">

        </s-zan>

        <s-zan

            class="custom-class"

            mode="mixture"

            zanParam="{{zanParam}}"

            animationType="{{animationType}}"

            zanText="{{zanText}}">

        </s-zan>

        <s-zan

            class="custom-class"

            mode="mixture"

            iconType="heart"

            zanParam="{{zanParam}}"

            animationType="{{animationType2}}"

            zanText="{{zanText}}">

        </s-zan>

        <s-zan

            class="custom-class"

            mode="mixture"

            zanParam="{{zanParam}}"

            animationType="{{animationType2}}"

            zanText="{{zanText}}">

        </s-zan>

    </view>

js:

    Page({

        data: {

            animationType: 2,

            animationType2: 0,

            zanParam: {

                srid: 'fsds',

                snid: '111',

                appKey: 'wSfMyKIbrbNg7ogTFTcBuk1P8mgGTlB1',

                openid: 'dasa'

            }

        }

    });

css:

    .zan-demo{

        display: flex;

        height: 80px;

        align-items: center;

        justify-content: space-around;

    }

    .zan-demo .custom-class {

        margin: 0 10px;

    }

## 可配置属性与控制的功能

#### 属性说明：

|属性名| 类型 | 必填 | 默认值 | 说明 |

|---|---|---|---|---|

|contentPlaceholder|String|否|请输入内容|提示占位文案|

|moduleList|Array|||显示模块list|

|emojiPath|String|否|||设置自定义表情配置路径（NA版支持，降级版不支持）|

|foucs|Boolean|否|false|true代表调起，false则不调起(NA版不支持，降级版支持)|

|isUpLoadImage|Boolean|否|false|是否展示上传图片按钮|

|requestUrl|String|isUpLoadImage为true，则必填||由于小程序图片预览只能是http或https，所以上传图片需要先上传到服务器(NA版不支持，降级版支持)|

|commentParam.openid|String|是|-|小程序开发者唯一标识|

|commentParam.snid|String|是|-|动态在开发者侧的唯一标识。不为空。若此时小程序侧没有对应的标识，则先创建动态。|

|commentParam.spid|String|是|-|为空，表示对动态评论；不为空，表示对评论进行评论。若小程序侧没有 spid 对应的标识，则认为此时对主题进行评论。|

|commentParam.srid|String|是|-|回复 id|

|commentParam.title|String|是|-|动态标题|

|commentParam.content|String|是|-|动态内容|

|commentParam.images|Array|否|-|动态图集, json 数组, 格式 ["a.jpg","b.jpg"]|

|commentParam.appKey|String|是||小程序唯一标识|

|commentParam.path|String|是||用于拼接跳转的schema,例如 path= /page/a/b?query=q|

|bind:browseMode|EventHandle|||当输入框失焦后会触发事件(NA版不支持，降级版支持)|

|bind:relaseComment|EventHandle|||点击发表按钮时触发的事件|

|bind:previewImage|EventHandle|||点击输入框中已经上传的图片时触发的事件(NA版不支持，降级版支持)|

## 使用方法

1.安装组件

    npm install @smt-ui/s-component

2.在需要使用该组件页面 page.json 中添加当前自定义组件配置

    {

        "usingComponents": {

            "s-comment-publisher": "@smt-ui/s-component/src/comment-publisher"

        }

    }

3.在swan文件中引用组件

    <s-comment-publisher

        commentParam="{{commentParam}}"

        isUpLoadImg="true"

        requestUrl="http:xxx.xxx.com"

        bind:gotoPosition="gotoPosition"

        bind:browseMode="browseModeEventHandler"

        bind:relaseComment="relaseCommentEventHandler"

        bind:previewImage="previewImageHandler">

     </s-comment-publisher>

js:

    Page({

        relaseCommentEventHandler() {

            let param = {

                snid: '111',

                path: '332222',

                appKey: 'wSfMyKIbrbNg7ogTFTcBuk1P8mgGTlB1',

                spid: 'ddd',

                srid: 'qqqq',

                title: '评论的文章的标题',

                openid: '88989',

                content: 'dasccccc'

            };

            this.setData('commentParam', param);

        }

    });