百度智能小程序一站式互動(dòng)

2020-09-03 14:21 更新

one-stop-interaction 一站式互動(dòng)組件

基礎(chǔ)庫 3.180.3 開始支持，低版本需做兼容處理。

解釋：一站式互動(dòng)組件，為開發(fā)者提供一整套包含評論發(fā)布器、評論列表及詳情、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)功能的互動(dòng) bar 能力，互動(dòng) bar 支持自定義，此外還提供數(shù)據(jù)存儲、數(shù)據(jù)內(nèi)容審核、用戶接收百度 APP 消息通知的一站式服務(wù)。

使用了原 smart-sc 動(dòng)態(tài)庫引入的方式，請遷移到如下新的動(dòng)態(tài)庫方式接入。

使用方法

在項(xiàng)目中聲明引用 swan-interaction 動(dòng)態(tài)庫
在 app.json 文件配置的 dynamicLib 字段中增加對 swan-interaction 的引用，具體格式在使用動(dòng)態(tài)庫文檔中查看。

    "dynamicLib": {
        // 'myDynamicLib' 是個(gè)可自定義的別名。
        "myDynamicLib": {
            // provider 是要引用的動(dòng)態(tài)庫的名字，在此為 'swan-interaction'。
            "provider": "swan-interaction"
        }
    }

創(chuàng)建一個(gè)帶評論功能的頁面，并在頁面中聲明引用 comment-list 組件。
動(dòng)態(tài)庫中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要?jiǎng)?chuàng)建一個(gè) page，page 路徑可自定義，推薦路徑為 pages/list/index（即在小程序頁面目錄 pages 下創(chuàng)建 list 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁面文件)。
頁面中引用動(dòng)態(tài)庫組件的方式是：在頁面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

{
    "navigationBarTitleText": "評論列表",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

在頁面中放入列表組件，傳入必要的參數(shù)，組件詳情配置請參考 comment-list 評論列表組件。

<view>
    <view class="article-header">
        <text class="title" selectable="true">{{header.title}}</text>
        <view class="source">
            <image s-if="!!header.avatar" src="{{header.avatar}}"/>
            <view class="info">
                <text class="author">{{header.author}}</text>
                <text class="time">{{header.time}}</text>
            </view>
        </view>
    </view>
    <view class="article-content">
        <block s-for="{{content.items}}" s-for-index="eleIndex">
            <block s-if="{{item.type === 'text'}}">
                <view class="content-p" data-index="{{eleIndex}}">
                    <text selectable="true">{{item.data}}</text>
                </view>
            </block>
            <block s-elif="{{item.type === 'image'}}">
                <image
                    class="content-img"
                    src="{{item.data.src}}"
                    original-src="{{item.data.src}}"
                    mode="widthFix"
                    preview="true"
                    lazy-load="true"/>
            </block>
        </block>
    </view>
    <view>歡迎使用智能小程序動(dòng)態(tài)庫
    歡迎使用智能小程序動(dòng)態(tài)庫
    歡迎使用智能小程序動(dòng)態(tài)庫</view>
    <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png" rel="external nofollow"  rel="external nofollow" 
        class="img"></image>
    <view>歡迎使用智能小程序動(dòng)態(tài)庫
    歡迎使用智能小程序動(dòng)態(tài)庫
    歡迎使用智能小程序動(dòng)態(tài)庫</view>

    <!-- 評論列表組件 -->
    <comment-list class="list"
        comment-param="{{commentParam}}"
        detail-path="{{detailPath}}"
        toolbar-config="{{toolbarConfig}}"
        bindclickcomment="clickComment"
        bindunlogin="triggerLogin"
    ></comment-list>
</view>

Page({
    data: {
        commentParam: {},
        header: {
            title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽',
            avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
            author: '百度智能小程序',
            time: '2020年04月14日'
        },
        content: {
            items: [
                {
                    type: 'text',
                    data: '測試文字'
                }
            ]
        },
        detailPath: '/pages/detail/index?params1=abd',
        // 底部互動(dòng) bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
            share: {
                title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '測試文章標(biāo)題',
                content: '測試文章內(nèi)容',
                images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
            }
        });
    },

    onReady() {
        // 用于實(shí)現(xiàn)頁面間的跳轉(zhuǎn)
        requireDynamicLib('myDynamicLib').listenEvent();
    },

    clickComment(e) {
    },

    triggerLogin(e) {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey
                        sk: '' // AppSecret
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            const commentParam = this.data.commentParam;
                            this.setData({
                                commentParam: {
                                    ...commentParam,
                                    openid: res.data.openid
                                }
                            }, () => {
                                // 我們建議將參數(shù)設(shè)為全局變量，方便取用
                                getApp().globalData.commentParam = this.data.commentParam;
                            });
                        }
                    }
                });
            }
        });
    }
});

