百度智能小程序 topOne圖文

topOne 圖文

topOne 動態(tài)庫功能介紹

topOne 是一個由百度小程序官方發(fā)布的名為“topOne”的圖文組件。通過提供指定的參數(shù)展示圖文內容。包括文章標題、用戶信息（頭像，其他信息）、段落、圖片等。

使用 topOne 動態(tài)庫

topOne 動態(tài)庫包含一個名為 top-one 的自定義組件。

topOne 動態(tài)庫配置

app.json 文件代碼示例

"dynamicLib": {
    // 'myTopOne' 是個可自己定的別名。本小程序中統(tǒng)一用這個別名引用此動態(tài)庫。
    "myTopOne": {
        // 這個 provider 就是發(fā)布的動態(tài)庫唯一名字，須寫 'topOne'。
        "provider": "topOne"
    }
},

頁面 json 文件代碼示例
在頁面的 json 文件中，如下配置來使用此動態(tài)庫中的叫做 top-one 的自定義組件：

{
    "navigationBarTitleText": "智能小程序示例",
    "usingComponents": {
        // 這里 key 中的 'top-one' 是個可以自己任意指定的別名，
        // 本頁面或者本組件在模板中統(tǒng)一用此別名引用這個自定義組件。
        // 這里的 'myTopOne' 就是上面定義的，本小程序使用此動態(tài)庫的別名。
        // 這里 value 最后部分的 'top-one' 是此動態(tài)庫的公開的自定義組件（publicComponents）的名稱。
        "top-one": "dynamicLib://myTopOne/top-one"
    }
}

swan 文件引入代碼示例

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

js 文件中設置數(shù)據(jù)代碼示例

data: {
    d: {
        topOneArticleTitle: '如何使用topOne動態(tài)庫',
        topOneArticleInfo: ['2019-06-21', '136人閱讀'],
        topOneUserInfo: {
            photo: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/toponesmallimg.png',
            name: '百度小程序',
            info: ['動態(tài)庫', 'topOne']
        },
        topOneContentNodes: [
            {type: 'caption', text: '使用topOne動態(tài)庫'},
            {type: 'section', text: '它是一個由百度小程序官方發(fā)布的動態(tài)庫。包含一個名為 top-one 的自定義組件。實現(xiàn)了上述功能。'},
            {type: 'caption', text: 'topone配置圖片'},
            {type: 'section', text: '下面是 topone里配置的圖片示例。'},
            {type: 'img', src: "https://b.bdstatic.com/searchbox/icms/searchbox/img/toponebigimg.jpg"},
            {type: 'caption', text: 'topOne配置文字'},
            {type: 'section', text: 'topOne里可以配置文字。如這是一段文字。是不是很簡單？'}
        ]
    }
});

topOne 動態(tài)庫字段詳解

• topOneUserInfo：支持三個屬性：photo，name，info。

  屬性	類型	類型說明
  photo	String	圖片路徑
  name	String	用戶姓名信息
  info	Array	其他信息

• topOneContentNodes：該屬性的值為一個數(shù)組，數(shù)組每一項包含一個對象。對象支持如下幾種格式。

  類型	取值說明
  標題	{type: ‘caption’, text: ‘標題 content’}
  文章內容	{type: ‘section’, text: ‘文章 content’}
  圖片	{type: ‘img’, src: ‘xxx’}

展示示例