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-list和comment-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();
},

复制代码

效果图：