.article-header {
    padding: 0 17px;
}

.article-header .title {
    display: block;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
}

.article-header .source {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
}

.article-header .source image {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    margin-right: 8px;
    background-color: #eef1f4;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-header .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 35px;
}

.article-header .info .author {
    font-size: 16px;
    line-height: 1;
    display: block;
    color: #000;
    margin-bottom: 7px;
}

.article-header .info .time {
    display: block;
    color: #999;
    font-size: 12px;
    line-height: 1;
}

.article-content {
    color: #000;
    font-size: 19px;
    line-height: 1.58;
    letter-spacing: 2.84;
    margin-bottom: 30px;
}

.article-content .content-img {
    width: 100%;
    margin-top: 30px;
    vertical-align: bottom;
    background-color: #eef1f4;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-content .content-p {
    margin: 24.5px 17px -5.5px 17px;
    text-align: justify;
    word-break: break-all;
}

創(chuàng)建一個(gè)評論詳情頁面，并在頁面中聲明引用 comment-detail 組件。
動(dòng)態(tài)庫中的組件與其他自定義組件類似，都需要在 page 中使用。所以首先需要?jiǎng)?chuàng)建一個(gè) page，page 路徑可自定義，推薦路徑為 pages/detail/index（即在小程序頁面目錄 pages 下創(chuàng)建 detail 文件夾，并在文件夾下創(chuàng)建 index.js、index.swan、index.css、index.json 頁面文件)。

頁面中引用動(dòng)態(tài)庫組件的方式是：在頁面的 json 配置的 usingSwanComponents 字段中聲明組件引用。

{
    "navigationBarTitleText": "評論詳情",
    "usingSwanComponents": {
        "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
    }
}

在頁面中放入詳情組件，傳入必要的參數(shù)，組件詳情配置請參考 comment-list 評論列表組件。

<comment-detail
    comment-param="{{commentParam}}"
    srid="{{srid}}"
    need-like-btn="{{true}}"
    binddelete="detailDelete"
    bindunlogin="triggerLogin"
></comment-detail>

Page({
    data: {
        srid: '',
        commentParam: {}
    },
    onLoad(options) {
        if (options) {
            this.setData({
                srid: options.srid
            });
        }

        const param = getApp().globalData.commentParam;

        if (param && Object.keys(param).length) {
            this.setData({
                'commentParam': param
            });
        }
        else {
            this.setData({
                commentParam: {
                    snid: '10070000311753961',
                    path: '/pages/comment/index?snid=test_snid57',
                    title: '測試文章標(biāo)題'
                }
            });
        }
    },
    triggerLogin(e) {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey
                        sk: '' // AppSecret
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            const commentParam = this.data.commentParam;
                            this.setData({
                                commentParam: {
                                    ...commentParam,
                                    openid: res.data.openid
                                }
                            }, () => {
                                // 我們建議將參數(shù)設(shè)為全局變量，方便取用
                                getApp().globalData.commentParam = this.data.commentParam;
                            });
                        }
                    }
                });
            }
        });
    }
});

圖片示例

評論列表支持折疊

對于部分開發(fā)者，在評論列表下方希望放入廣告等推薦區(qū)域，故評論列表支持折疊使用。使用方法如下：

創(chuàng)建一個(gè)帶評論功能的頁面，并在頁面中聲明引用 comment-list 組件。
在頁面中放入列表組件，傳入必要的可折疊參數(shù)，組件詳情配置請參考 comment-list 評論列表組件。

