13518219792
网站建设资讯

NEWS

网站建设资讯

创新互联百度小程序教程：swan.setPageInfo

  • swan.setPageInfo
    • 方法参数
      • object 参数说明
    • 示例
      • 图片示例
      • 代码示例 1
      • 代码示例 2：开发者动态设置 swan.setPageInfo 字段
    • Bug & Tip

    swan.setPageInfo

    setPageInfo 接口目前只针对百度 App 开放使用。

    创新互联建站于2013年成立，先为岑巩等服务建站，岑巩等地企业，进行企业商务咨询服务。为岑巩企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

    配置页面基础信息的接口，目前在 Web 态代码和收藏里会被使用；小程序页面被收藏时，会用到 setPageInfo 中设置的页面标题。setMetaDescription/setMetaKeywords/setDocumentTitle 已停止维护，推荐使用 setPageInfo 。

    建议在 Page 的 onShow 生命周期中使用。由于 onShow 生命周期会在用户前进后退时触发，若数据来自 onLoad 等其他生命周期，建议使用变量形式存储并在 onShow 中调用 setPageInfo 函数，详情参见下面的代码示例 2 。

    解释：智能小程序可接入百度搜索和宿主 App 信息流，swan.setPageInfo 负责为小程序设置各类页面基础信息，包括标题、关键字、页面描述以及图片信息、视频信息等。开发者为智能小程序设置完备的页面基础信息，有助于智能小程序在搜索引擎和信息流中得到更加有效的展示和分发。其中 title 和 image 字段也增强了用户添加页面收藏的模板展现和回访体验（用户可以在小程序菜单中收藏当前页面，并通过百度 App “我的-常用功能-收藏”回访已收藏的页面）。

    注意：仅在 Web 态搜索场景下可预览 setPageInfo 效果，“搜索 Web 态” 与其他场景的区别见Web 态概述。预览方式详见下文示例。

    方法参数

    Object object

    object 参数说明

    属性名 类型 必填 默认值 说明
    title String 是 页面标题。
    keywords String 是 页面关键词，多个关键词之间使用英文逗号 “,” 隔开。
    description String 是 页面描述信息。
    releaseDate String 否（如宿主 App 信息流则为必填） 原始发布时间（年-月-日 时:分:秒 带有前导零），如：2010-07-01 16:30:30。
    articleTitle String 否 文章【内容】标题（适用于当前页面是图文、视频类的展示形式，文章标题需要准确标识当前文章的主要信息点；至少 6 个字，不可以全英文。）。
    image String/Array 否（页面有焦点图，或者正文有图片时需要设置） 图片线上地址，用于信息流/搜索等流量场景分发、用户收藏后的页面封面显示，展现时有图片可提升用户点击率。开发者可针对一个页面设置最多 3 张，图片必须为页面内图片。单张图片最大 2M ；封面图尺寸：宽>=375px ，高>=250px ，图片宽高比例 3：2 为佳。多张图时，用数组表示。
    video Object/Array 否（页面存在视频情况下必填） 视频信息，多个视频时，用数组表示。
    visit Object 否 浏览信息。最低支持版本 3.40.6。
    likes String 否 点赞量，若页面未统计可为空。最低支持版本 3.40.6。
    comments String 否 评论量，若页面未统计可为空。最低支持版本 3.40.6。
    collects String 否 收藏量，若页面未统计可为空。最低支持版本 3.40.6。
    shares String 否 分享量，若页面未统计可为空。最低支持版本 3.40.6。
    followers String 否 关注量，若页面未统计可为空。最低支持版本 3.40.6。
    success Function 否 接口调用成功的回调函数。
    fail Function 否 接口调用失败的回调函数。
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）。

    video 参数说明

    参数名 类型 必填 说明
    url String 是 视频地址。
    duration String 是 视频时长（单位：秒）
    image String 是 视频封面图

    visit 参数说明

    参数名 类型 必填 说明
    pv String 否 页面的浏览量（不去重用户）
    uv String 否 页面的点击量（去重用户）
    sessionDuration String 否 页面的用户人均停留时长（单位：秒）

    示例

    请在开发者工具中，单击 “预览”，选择 “WEB 预览”。点击 “在浏览器中调试” 查看效果（注意，在 Web 态中查看 SEO 信息设置时，URL 中必须包含 query 参数 “_swebfr=0”）

    图片示例

    代码示例 1

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  onShow() {
      3.   
  
  
    3.  swan.setPageInfo({
      4.   
  
  
    4.  title: '晒元宵节活动红包，爱奇艺60张年卡、600张季卡等你拿！-百度贴吧',
      5.   
  
  
    5.  keywords: '百度,百度贴吧,好运中国年,60,晒元,宵节',
      6.   
  
  
    6.  description: '晒元宵节活动红包，爱..昨天的百度App元宵节活动中，共发出2亿现金红包、含151万个手气现金大奖和240辆红旗轿车，谁是好运锦鲤，快来分享！马上惊喜升级~摇中红包的锦鲤们即刻晒出红包金额截图，我们将会抽取660位好运锦鲤',
      7.   
  
  
    7.  articleTitle: '晒元宵节活动红包，爱奇艺60张年卡、600张季卡等你拿！',
      8.   
  
  
    8.  releaseDate: '2019-01-02 12:01:30',
      9.   
  
  
    9.  image: [
      10.   
  
  
    10.  'https://c.hiphotos.baidu.com/forum/w%3D480/sign=73c62dda83b1cb133e693d1bed5456da/f33725109313b07e8dee163d02d7912396dd8cfe.jpg',
      11.   
  
  
    11.  'https://hiphotos.baidu.com/fex/%70%69%63/item/43a7d933c895d143e7b745607ef082025baf07ab.jpg'
      12.   
  
  
    12.  ],
      13.   
  
  
    13.  video: [{
      14.   
  
  
    14.  url: 'https://www.baidu.com/mx/v12.mp4',
      15.   
  
  
    15.  duration: '100',
      16.   
  
  
    16.  image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
      17.   
  
  
    17.  }],
      18.   
  
  
    18.  visit: {
      19.   
  
  
    19.  pv: '1000',
      20.   
  
  
    20.  uv: '100',
      21.   
  
  
    21.  sessionDuration: '130'
      22.   
  
  
    22.  },
      23.   
  
  
    23.  likes: '75',
      24.   
  
  
    24.  comments: '13',
      25.   
  
  
    25.  collects: '23',
      26.   
  
  
    26.  shares: '8',
      27.   
  
  
    27.  followers: '35',
      28.   
  
  
    28.  success: res => {
      29.   
  
  
    29.  console.log('setPageInfo success', res);
      30.   
  
  
    30.  },
      31.   
  
  
    31.  fail: err => {
      32.   
  
  
    32.  console.log('setPageInfo fail', err);
      33.   
  
  
    33.  }
      34.   
  
  
    34.  })
      35.   
  
  
    35.  }
      36.   
  
  
    36. });
      37.

    代码示例 2：开发者动态设置 swan.setPageInfo 字段

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  onLoad() {
      3.   
  
  
    3.  this.requestTask = new Promise((resolve, reject) => {
      4.   
  
  
    4.  const requestHandler = swan.request({
      5.   
  
  
    5.  url: '开发者服务器地址',
      6.   
  
  
    6.  header: {
      7.   
  
  
    7.  'content-type': 'application/json'
      8.   
  
  
    8.  },
      9.   
  
  
    9.  method: 'POST',
      10.   
  
  
    10.  dataType: 'json',
      11.   
  
  
    11.  responseType: 'text',
      12.   
  
  
    12.  data: {
      13.   
  
  
    13.  key: 'value'
      14.   
  
  
    14.  },
      15.   
  
  
    15.  success: res => {
      16.   
  
  
    16.  this.setData('data', res.data);
      17.   
  
  
    17.  resolve();
      18.   
  
  
    18.  },
      19.   
  
  
    19.  fail: err => {
      20.   
  
  
    20.  console.log('错误码：' + err.errCode);
      21.   
  
  
    21.  console.log('错误信息：' + err.errMsg);
      22.   
  
  
    22.  }
      23.   
  
  
    23.  });
      24.   
  
  
    24.  });
      25.   
  
  
    25.  },
      26.   
  
  
    26.  onShow() {
      27.   
  
  
    27.  this.requestTask.then( requestData => {
      28.   
  
  
    28.  let res = this.getData('data');
      29.   
  
  
    29.  swan.setPageInfo({
      30.   
  
  
    30.  title: res.title,
      31.   
  
  
    31.  keywords: res.keywords,
      32.   
  
  
    32.  description: res.description,
      33.   
  
  
    33.  articleTitle: res.articleTitle,
      34.   
  
  
    34.  releaseDate: res.releaseDate,
      35.   
  
  
    35.  image: res.image,
      36.   
  
  
    36.  video: res.video,
      37.   
  
  
    37.  visit: res.visit,
      38.   
  
  
    38.  likes: '75',
      39.   
  
  
    39.  comments: '13',
      40.   
  
  
    40.  collects: '23',
      41.   
  
  
    41.  shares: '8',
      42.   
  
  
    42.  followers: '35',
      43.   
  
  
    43.  success: res => {
      44.   
  
  
    44.  console.log('setPageInfo success');
      45.   
  
  
    45.  },
      46.   
  
  
    46.  fail: err => {
      47.   
  
  
    47.  console.log('setPageInfo fail', err);
      48.   
  
  
    48.  }
      49.   
  
  
    49.  })
      50.   
  
  
    50.  })
      51.   
  
  
    51.  }
      52.   
  
  
    52. });
      53.

    Bug & Tip

    1. releaseData 、 articleTitle 、 image 、 video 、 visit 字段用于宿主 App 信息流抓取收录分发，并有助于搜索准确理解页面内容。
    2. title 字段用于搜索抓取当前页面，articleTitle 字段用于当前页面在宿主 App 信息流中的标题展示。
    3. 当前页面包含视频信息时 video 为必填字段， url 、 duration 、 image 为 video 的必填参数；如当前页面不包含视频信息，可不填写。
    4. 当前页面包含焦点图或者正文图片时 image 为必填字段。
    5. 当前页面能够统计到用户分发、互动和时长等数据时，visit 字段建议填写。开发者可根据页面实际统计的情况完善 pv 、 uv 、 sessionDuration 、 likes 、 comments 、 collects 、 shares 、 followers 字段，若页面不包含以上字段时，可不填写。

    本文名称：创新互联百度小程序教程：swan.setPageInfo
    地址分享：http://cdysf.com/article/cciecpp.html

    其他资讯