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

goldenlee    前端    999+ 次    2022-03-16 10:11:24


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"></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: '测试文章标题'
  }
},
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
    }
    // 用于实现页面间的跳转,也可以放在 onLoad 生命周期中
    requireDynamicLib('myDynamicLib').listenEvent();
},

复制代码

效果图: image.png




上一篇: 如何在 Laravel 代码中正确地使用数据库事务

下一篇: nuxtjs下的axios跨域代理

最新评论

暂无评论

热门文章

最新评论

网站数据

网站文章数:481

今日UV/PV/IP:26/30/26

昨日UV/PV/IP:23/30 /23

TOP