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

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


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

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

Code:

  1. {
  2. "name" : "xxxxxxxx",
  3. "appid" : "",
  4. // 添加如下代码:
  5. "mp-baidu" : {
  6. "usingComponents" : true,
  7. "appid" : "xxxxxxxx",
  8. "dynamicLib": {
  9. "myDynamicLib": {
  10. "provider": "swan-interaction"
  11. }
  12. }
  13. }
  14. }
  15. 复制代码

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

Code:

  1. "dynamicLib": {
  2. // 定义一个别名,小程序中用这个别名引用动态库。
  3. "myDynamicLib": {
  4. // 这是动态库的 'dynamicLibName',是全局唯一的名字,标志着被引用的动态库
  5. // swan-interaction 名字自定义
  6. "provider": "swan-interaction"
  7. }
  8. },
  9. 复制代码

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

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

Code:

  1. {
  2. "path": "pages/content/news-detail",
  3. "style": {
  4. "navigationBarTitleText": "文章详情",
  5. "mp-baidu": {
  6. "usingSwanComponents": {
  7. "comment-list": "dynamicLib://myDynamicLib/comment-list",
  8. "comment-detail": "dynamicLib://myDynamicLib/comment-detail"
  9. }
  10. }
  11. }
  12. },
  13. 复制代码

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

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

Code:

  1. <comment-list :comment-param="commentParam"></comment-list>
  2. 复制代码

Code:

  1. data(){
  2. return {
  3. commentParam: {
  4. // 模拟数据,使用时请替换真实数据
  5. snid: '1',
  6. path: '/pages/content/news-detail?id=1',
  7. title: '测试文章标题'
  8. },
  9. commentParam: {
  10. // 模拟数据,使用时请替换真实数据
  11. snid: '1',
  12. path: '/pages/content/news-detail?id=1',
  13. title: '测试文章标题'
  14. }
  15. },
  16. onLoad(opt) {
  17. const { id,t } = opt;
  18. this.id = id;
  19. this.t = t;
  20. this.commentParam = {
  21. snid: id,
  22. path: `/pages/content/news-detail?id=${id}&t=${t}`,
  23. title: t
  24. }
  25. // 用于实现页面间的跳转,也可以放在 onLoad 生命周期中
  26. requireDynamicLib('myDynamicLib').listenEvent();
  27. },
  28. 复制代码

效果图: image.png




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

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

最新评论

暂无评论

热门文章

最新评论

网站数据

网站文章数:484

今日UV/PV/IP:2/2/2

昨日UV/PV/IP:9/10 /8

TOP