topOne动态库

topOne动态库功能介绍

topOne是一个由百度小程序官方发布的名为“topOne”的图文组件。通过提供指定的参数展示图文内容。包括文章标题、用户信息（头像，其他信息）、段落、图片等。

使用topOne动态库

topOne 动态库包含一个名为 top-one 的自定义组件。

topOne动态库配置

app.json 文件代码示例

  1. "dynamicLib": {
  2.     // 'myTopOne' 是个可自己定的别名。本小程序中统一用这个别名引用此动态库。
  3.     "myTopOne": {
  4.         // 这个 provider 就是发布的动态库唯一名字，须写 'topOne'。
  5.         "provider": "topOne"
  6.     }
  7. },

页面 json 文件代码示例在页面的 json 文件中，如下配置来使用此动态库中的叫做 top-one 的自定义组件：

  1. {
  2.     "navigationBarTitleText": "智能小程序示例",
  3.     "usingComponents": {
  4.         // 这里 key 中的 'top-one' 是个可以自己任意指定的别名，
  5.         // 本页面或者本组件在模板中统一用此别名引用这个自定义组件。
  6.         // 这里的 'myTopOne' 就是上面定义的，本小程序使用此动态库的别名。
  7.         // 这里 value 最后部分的 'top-one' 是此动态库的公开的自定义组件（publicComponents）的名称。
  8.         "top-one": "dynamicLib://myTopOne/top-one"
  9.     }
  10. }

swan 文件引入代码示例

  1. <top-one topOneArticleTitle="{{d.topOneArticleTitle}}"
  2.     topOneArticleInfo="{{d.topOneArticleInfo}}"
  3.     topOneUserInfo="{{d.topOneUserInfo}}"
  4.     topOneContentNodes="{{d.topOneContentNodes}}" />

js 文件中设置数据代码示例

  1. data: {
  2.     d: {
  3.         topOneArticleTitle: '如何使用topOne动态库',
  4.         topOneArticleInfo: ['2019-06-21', '136人阅读'],
  5.         topOneUserInfo: {
  6.             photo: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/toponesmallimg.png',
  7.             name: '百度小程序',
  8.             info: ['动态库', 'topOne']
  9.         },
  10.         topOneContentNodes: [
  11.             {type: 'caption', text: '使用topOne动态库'},
  12.             {type: 'section', text: '它是一个由百度小程序官方发布的动态库。包含一个名为 top-one 的自定义组件。实现了上述功能。'},
  13.             {type: 'caption', text: 'topone配置图片'},
  14.             {type: 'section', text: '下面是 topone里配置的图片示例。'},
  15.             {type: 'img', src: "https://b.bdstatic.com/searchbox/icms/searchbox/img/toponebigimg.jpg"},
  16.             {type: 'caption', text: 'topOne配置文字'},
  17.             {type: 'section', text: 'topOne里可以配置文字。如这是一段文字。是不是很简单？'}
  18.         ]
  19.     }
  20. });

topOne动态库字段详解

属性名类型必填说明
topOneArticleTitleString是文章的标题
topOneArticleInfoArray否文章信息，例如时间，阅读量等，数组每一项为写字符串
topOneUserInfoObject否用户信息，用户头像，用户名称，用户备注。详情见下文。
topOneContentNodesArray是文章内容。使用的为rich-text组件。
  • topOneUserInfo：支持三个属性：photo，name，info。
属性类型类型说明
photoString图片路径
nameString用户姓名信息
infoArray其他信息
  • topOneContentNodes：该属性的值为一个数组，数组每一项包含一个对象。对象支持如下几种格式。
类型取值说明
标题{type: 'caption', text: '标题 content'}
文章内容{type: 'section', text: '文章 content'}
图片{type: 'img', src: 'xxx'}

展示示例

图片