uniapp增加百度评论组件/动态组件

508 阅读1分钟

1. manifest.json 全局开启动态组件

在manifest.json文件中,添加如下代码:

{
"name" : "xxxxxxxx",
"appid" : "",

// 添加如下代码:
"mp-baidu" : {
    "usingComponents" : true,
    "appid" : "xxxxxxxx",
    "dynamicLib": {
        "myDynamicLib": {
            "provider": "swan-interaction"
        }
    }
  }
}  

分析:uniapp中的manifest.json编译后,最后会成为对应小程序中的 app.json文件。 对应的代码为:

"dynamicLib": {
    // 定义一个别名,小程序中用这个别名引用动态库。
    "myDynamicLib": {
       // 这是动态库的 'dynamicLibName',是全局唯一的名字,标志着被引用的动态库
       // swan-interaction 名字自定义 
      "provider": "swan-interaction"
    }
  },

2.pages.json 页面配置中,配置动态组件

哪个路径下的页面,需要添加组件,则在style配置项下添加如下代码:

{
  "path": "pages/content/news-detail",
  "style": {
    "navigationBarTitleText": "文章详情",
    "mp-baidu": {
      "usingSwanComponents": {
        "comment-list": "dynamicLib://myDynamicLib/comment-list",
        "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
      }
    }
  }
},

分析:作为key的comment-listcomment-detail,名称是自定义的,用作后面在页面模板里面的组件名称。 myDynamicLib,是上面manifest.json中定义的动态库别名。

3. 模板页面中,使用动态组件。

<comment-list :comment-param="commentParam" :toolbar-config="toolbarConfig"></comment-list>
data(){
  return {
    commentParam: {
        // 模拟数据,使用时请替换真实数据
        snid: '1',
        path: '/pages/content/news-detail?id=1',
        title: '测试文章标题'
  },
  commentParam: {
    // 模拟数据,使用时请替换真实数据
    snid: '1',
    path: '/pages/content/news-detail?id=1',
    title: '测试文章标题'
  },
 // 底部互动 bar 的配置
  toolbarConfig: {
    // 若 moduleList 中配置有 share 模块,默认是有,则该属性为必填,title 必传
    share: {
      title: '分享'
    }
  }
},
onLoad(opt) {
    const { id,t } = opt;
    this.id = id;
    this.t = t;

    this.commentParam = {
      snid: id,
      path: `/pages/content/news-detail?id=${id}&t=${t}`,
      title: t
    }
    this.toolbarConfig.share.title = t; // 配置分享的标题
    
    // 用于实现页面间的跳转,也可以放在 onLoad 生命周期中
    requireDynamicLib('myDynamicLib').listenEvent();
},

效果图: image.png