codecamp

百度智能小程序 一站式互动

one-stop-interaction 一站式互动组件

基础库 3.180.3 开始支持，低版本需做兼容处理。

解释： 一站式互动组件，为开发者提供一整套包含评论发布器、评论列表及详情、点赞、收藏、转发功能的互动 bar 能力，互动 bar 支持自定义，此外还提供数据存储、数据内容审核、用户接收百度 APP 消息通知的一站式服务。

使用了原 smart-sc 动态库引入的方式，请迁移到如下新的动态库方式接入。

使用方法

  1. 在项目中声明引用 swan-interaction 动态库
    在 app.json 文件配置的 dynamicLib 字段中增加对 swan-interaction 的引用，具体格式在使用动态库文档中查看。
        "dynamicLib": {
        // 'myDynamicLib' 是个可自定义的别名。
        "myDynamicLib": {
            // provider 是要引用的动态库的名字，在此为 'swan-interaction'。
            "provider": "swan-interaction"
        }
    }
  2. 创建一个带评论功能的页面，并在页面中声明引用 comment-list 组件。
    动态库中的组件与其他自定义组件类似，都需要在 page 中使用。所以首先需要创建一个 page，page 路径可自定义，推荐路径为 pages/list/index（即在小程序页面目录 pages 下创建 list 文件夹，并在文件夹下创建 index.js、index.swan、index.css、index.json 页面文件)。
    页面中引用动态库组件的方式是：在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。
    {
    "navigationBarTitleText": "评论列表",
    "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list"
    }
}

    在页面中放入列表组件，传入必要的参数，组件详情配置请参考 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>欢迎使用智能小程序动态库
    欢迎使用智能小程序动态库
    欢迎使用智能小程序动态库</view>
    <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
        class="img"></image>
    <view>欢迎使用智能小程序动态库
    欢迎使用智能小程序动态库
    欢迎使用智能小程序动态库</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厘米木刺坚持完赛',
            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',
        // 底部互动 bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
            share: {
                title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '测试文章标题',
                content: '测试文章内容',
                images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
            }
        });
    },

    onReady() {
        // 用于实现页面间的跳转
        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
                                }
                            }, () => {
                                // 我们建议将参数设为全局变量，方便取用
                                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;
}

  3. 创建一个评论详情页面，并在页面中声明引用 comment-detail 组件。
    动态库中的组件与其他自定义组件类似，都需要在 page 中使用。所以首先需要创建一个 page，page 路径可自定义，推荐路径为 pages/detail/index（即在小程序页面目录 pages 下创建 detail 文件夹，并在文件夹下创建 index.js、index.swan、index.css、index.json 页面文件)。

    页面中引用动态库组件的方式是：在页面的 json 配置的 usingSwanComponents 字段中声明组件引用。

    {
    "navigationBarTitleText": "评论详情",
    "usingSwanComponents": {
        "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
    }
}
    在页面中放入详情组件，传入必要的参数，组件详情配置请参考 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: '测试文章标题'
                }
            });
        }
    },
    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;
                            });
                        }
                    }
                });
            }
        });
    }
});

图片示例

评论列表支持折叠

对于部分开发者，在评论列表下方希望放入广告等推荐区域，故评论列表支持折叠使用。使用方法如下：

  1. 创建一个带评论功能的页面，并在页面中声明引用 comment-list 组件。
    在页面中放入列表组件，传入必要的可折叠参数，组件详情配置请参考 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>欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库</view>
        <image src="https://b.bdstatic.com/miniapp/images/demo-dog.png"
            class="img"></image>
        <view>欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库
        欢迎使用智能小程序动态库</view>
    </view>
</view>
    Page({
    data: {
        commentParam: {},
        header: {
            title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛',
            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',
        // 折叠展示最大评论条数
        foldNum: 5.
        // 底部互动 bar 的配置
        toolbarConfig: {
            // 若 moduleList 中配置有 share 模块，默认是有，则该属性为必填，title 必传
            share: {
                title: '心疼！中国自行车女将卷入摔车事故 腹部扎入3厘米木刺坚持完赛'
            }
        }
    },

    onLoad(query) {
        this.setData({
            commentParam: {
                snid: '10070000311753961',
                path: '/pages/comment/index?snid=test_snid57',
                title: '测试文章标题',
                content: '测试文章内容',
                images: ['https://b.bdstatic.com/miniapp/images/demo-dog.png']
            }
        });
    },

    onReady() {
        // 用于实现页面间的跳转
        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;
}
  2. 创建一个展示全部评论的页面，并在页面中声明引用 comment-list 组件。
    我们建议全部评论的页面，互动 bar 仅保留评论发布。组件配置请参考 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: '测试文章标题'
                }
            });

        }
    },

    onReady() {
        // 用于实现页面间的跳转
        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"
    }
}

  3. 创建一个评论详情页面，并在页面中声明引用 comment-detail 组件。

Bug&Tip

  • Tip：使用 Mars 等第三方框架开发小程序时，可能存在 setData 的异步延时，如在评论详情页 srid 作为单独参数传入没有生效，可作为 commentParam 中的字段传入。
  • Tip: 原有一站式互动组件 smart-sc 因性能问题，对用户流量产生影响，为避免影响线上已接入用户，本次新的一站式互动组件采用新的动态库。
  • Tip：原有一站式互动组件的部分 bug，如点赞状态失效等，已在新一站式组件中修复。
  • Tip：新的一站式互动组件，通用性更强，除了页面级别，也支持浮层的使用。
  • Tip： 在 onLoad 和 onReady 生命周期内引入 requireDynamicLib(‘myDynamicLib’).listenEvent() 来实现页面的跳转。