<view>
    <view class="article-header">
        <text class="title" selectable="true">{{header.title}}</text>
        <view class="source">
            <image s-if="!!header.avatar" src="{{header.avatar}}"/>
            <view class="info">
                <text class="author">{{header.author}}</text>
                <text class="time">{{header.time}}</text>
            </view>
        </view>
    </view>

    <view class="article-content">
        <block s-for="{{content.items}}" s-for-index="eleIndex">
            <block s-if="{{item.type === 'text'}}">
                <view class="content-p" data-index="{{eleIndex}}">
                    <text selectable="true">{{item.data}}</text>
                </view>
            </block>
            <block s-elif="{{item.type === 'image'}}">
                <image
                    class="content-img"
                    src="{{item.data.src}}"
                    original-src="{{item.data.src}}"
                    mode="widthFix"
                    preview="true"
                    lazy-load="true"/>
            </block>
        </block>
    </view>

    <!-- 評論列表支持折疊 -->
    <comment-list class="list"
        comment-param="{{commentParam}}"
        detail-path="{{detailPath}}"
        is-folded="{{true}}"
        fold-num="{{foldNum}}"
        toolbar-config="{{toolbarConfig}}"
        view-more-path="{{viewMorePath}}"
        bindclickcomment="clickComment"
        bindunlogin="triggerLogin"
        bindviewmore="viewMore"
    ></comment-list>
    <div class="comment-list-folded-bottom-margin"></div>

    <view class="list-after">
        <view>歡迎使用智能小程序動(dòng)態(tài)庫
        歡迎使用智能小程序動(dòng)態(tài)庫
        歡迎使用智能小程序動(dòng)態(tài)庫</view>
        <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png" rel="external nofollow"  rel="external nofollow" 
            class="img"></image>
        <view>歡迎使用智能小程序動(dòng)態(tài)庫
        歡迎使用智能小程序動(dòng)態(tài)庫
        歡迎使用智能小程序動(dòng)態(tài)庫</view>
    </view>
</view>

Page({
    data: {
        commentParam: {},
        header: {
            title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽',
            avatar: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
            author: '百度智能小程序',
            time: '2020年04月14日'
        },
        content: {
            items: [
                {
                    type: 'image',
                    data: {
                        src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png'
                    }
                },
                {
                    type: 'text',
                    data: '測試文字'
                }
            ]
        },
        // 評論詳情頁面路徑
        detailPath: '/pages/detail/index?params1=abd',
        // 全部評論頁面路徑
        viewMorePath: '/pages/all-list/index',
        // 折疊展示最大評論條數(shù)
        foldNum: 5.
        // 底部互動(dòng) bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模塊，默認(rèn)是有，則該屬性為必填，title 必傳
            share: {
                title: '心疼！中國自行車女將卷入摔車事故 腹部扎入3厘米木刺堅(jiān)持完賽'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '測試文章標(biāo)題',
                content: '測試文章內(nèi)容',
                images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
            }
        });
    },

    onReady() {
        // 用于實(shí)現(xiàn)頁面間的跳轉(zhuǎn)
        requireDynamicLib('myDynamicLib').listenEvent();
    },

    triggerLogin(e) {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey
                        sk: '' // AppSecret
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            const commentParam = this.data.commentParam;
                            this.setData({
                                commentParam: {
                                    ...commentParam,
                                    openid: res.data.openid
                                }
                            }, () => {
                                getApp().globalData.commentParam = this.data.commentParam;
                            });
                        }
                    }
                });
            }
        });
    },

    clickComment(e) {
    },

    viewMore() {
        swan.showToast({
            title: 'click success'
        });
    }
});

{
    "navigationBarTitleText": "折疊列表頁",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

.article-header {
    padding: 0 39.8rpx;
}

.article-header .title {
    display: block;
    font-size: 56rpx;
    line-height: 1.5;
    font-weight: 700;
}

.article-header .source {
    margin-top: 56rpx;
    display: flex;
    align-items: flex-start;
}

.article-header .source image {
    width: 82rpx;
    height: 82rpx;
    border-radius: 100%;
    margin-right: 18.7rpx;
    background-color: #eef1f4;
    background-size: 37.4rpx 37.4rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-header .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 82rpx;
}

.article-header .info .author {
    font-size: 37.4rpx;
    line-height: 1;
    display: block;
    color: #000;
    margin-bottom: 16.4rpx;
}

.article-header .info .time {
    display: block;
    color: #999;
    font-size: 28rpx;
    line-height: 1;
}

.article-content {
    color: #000;
    font-size: 44.5rpx;
    line-height: 1.58;
    letter-spacing: 2.84;
    margin-bottom: 70.2rpx;
}

.article-content .content-img {
    width: 100%;
    margin-top: 70.2rpx;
    vertical-align: bottom;
    background-color: #eef1f4;
    background-size: 74.9rpx 74.9rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../common/assets/logo-default.png);
}

.article-content .content-p {
    margin: 57.3rpx 39.8rpx -12.9rpx 39.8rpx;
    text-align: justify;
    word-break: break-all;
}

.list-after {
    padding: 30rpx 18rpx 90rpx;
}

.comment-list-folded-bottom-margin {
    height: 14.4rpx;
    background-color: #f5f5f5;
}

創(chuàng)建一個(gè)展示全部評論的頁面，并在頁面中聲明引用 comment-list 組件。
我們建議全部評論的頁面，互動(dòng) bar 僅保留評論發(fā)布。組件配置請參考 comment-list 評論列表組件。

<comment-list
    comment-param="{{commentParam}}"
    detail-path="{{detailPath}}"
    toolbar-config="{{toolbarConfig}}"
    bindclickcomment="clickComment"
    bindunlogin="triggerLogin"
></comment-list>

Page({
    data: {
        commentParam: {},
        toolbarConfig: {
            moduleList: []
        },
        detailPath: '/pages/detail/index?params1=abd'
    },

    onInit() {
        this.isOnInitCalled = true;
        this.init();
    },

    onLoad() {
        // 兼容不支持 onInit 的版本
        if (!this.isOnInitCalled) {
            this.init();
        }
    },

    init() {
        const commentParam = getApp().globalData.commentParam;
        if (commentParam && Object.keys(commentParam).length) {
            this.setData({
                commentParam
            });
        }
        else {
            this.setData({
                commentParam: {
                    snid: '10070000311753961',
                    path: '/pages/comment/index?snid=test_snid57',
                    title: '測試文章標(biāo)題'
                }
            });

        }
    },

    onReady() {
        // 用于實(shí)現(xiàn)頁面間的跳轉(zhuǎn)
        requireDynamicLib('myDynamicLib').listenEvent();
    },

    triggerLogin(e) {
        swan.login({
            success: res => {
                swan.request({
                    url: 'https://spapi.baidu.com/oauth/jscode2sessionkey',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        code: res.code,
                        'client_id': '', // AppKey
                        sk: '' // AppSecret
                    },
                    success: res => {
                        if (res.statusCode === 200) {
                            const commentParam = this.data.commentParam;
                            this.setData({
                                commentParam: {
                                    ...commentParam,
                                    openid: res.data.openid
                                }
                            }, () => {
                                getApp().globalData.commentParam = this.data.commentParam;
                            });
                        }
                    }
                });
            }
        });
    },

    clickComment(e) {
    }
});

{
    "navigationBarTitleText": "全部評論",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

創(chuàng)建一個(gè)評論詳情頁面，并在頁面中聲明引用 comment-detail 組件。

Bug&Tip

Tip：使用 Mars 等第三方框架開發(fā)小程序時(shí)，可能存在 setData 的異步延時(shí)，如在評論詳情頁 srid 作為單獨(dú)參數(shù)傳入沒有生效，可作為 commentParam 中的字段傳入。
Tip: 原有一站式互動(dòng)組件 smart-sc 因性能問題，對用戶流量產(chǎn)生影響，為避免影響線上已接入用戶，本次新的一站式互動(dòng)組件采用新的動(dòng)態(tài)庫。
Tip：原有一站式互動(dòng)組件的部分 bug，如點(diǎn)贊狀態(tài)失效等，已在新一站式組件中修復(fù)。
Tip：新的一站式互動(dòng)組件，通用性更強(qiáng)，除了頁面級別，也支持浮層的使用。
Tip：在 onLoad 和 onReady 生命周期內(nèi)引入 requireDynamicLib(‘myDynamicLib’).listenEvent() 來實(shí)現(xiàn)頁面的跳轉(zhuǎn)。

以上內(nèi)容是否對您有幫助：

← 百度智能小程序關(guān)注小程序組件

百度智能小程序評論列表 →

寫筆記