百度智能小程序 关注小程序组件
百度智能小程序 评论列表
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序接入指南

百度智能小程序 注册指导

百度智能小程序 基础流量

百度智能小程序设计文档

百度智能小程序 设计原则

百度智能小程序 核心体验白皮书

百度智能小程序 设计指南

百度智能小程序 设计资源

百度智能小程序 设计故事

百度智能小程序数据文档

百度智能小程序 功能概述

百度智能小程序 统计方法

百度智能小程序开发文档

百度智能小程序 简易教程

百度智能小程序 框架

百度智能小程序 组件

百度智能小程序 视图容器

百度智能小程序 基础内容

百度智能小程序 表单组件

百度智能小程序 导航

百度智能小程序 媒体组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 开放能力

百度智能小程序 内容服务组件

百度智能小程序 动态库组件

百度智能小程序 API

百度智能小程序 基础

百度智能小程序 应用级事件

百度智能小程序 URL Query

百度智能小程序 更新

百度智能小程序 定时器

百度智能小程序 路由

百度智能小程序 网络

百度智能小程序 界面

百度智能小程序 交互反馈

百度智能小程序 导航栏

百度智能小程序 设置tabBar

百度智能小程序 关注小程序引导组件

百度智能小程序 位置

百度智能小程序 下拉刷新

百度智能小程序 背景

百度智能小程序 动画

百度智能小程序 自定义组件

百度智能小程序 菜单

百度智能小程序 节点信息

百度智能小程序 数据存储

百度智能小程序 AI

百度智能小程序 文字识别

百度智能小程序 文本审核

百度智能小程序 词法分析

百度智能小程序 图像识别

百度智能小程序 图像审核

百度智能小程序 语音识别

百度智能小程序 语音合成

百度智能小程序 人脸识别

百度智能小程序 媒体

百度智能小程序 图片

百度智能小程序 相机组件控制

百度智能小程序 AR相机组件控制

百度智能小程序 背景音频组件控制

百度智能小程序 音频组件控制

百度智能小程序 录音管理器

百度智能小程序 视频

百度智能小程序 视频组件控制

百度智能小程序 透明视频组件控制

百度智能小程序 直播组件控制

百度智能小程序 RTC组件控制

百度智能小程序 位置

百度智能小程序 画布

百度智能小程序 文件

百度智能小程序 设备

百度智能小程序 系统信息

百度智能小程序 网络状态

百度智能小程序 屏幕亮度

百度智能小程序 拨打电话

百度智能小程序 震动

百度智能小程序 剪贴板

百度智能小程序 扫码

百度智能小程序 加速度计

百度智能小程序 罗盘

百度智能小程序 设备方向

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 电量信息

百度智能小程序 用户截屏事件

百度智能小程序 在系统中新建日历

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 登录

百度智能小程序 授权

百度智能小程序 设置

百度智能小程序 百度收银支付

百度智能小程序 页面基础信息

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 风控

百度智能小程序 订阅

百度智能小程序 书架

百度智能小程序 用户接口

百度智能小程序 用户信息

百度智能小程序 分享

百度智能小程序 打开小程序

百度智能小程序 获取收货地址

百度智能小程序 获取发票抬头

百度智能小程序 全屏内容发布器

百度智能小程序 半屏内容发布起

百度智能小程序 服务端

百度智能小程序 信息流资源

百度智能小程序 模板信息

百度智能小程序 客服消息

百度智能小程序 订单同步

百度智能小程序 风控服务

百度智能小程序 小程序二维码

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 存储

百度智能小程序 数据库

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云数据库

百度智能小程序 服务端云存储

百度智能小程序 服务端云函数

百度智能小程序 工具

百度智能小程序 开发服务

百度智能小程序 开发教程

百度智能小程序 快速入门

百度智能小程序 功能开发

百度智能小程序 支付功能开发

百度智能小程序 百度收银接口2.0(推荐)

百度智能小程序 百度收银台接口

百度智能小程序 文件类型

百度智能小程序 web态开发

百度智能小程序 云开发

百度智能小程序 云开发控制台

百度智能小程序 开发指南

百度智能小程序 性能优化

百度智能小程序 性能优化的原理和手段

百度智能小程序 性能检测工具

百度智能小程序 异常场景处理

百度智能小程序 基本原理

百度智能小程序 小程序全局配置

百度智能小程序 小程序页面

百度智能小程序 自定义组件

百度智能小程序 语法

百度智能小程序 框架接口

百度智能小程序 运行时原理

百度智能小程序 SmartUI

百度智能小程序 基础组件

百度智能小程序 数据展现

百度智能小程序 界面布局

百度智能小程序 操作反馈

百度智能小程序 数据输入

百度智能小程序 提示引导

百度智能小程序 其他

百度智能小程序 综合能力实例

百度智能小程序 工具

百度智能小程序 设置

百度智能小程序 代码编辑

百度智能小程序 小程序调试

百度智能小程序 开发辅助

百度智能小程序 小程序自动化

百度智能小程序 API

百度智能小程序 SmartProgram

百度智能小程序 Page

百度智能小程序 Element

百度智能小程序 视频教程

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }