AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【微信小程序开发小白零基础入门】微信小程序界面API详解学习笔记【建议收藏】

2022-05-26 925
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 文章目录【微信小程序开发小白零基础入门】微信小程序界面API【建议收藏】一、 交互反馈1. 消息提示框1.1.1 显示消息提示框1.1.2 关闭消息提示框2. 加载提示框2.2.1 显示加载提示框2.2.2 关闭加载提示框3. 模态弹窗4. 操作菜单二、 导航条设置2.1 当前页面标题设置2.2 导航条加载动画2.3 导航条颜色设置三、 tabBar设置3.1 tabBar标记3.1.1 设置tabBar标记3.1.2 移除tabBar标记3.2 tabBar红点3.2.1 显示tabBar红点3.2.2 隐藏tabBar红点3.3 onTabIte文章目录【微信小程序开发小白零基础入门】微信

文章目录

一、 交互反馈

1. 消息提示框

小程序使用wx.showToast(OBJECT)显示消息提示框，OBJECT参数说明如表所示62155f25350f8a7dee74a0bf4b4c863.png

1.1.1 显示消息提示框

icon有效值说明如下： 、success：icon默认值，用于显示成功图标，title文本最多显示 7 个汉字长度； 2、loading：显示加载图标，此时 title 文本最多显示 7 个汉字长度； 3、none：不显示图标，此时 title 文本最多可显示两行（最低版本1.9.0）。a56706fca3da409ebfab0cb754b513a3.png

js文件

 data: {
  },
  showToast: function () {
    wx.showToast({
      title: '智慧云工具箱',
      duration: 70000
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>(1) 显示消息提示框</view>
      <button type="primary" bindtap="showToast">显示Toast</button>
    </view>

5c9432532274451a97e6baf521ff413b.pngbed959c63d4f441492ed214d486d5679.png

1.1.2 关闭消息提示框

虽然消息提示框可以在指定时间后自动消失，小程序也可以使用wx.hideToast()提前关闭消息提示框。

a56706fca3da409ebfab0cb754b513a3.png

js文件

  hideToast: function () {
    wx.hideToast()
  },

<font color=#999AAA >json文件
```javascript
{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>(2) 关闭消息提示框</view>
      <button type="primary" bindtap="hideToast">关闭Toast</button>
    </view>
  </view>

cc6115d3c166482688127a887ee5907a.pnga7aa7c3b5c2945a3835a5dd4ecc4e62d.png

2. 加载提示框

2.2.1 显示加载提示框

小程序使用wx.showLoading(OBJECT)显示loading提示框，该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示983952b19bf2d64321c5dd6e4770d8a.png注：这种提示框不会自动消失，需主动调用 wx.hideLoading 才能关闭提示框。

a56706fca3da409ebfab0cb754b513a3.png

js文件

  showLoading: function () {
    wx.showLoading({
      title: '智慧云工具箱！'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view class='demo-box'>
      <view class='title'>(1) 显示加载提示框</view>
      <button type="primary" bindtap="showLoading">显示Loading</button>
    </view>

290c268e21fa43d8a57e39655c1db916.png0d0ecc6bef74415aacf336749aa935bd.png

2.2.2 关闭加载提示框

小程序使用wx.hideLoading()关闭loading 提示框，该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。

a56706fca3da409ebfab0cb754b513a3.png

js文件

  hideLoading: function () {
    wx.hideLoading()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view class='demo-box'>
      <view class='title'>(2) 关闭加载提示框</view>
      <button type="primary" bindtap="hideLoading">关闭Loading</button>
    </view>

7061122827bc416c8c8c25d3ebd0e648.pngb4c31b40efb24da49c08c2a4b7325722.png

3. 模态弹窗

小程序使用wx.showModal(OBJECT)显示模态弹窗，其OBJECT参数说明如表所示。5c6d72560a60ea07640ae2601193d3c.png其中success返回参数说明如表所示。a6fadf0fe718a3271d53b8ce418c2b6.pnga56706fca3da409ebfab0cb754b513a3.png

js文件

  showModal1:function(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗（有取消按钮）-智慧云工具箱',
      success: function (res) {
        if (res.confirm) {
          console.log('确定按钮被点击')
        } else if (res.cancel) {
          console.log('取消按钮被点击')
        }
      }
    })
  },
  showModal2: function () {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗（无取消按钮）-智慧云工具箱',
      showCancel:false
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='page-body'>
    <view class='demo-box'>
      <view class='title'>(1)有【取消】按钮的模态弹窗</view>
      <button type="primary" bindtap="showModal1">显示Modal</button>
    </view>
    <view class='demo-box'>
      <view class='title'>(2)无【取消】按钮的模态弹窗</view>
      <button type="primary" bindtap="showModal2">显示Modal</button>
    </view>
  </view>

d2084d2f353f44ccb80ad2b326796a52.png3a12f702f6044d2b9f7ee7b373e2c05a.pnga402206e2023439fb38dd4328880ac8c.pngfa75b8627d85472092fa2b5faa1f0994.png

4. 操作菜单

小程序使用wx.showActionSheet(OBJECT)显示从底部浮出的操作菜单，其OBJECT参数说明如下表所示。c4949ce1c67e76fc437e1b08e45811a.png其中success返回参数说明如下表所示。908d51497424dab15262d244cddfd7b.pnga56706fca3da409ebfab0cb754b513a3.png

js文件

data: {
  },
  showActionSheet: function () {
    wx.showActionSheet({
      itemList: ['智慧云工具箱菜单1', '智慧云工具箱菜单2', '智慧云工具箱菜单3', '智慧云工具箱菜单4', '智慧云工具箱菜单5','智慧云工具箱菜单6'],
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>显示操作菜单</view>
      <button type="primary" bindtap="showActionSheet">显示ActionSheet</button>
    </view>

f9a8e11dc9bc49809aa41b8b3b3edbcf.pngad359e73ac524ebfa3955f5ca3d212e2.png

二、 导航条设置

2.1 当前页面标题设置

小程序使用wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题，其OBJECT参数说明如表所示。ed609de4c4996cb503b6a868b18f436.pnga56706fca3da409ebfab0cb754b513a3.png

js文件

  data: {
    title:''
  },
  titleInput: function (e) {
    this.setData({title:e.detail.value})
  },
  setTitle: function () {
    let title = this.data.title;
    wx.setNavigationBarTitle({
      title: title
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view class='demo-box'>
      <view class='title'>设置导航条标题</view>
      <input type='text' placeholder='请输入自定义的导航条标题' bindinput='titleInput'></input>
      <button type="primary" bindtap="setTitle">设置标题</button>
    </view>

2ef8e10ca4d544aba81b93befc0c94b1.png83267d68cfab4a01bcebd0e496f42b27.png

2.2 导航条加载动画

微信小程序分别使用： 1、wx.showNavigationBarLoading()在当前页面显示导航条加载动画 2、wx.hideNavigationBarLoading()在当前页面隐藏导航条加载动画。a56706fca3da409ebfab0cb754b513a3.png

js文件

 data: {
  },
  showLoading: function () {
    wx.showNavigationBarLoading()
  },
  hideLoading: function () {
    wx.hideNavigationBarLoading()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>(1) 显示导航条加载动画</view>
      <button type="primary" bindtap="showLoading">显示加载动画</button>
    </view>
    <view class='demo-box'>
      <view class='title'>(2) 关闭导航条加载动画</view>
      <button type="primary" bindtap="hideLoading">关闭加载动画</button>
    </view>

903315d80ea24044bda5117344cc67d8.pngbf98a424085a466da6e8f0ddcd5b839e.png4c4eb0613741463ca895f774867e9527.png06072293e8a440c2a152a3a974a5adde.png

2.3 导航条颜色设置

微信小程序使用wx.setNavigationBarColor(OBJECT)设置导航条颜色，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示。ce7b26ddadcac9b86f3d1b4757ec985.png1、animation.timingFunc有效值如下： 2、linear：动画从头到尾的速度是相同的； 3、easeIn：动画以低速开始； 4、easeOut：动画以低速结束； 5、easeInOut：动画以低速开始和结束。

a56706fca3da409ebfab0cb754b513a3.png

js文件

 setColor:function(){
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#FFF',
      animation: {
        duration: 2000,
        timingFunc: 'easeInOut'
      }
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>设置导航条颜色</view>
      <button type="primary" bindtap="setColor">设置颜色</button>
    </view>

7a9a7bc437c04d2ba59c2edc1782d5aa.png39f3a86f41f846b29f4b12d66c144a09.png

三、 tabBar设置

3.1 tabBar标记

3.1.1 设置tabBar标记

小程序使用wx.setTabBarBadge(OBJECT)为tabBar某一项的右上角添加文本，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。

参数 类型 必填 说明
indlex Number 是 tabBar的哪—项，从左边算起，从O开始计数
text String 是 显示的文本，超过3个字符则显示成“…"
success Function 否 接口调用成功的回调函数
fail Eunction 否 查接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //设置文本
  setText: function () {
    wx.setTabBarBadge({
      index: 1,
      text: '99'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角文本设置</view>
      <button type="primary" size='mini' bindtap="setText">添加文本</button>
    </view>

c604a5604b944e2aabe3a020ebad3996.png7c735563c26546439d9e076609a3ed05.png

3.1.2 移除tabBar标记

小程序使用wx.removeTabBarBadge(OBJECT)移除 tabBar 某一项右上角的文本，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。

其OBJECT 参数说明如表所示。

参数 类型 必填 说明
index Number 是 tabBar的哪—项,从左边算起，从0开始计数
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //取消文本
  removeText: function () {
    wx.removeTabBarBadge({
      index: 1
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角文本设置</view>
      <button type="primary" size='mini' bindtap="removeText">取消文本</button>
    </view>

dfcc920ffac543f881454f8320d35acb.pngbc9466669dc7417d9f2f07ca2773859b.png

3.2 tabBar红点

3.2.1 显示tabBar红点

小程序使用wx.showTabBarRedDot(OBJECT)显示tabBar某一项的右上角的红点，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。

其OBJECT 参数说明如表所示。

参数 类型 必填 说明
index Number 是 tabBar的哪—项,从左边算起，从0开始计数
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //显示红点
  showRedDot: function () {
    wx.showTabBarRedDot({
      index: 1,
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角红点设置</view>
      <button type="primary" size='mini' bindtap="showRedDot">添加红点</button>
    </view>

8731fb336c224681ac9bd39f61b2fd3b.pngf0dd95c6a69c4d83ab71d87f6c26b9ce.png

3.2.2 隐藏tabBar红点

小程序使用wx.hideTabBarRedDot(OBJECT)隐藏tabBar某一项的右上角的红点，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。

参数 类型 必填 说明
index Number 是 tabBar的哪—项,从左边算起，从0开始计数
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //隐藏红点
  hideRedDot: function () {
    wx.hideTabBarRedDot({
      index: 1,
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>右上角红点设置</view>
      <button type="primary" size='mini' bindtap="hideRedDot">取消红点</button>
    </view>

c83d23926e164ab7be2cfe070893f771.pnga8ea32b9141d49369b014a42808294ae.png

3.3 onTabItemTap

在小程序中，点击 tabBar中的任一tab时会触发onTabItemTap(item)，该函数从基础库1.9.0开始支持，低版本需做兼容处理

3.4 设置tabBar样式

3.4.1 设置tabBar整体样式

小程序使用wx.setTabBarStyle(OBJECT)动态设置tabBar的整体样式，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。

参数 类型 说明
color HexColor tab上的文字默认颜色
selectedcolor Hexcolor tab上的文字选中时的颜色
backgroundColor HexColor tab的背景色
borderstyle String tabbar上边框的颜色，仅支持black/white
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //设置tabBar整体样式
  setBarStyle: function () {
    wx.setTabBarStyle({
      color: '#FF0000',
      selectedColor: '#0000FF'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>tabBar样式设置</view>
      <button type="primary" size='mini' bindtap="setBarStyle">整体设置</button>
      <button type="primary" size='mini' bindtap="resetBarStyle">还原</button>
    </view>

d414b09d4a2c45258b66333a1afd4c49.png75d4b367066f4008896220259cfda1ff.png

3.4.2 设置tabBar单项样式

小程序使用wx.setTabBarItem(OBJECT)动态设置tabBar某一项的内容，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。

参数 类型 必填 说明
index Number 是 tabBar的哪一项，从左边算起
text String 否 tab 上按钮文字
iconPath String 否 图片路径，icon大小限制为40kb，建议尺寸为81px * 81px，当postion为top时，此参数无效，不支持网络图片
selectedlconPath String 否 选中时的图片路径，icon大小限制为40kb，建议尺寸为81px * 81px，当postion为top 时，此参数无效
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //设置tabBar单项样式
  setBarItemStyle: function () {
    wx.setTabBarItem({
      index: 1,
      text: '首页',
      iconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103180726/0',
      selectedIconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103181160/0'
    })
  },
    //还原tabBar样式
  resetBarStyle: function () {
    wx.setTabBarItem({
      index: 1,
      text: 'tabBar例题',
      iconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103182831/0',
      selectedIconPath: 'http://inews.gtimg.com/newsapp_ls/0/14103183127/0'
    })
    wx.setTabBarStyle({
      color: '#000000',
      selectedColor: '#1AAD19'
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>tabBar样式设置</view>
      <button type="primary" size='mini' bindtap="setBarItemStyle">单项设置</button>
      <button type="primary" size='mini' bindtap="resetBarStyle">还原</button>
    </view>

0ae684a05dec4c6db1ad4dcaaec4ef48.png47ed10cfa23c466caf989d3ffde41217.pngdef03296f91e451abf3c1eb5a043bd06.png8e7cea2a55c843ecbcaf299636185506.png

3.5 tabBar

3.5.1 显示tabBar

小程序使用wx.showTabBar(OBJECT)显示 tabBar，该接口从基础库 1.9.0 开始支持，低版本需做兼容处理。其OBJECT 参数说明如表所示。

参数 类型 必填 说明
animation Boolean 否
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数〔调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //显示tabBar
  showTabBar: function () {
    wx.showTabBar({})
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='title'>tabBar的显示与隐藏</view>
      <button type="primary" size='mini' bindtap="showTabBar">显示tabBar</button>
    </view>

bdf2e7c556384acaa38af42c7b8d75ba.png328ce99561a74d9abcbb406265755872.png

3.5.2 隐藏tabBar

小程序使用wx.hideTabBar(OBJECT)隐藏 tabBar，该接口从基础库1.9.0 开始支持，低版本需做兼容处理。其OBJECT 参数说明如表所示。

参数 类型 必填 说明
animation Boolean 否
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数〔调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //隐藏tabBar
  hideTabBar: function () {
    wx.hideTabBar({})
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

     <view class='title'>tabBar的显示与隐藏</view>
         <button type="primary" size='mini' bindtap="hideTabBar">隐藏tabBar</button>
    </view>

3b76e7b2cbfa445c8262eef51a13a058.pngd5bda22a36df4ef0b64413d407f1a904.png

四、 页面导航

4.1 跳转新页面

小程序使用wx.navigateTo(OBJECT)保留当前页面，并在当前页面上方打开应用内指定的新页面。这种打开方式可以点击新页面左上角的返回按钮或使用wx.navigateBack接口返回到原页面。其OBJECT参数说明如表所示。

参数 类型 必填 说明
url String 是 需要跳转的应用内非 tabBar的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，多个参数用&分隔;如’path?key=value&key2=value2&…keyN=valueN’
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功与否都会执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

navigateTo: function () {
    wx.navigateTo({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>(1)wx.navigateTo</view>
      <button type="primary" size='mini' bindtap="navigateTo">跳转新页面</button>
    </view>

6f51f77d93ba4a29b5d14a485b13f3b2.png894224abe21549dc9ad8ccfe41403a94.png

4.2 返回指定页面

小程序使用wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。 OBJECT 参数说明如表所示。

参数 类型 必填 说明
delta Number 1 返回的页面数，如果delta大于现有页面数，则返回到首页

a56706fca3da409ebfab0cb754b513a3.png

js文件

  navigateBack:function() {
    wx.navigateBack({})
  },

json文件

  redirectTo: function () {
    wx.redirectTo({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>(3)wx.redirectTo</view>
      <button type="primary" size='mini' bindtap="redirectTo">当前页面重定向</button>
    </view>

71128d937587405aa56f6d8dbb9dc888.png

496a09002bc749e68234ae113d2d2b38.png

4.4 重启页面

小程序使用wx.reLaunch(OBJECT)关闭所有页面，重新打开到应用内的某个页面。该接口从基础库 1.1.0 开始支持，低版本需做兼容处理。 其OBJECT 参数说明如表所示。

参数 类型 必填 说明
url String 是 ―需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔;如’path?key=value&key2=value2’，如果跳转的页面路径是tabBar页面则不能带参数
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

a56706fca3da409ebfab0cb754b513a3.png

js文件

  reLaunch:function(){
    wx.reLaunch({
      url: '/pages/zhygjx/new/new',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>(4)wx.reLaunch</view>
      <button type="primary" size='mini' bindtap="reLaunch">重启页面</button>
    </view>

c1f254e9eb87465daa4e1de7f56eacde.png0141c0379684472a8823bc7d9478b716.png

4.5 切换tabBar页面

小程序使用wx.switchTab(OBJECT)跳转到指定的tabBar页面，并关闭其他页面。 其OBJECT 参数说明如表所示。

参数 类型 必填 说明
url String 是 需要跳转的tabBar页面的路径（需在app.,json的tabBar字段定义的页面)，路径后不能带参数
success Function 否 接调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

js文件

  switchTab: function () {
    wx.switchTab({
      url: '/pages/zhygjx/tabBar/tabBar',
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 

    <view class='demo-box'>
      <view class='title'>(5)wx.switchTab</view>
      <button type="primary" size='mini' bindtap="switchTab">切换到tabBar例题页面</button>
    </view>

33e0ca4696354d11978f81084ce78439.png85a0ee8070204ba5978467a3a7554dac.png

五、 动画

 小程序组件拥有animation属性来显示动画，其动画效果实现需要三个步骤：
 （1）创建动画实例；
 （2）通过调用实例的方法来描述动画；
 （3）通过动画实例的export方法导出动画数据传递给组件的animation属性。

5.1 动画实例

小程序使用wx.createAnimation(OBJECT)可以创建一个动画实例animation。 其OBJECT参数说明如表所示。

参数 类型 必填 默认值 说明
duration lnteger 否 400 动画持续时间,单位ms
timingFunetion String 否 “linear” 定义动画的效果
delay lnteger 否 0 动画延迟时间，单位ms
transformOrigin string 否 "50%50%0 设置transform-origin

timingFunction 有效值如下：

1、linear：动画从头到尾的速度是相同的；
2、ease：动画以低速开始，然后加快，在结束前变慢；
3、ease-in：动画以低速开始；
4、ease-in-out：动画以低速开始和结束；
5、ease-out：动画以低速结束；
6、step-start：动画第一帧就跳至结束状态直到结束；
7、step-end：动画一直保持开始状态，最后一帧跳到结束状态。

5.2 动画描述

动画实例可以调用animation对象的相关方法来描述动画，调用结束后会返回自身。

animation对象的方法可以分为6类，分别用于控制组件的：
1、样式
2、旋转
3、缩放
4、偏移
5、倾斜
6、矩阵变形

5.2.1 控制组件样式的方法

控制组件样式的方法说明如下表所示。

方法 参数 说明
opacity value 透明庶，参数范围0~1
backgroundcolor color 颜色值
width length 长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
height length 长度值，如果传入 Number则默认使用px，可传入其他自定义单位的长度值
top length 长度值，如果传入Number则默认使用px。可传入其他自定义单位的长度值
left length 长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
bottom length 长度值，如果传入Number则默认使用px，可传入其他自定义单位的长度值
right length 长度值，如果传入Number则默认使用px。可传入其他自定义单位的长度值

5.2.2 控制组件旋转的方法

控制组件旋转的方法说明如下表所示。

方法 参数 说明
rotate deg deg的范围-180~180，从原点顺时针旋转一个deg角度
rotatex deg deg的范围-180~180，在X轴旋转一个deg角度
rotateY deg deg的范围-180~180，在Y轴旋转一个deg角度
rotatez deg deg的范围-180~180，在Z轴旋转一个deg角度
rotatesd (xy,z,deg) 同transform-function rotate3d

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //旋转
  rotate: function () {
    this.animation.rotate(45).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

      <button type="primary" size='mini' bindtap="rotate">旋转</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}

56ec87eedb7347c1be94017d975eb7f2.pngc18e0f4a85d747cc93ed7b60dafea091.png

5.2.3 控制组件缩放的方法

控制组件缩放的方法说明如下表所示。

方法 参数 说明
scale sx.[sy] 一个参数时，表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数
scalex sx 在X轴缩放sx倍数
scaleY sy 在Y轴缩放sy倍数
scalez sz 在Z轴缩放sy倍数
scale3d (sx,sy,sz) 在X轴缩放sx倍数，在Y轴缩放sx倍数，在Z轴缩放sz倍数
a56706fca3da409ebfab0cb754b513a3.png

js文件

  //缩放
  scale: function () {
    this.animation.scale(0.5).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

      <button type="primary" size='mini' bindtap="scale">缩放</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}

26be866b15604a6ea31885e2f9312a81.pngecaaeaaa9ed246b98ca66b230b6e4777.png

5.2.4 控制组件偏移的方法

控制组件偏移的方法说明如下表所示。

方法 参数 说明
translate tx.[sy] 一个参数时，表示在X轴、Y轴同时缩放tx倍数;两个参数时表示在X轴缩放tx倍数，在Y轴缩放sy倍数
translateX tx 在X轴缩放tx倍数


translateY ty 在Y轴缩放ty倍数
translateZ tz 在Z轴缩放ty倍数
translatesd (tx,ty,tz) 在X轴缩放sx倍数，在Y轴缩放tx倍数，在Z轴缩放tz倍数

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //偏移
  translate: function () {
    this.animation.translate(100, 50).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

      <button type="primary" size='mini' bindtap="translate">偏移</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}

c1205c76424a4f16ad516240e907e46a.pngc0ad7b945aa54f7699390add45c56fd5.png

5.2.5 控制组件倾斜的方法

控制组件倾斜的方法说明如下表所示。

方法 参数 说明
skew ax,[ay] 参数范围-180~180;一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度;两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度
skewx ax 参数范围-180~180;Y轴坐标不变，X轴坐标延顺时针倾斜ax度
skewY ay 参数范围-180~180;X轴坐标不变，Y轴坐标延顺时针倾斜ay度

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //倾斜
  skew: function () {
    this.animation.skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

      <button type="primary" size='mini' bindtap="skew">倾斜</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}

446585abe2c54fa1bb3f49b24547c816.png

5.2.6 控制组件矩阵变形的方法

控制组件矩阵变形的方法说明如下表所示。

方法 参数 说明
matrix (a,b,c,d,tx,ty) 同transform-function matrix
matrix3d 同transform-function matrix3d

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //同时动画
  sync: function () {
    this.animation.rotate(45).scale(0.5).translate(100, 50).skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },
  //依次动画
  queue: function () {
    this.animation.rotate(45).step().scale(0.5).step().translate(100, 50).step().skewX(45).step()
    this.setData({ animation: this.animation.export() })
  },
  //还原
  reset: function () {
    this.animation.rotate(0).scale(1).translate(0, 0).skewX(0).step()
    this.setData({ animation: this.animation.export() })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

      <button bindtap="sync">同时动画</button>
      <button bindtap="queue">依次动画</button>
      <button bindtap="reset">还原</button>

wxss文件

.animation-view{
  width: 660rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx auto;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}

5.3 动画导出

在声明完animation对象并描述了动画方法后，还需要使用export()将该对象导出到组件的animation属性中，方可使得组件进行动画效果。

js文件

//1. 创建animation对象
var animation = wx.createAnimation()
//2. 描述第一个动画
animation.scale(2).step()
//3.导出至组件的动画属性
this.setData({animationData:animation.export()})
//4. 描述第二个动画
animation.rotate(180).step()
//5.导出至组件的动画属性
this.setData({animationData:animation.export()})

json文件 

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view animation="{{animationData}}"></view>

217ca2c5bc7448fe95bc00ee32eb1dfd.png616e448b0156412b84d9e1ec5ec81e93.png4c0be0c272a149ffb35c3facf2d500b6.pnga42663a88ae44a1aadcdc06d81d50d45.pngbf3c8d57ae124aeabe7f2ef995b22310.png1606b853def14904b576ba4289874ba0.png

六、 页面位置

小程序使用wx.pageScrollTo(OBJECT)将页面滚动到目标位置，该接口从基础库 1.4.0 开始支持，低版本需做兼容处理。其OBJECT参数说明如表所示。

参数 类型 必填 说明
serollTop Number 是 滚动到页面的目标位置(单位px)
duration Number 否 滚动动画的时长。默认30oms，单位ms

a56706fca3da409ebfab0cb754b513a3.png

js文件

  //回到顶部
  backToTop:function(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration:2000
    })
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

    <view class='demo-box'>
      <view class='title'>wx.pageScrollTo(OBJECT)的用法</view>
      <view class='test'>这是一个高度超过手机屏幕的组件</view>
      <button type="primary" bindtap="backToTop">回到顶部</button>
    </view>

165cde9a3d9a4c50a7cab2760bdf83c5.pngec53b458f0d54e52974111eacca42dd3.png

七、 绘图

7.1 绘制矩形

1. 创建矩形 小程序使用画布对象的rect方法创建矩形，然后使用fill()或stroke()方法在画布上填充实心矩形或描边空心矩形。

参数解释如下：
x：Number类型，矩形左上角点的x坐标；
y：Number类型，矩形左上角点的y坐标；
width：Number类型，矩形的宽度；
height：Number类型，矩形的高度。

a56706fca3da409ebfab0cb754b513a3.png

js文件

 fillRect:function(){
    let ctx = this.ctx;
    ctx.rect(50, 50, 200, 200)
    ctx.setFillStyle('orange')
    ctx.fill()
    ctx.draw()
  },
  strokeRect: function () {
    let ctx = this.ctx;
    ctx.rect(100, 100, 100, 100)
    ctx.setStrokeStyle('purple')
    ctx.stroke()
    ctx.draw()
  },
  clearRect: function () {
    let ctx = this.ctx;
    ctx.clearRect(0, 0, 300, 300)
    ctx.draw()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建画布上下文
    this.ctx = wx.createCanvasContext('myCanvas')
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view class='demo-box'>
      <view class='title'>绘制矩形</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
      <button type='primary' size='mini' bindtap='fillRect'>填充矩形</button>
      <button type='primary' size='mini' bindtap='strokeRect'>描边矩形</button>
      <button type='primary' size='mini' bindtap='clearRect'>清空画布</button>
    </view>

wxss文件

button{
  margin: 10rpx;
}

cf0d1c9312cc4c4aadb29c8bec7b2068.png8f872ce2455240da82824482703cc224.png9ce6e76135a84559b4d5545ae224ee02.png8f872ce2455240da82824482703cc224.pngf10b584910574b5a939946c4ce69f56e.png

7.2 绘制路径

路径（Path）是绘制图形轮廓时画笔留下的轨迹，也可以理解为画笔画出的像素点组成的线条。多个点形成线段或曲线，不同的线段或曲线相连接又形成了各种形状效果。 绘制路径主要有以下4种方法： 1、beginPath()：用于新建一条路径，也是图形绘制的起点。每次调用该方法都会清空之前的绘图轨迹记录，重新开始绘制新的图形。 2、closePath()：该方法用于闭合路径。当执行该方法时会从画笔的当前坐标位置绘制一条线段到初始坐标位置来闭合图形。此方法不是必需的，若画笔的当前坐标位置就是初始坐标位置，则该方法可以省略不写。 3、stroke()：在图形轮廓勾勒完毕后需要执行该方法才能正式将路径渲染到画布上。 4、fill()：可以使用该方法为图形填充颜色，生成实心图形。若并未执行closePath()方法来闭合图形，则在此方法被调用时会自动生成线段连接画笔当前坐标位置和初始坐标位置，形成闭合图形然后再进行填充颜色。

a56706fca3da409ebfab0cb754b513a3.png

绘制线段

js文件

 //绘制基本图形
  drawSample: function () {
    let ctx = this.ctx
    //绘制三角形
    ctx.beginPath()
    ctx.moveTo(150, 75)
    ctx.lineTo(225, 225)
    ctx.lineTo(75, 225)
    ctx.closePath()
  },
  //描边路径
  strokePath:function(){
    let ctx = this.ctx
    this.drawSample()
    ctx.setStrokeStyle('red')
    ctx.stroke()
    ctx.draw()
  },
  //填充路径
  fillPath: function () {
    let ctx = this.ctx
    this.drawSample()
    ctx.setFillStyle('blue')
    ctx.fill()
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>绘制线段</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
      <button type='primary' size='mini' bindtap='strokePath'>描边路径</button>
      <button type='primary' size='mini' bindtap='fillPath'>填充路径</button>
    </view>

wxss文件

button{
  margin: 10rpx;
}

ad147a56b8094ddc91c82f16ee7ce96b.png

c36edc49032b46e7b55b0f7cd65b4a8a.png

绘制圆弧

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】

a56706fca3da409ebfab0cb754b513a3.png

js文件

 onLoad: function (options) {
    //创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')
    //设置填充颜色为黄色
    ctx.setFillStyle('yellow')
    //绘制圆形的脸，并填充为黄色
    ctx.beginPath()
    ctx.arc(150, 150, 80, 0, Math.PI * 2, true)
    ctx.stroke()
    //如果不需要勾勒脸的轮廓，此句可省略
    ctx.fill()
    //设置填充颜色为黑色
    ctx.setFillStyle('black')
    //填充黑色的左眼
    ctx.beginPath()
    ctx.arc(190, 130, 10, 0, Math.PI * 2, true)
    ctx.fill()
    //填充黑色的右眼
    ctx.beginPath()
    ctx.arc(110, 130, 10, 0, Math.PI * 2, true)
    ctx.fill()
    //绘制带有弧度的笑容
    ctx.beginPath()
    ctx.arc(150, 160, 50, 0, Math.PI, false)
    ctx.stroke()
    //全部绘制到画布上
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

<view class='demo-box'>
      <view class='title'>绘制圆弧</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>

77a5696cc0ea4dcdbb8845b7048c5716.png

绘制曲线

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】a56706fca3da409ebfab0cb754b513a3.png

js文件

 onLoad: function (options) {
    //创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')
    //设置填充颜色为红色
    ctx.setFillStyle('red');
    //三次曲线
    ctx.beginPath();
    ctx.moveTo(90, 55);
    ctx.bezierCurveTo(90, 52, 85, 40, 65, 40);
    ctx.bezierCurveTo(35, 40, 35, 77.5, 35, 77.5);
    ctx.bezierCurveTo(35, 95, 55, 117, 90, 135);
    ctx.bezierCurveTo(125, 117, 145, 95, 145, 77.5);
    ctx.bezierCurveTo(145, 77.5, 145, 40, 115, 40);
    ctx.bezierCurveTo(100, 40, 90, 52, 90, 55);
    ctx.fill();
    //绘制到画布上
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>使用三次贝塞尔曲线绘制爱心</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>
c05479903c5c43e982d3495944c464b1.png

7.3 绘制文本

1、填充文本

2、设置字体大小

3、设置文本基准线

4、设置文本对齐方式

5、设置字体风格

【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】a56706fca3da409ebfab0cb754b513a3.png

js文件

onLoad: function (options) {
    const ctx = wx.createCanvasContext('myCanvas')
    //设置字号
    ctx.setFontSize(40)
    //设置文本水平基准线
    ctx.setTextBaseline('bottom')
    //填充文字
    ctx.fillText('你好', 30, 150)
    //设置填充颜色
    ctx.setFillStyle('green')
    //设置文本水平基准线
    ctx.setTextBaseline('top')
    //填充文字
    ctx.fillText('智慧云工具箱', 60, 150)
    ctx.draw()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>绘制文本</view>
      <canvas canvas-id='myCanvas' style='border:1rpx solid'></canvas>
    </view>

f93875e01ffa4307a28ce78f72569f21.png

八、 下拉刷新

8.1 监听下拉刷新

小程序在Page中定义了onPullDownRefresh处理函数，用于监听当前页面用户下拉刷新事件。

8.2 开始下拉刷新

小程序使用wx.startPullDownRefresh(OBJECT)触发下拉刷新动画，效果与用户手动下拉刷新一致。该接口从基础库 1.5.0 开始支持，低版本需做兼容处理。 其OBJECT参数说明如表所示。

参数 类型 必填 说明
success Function 否 接口调用成功的回调函数。返回String类型参数errMsg表示调用结果
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功与否都执行)

8.3 停止下拉刷新

小程序使用wx.stopPullDownRefresh()停止当前页面下拉刷新。a56706fca3da409ebfab0cb754b513a3.png

js文件

 //开始下拉刷新
  startPullDown:function(){
    wx.startPullDownRefresh({
      success: function (res) {
        console.log(res.errMsg)
      }
    })
  },
  //停止下拉刷新
  stopPullDown: function () {
    wx.stopPullDownRefresh()
  },

json文件

{"navigationBarTitleText": "智慧云工具箱-微信小程序界面API"
}

wxml文件

 <view class='demo-box'>
      <view class='title'>模拟下拉刷新</view>
      <button type='primary' bindtap='startPullDown'>开始下拉</button>
      <button type='primary' bindtap='stopPullDown'>停止下拉</button>
    </view>

wxss文件

button{
  margin: 10rpx;
}

d3f163972c444679aaf800912cfbd8e3.png572df569b3004d65956c3b6b193fb903.png

九、 推荐小程序（欢迎各位大佬指导）

文章标签：
JavaScript
API
数据格式
JSON
小程序
关键词：
API开发
微信api
小程序微信
微信开发
开发API
游客5yjykjssz3skc
目录
相关文章
魔羯座liaotianfeile
|
8月前
|
缓存 监控 前端开发
顺企网 API 开发实战：搜索 / 详情接口从 0 到 1 落地（附 Elasticsearch 优化 + 错误速查）
企业API开发常陷参数、缓存、错误处理三大坑？本指南拆解顺企网双接口全流程，涵盖搜索优化、签名验证、限流应对，附可复用代码与错误速查表，助你2小时高效搞定开发，提升响应速度与稳定性。
魔羯座liaotianfeile
324 2
魔羯座liaotianfeile
|
8月前
|
API 开发者 数据采集
高效获取淘宝商品详情：API 开发实现链接解析的完整技术方案
2025反向海淘新机遇：依托代购系统，聚焦小众垂直品类，结合Pandabay数据选品，降本增效。系统实现智能翻译、支付风控、物流优化，助力中式养生茶等品类利润翻倍，新手也能快速入局全球市场。
魔羯座liaotianfeile
1537 2
高效获取淘宝商品详情：API 开发实现链接解析的完整技术方案
魔羯座liaotianfeile
|
8月前
|
存储 缓存 算法
淘宝买家秀 API 深度开发：多模态内容解析与合规推荐技术拆解
本文详解淘宝买家秀接口（taobao.reviews.get）的合规调用、数据标准化与智能推荐全链路方案。涵盖权限申请、多模态数据清洗、情感分析、混合推荐模型及缓存优化，助力开发者提升审核效率60%、商品转化率增长28%，实现UGC数据高效变现。
魔羯座liaotianfeile
543 0
魔羯座liaotianfeile
|
8月前
|
存储 缓存 算法
亚马逊 SP-API 深度开发：关键字搜索接口的购物意图挖掘与合规竞品分析
本文深度解析亚马逊SP-API关键字搜索接口的合规调用与商业应用，涵盖意图识别、竞品分析、性能优化全链路。通过COSMO算法解析用户购物意图，结合合规技术方案提升关键词转化率，助力卖家实现数据驱动决策，安全高效优化运营。
魔羯座liaotianfeile
568 0
兵临天下19970108016
|
10月前
|
JSON API 数据安全/隐私保护
深度分析淘宝卖家订单详情API接口，用json返回数据
淘宝卖家订单详情API（taobao.trade.fullinfo.get）是淘宝开放平台提供的重要接口，用于获取单个订单的完整信息，包括订单状态、买家信息、商品明细、支付与物流信息等，支撑订单管理、ERP对接及售后处理。需通过appkey、appsecret和session认证，并遵守调用频率与数据权限限制。本文详解其使用方法并附Python调用示例。
兵临天下19970108016
1275 57
一个幽默的程序员
|
9月前
|
数据可视化 测试技术 API
从接口性能到稳定性：这些API调试工具，让你的开发过程事半功倍
在软件开发中，接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快，传统方式已难满足需求，专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具，对比其功能与适用场景，并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案，助力提升API开发与测试效率。
一个幽默的程序员
1659 122
技术交流18179014480
|
8月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
技术交流18179014480
1032 136
技术交流18179014480
|
8月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程，可实现淘宝拍立淘按图搜索的完整调用链路，并获取结构化的JSON商品数据，支撑电商比价、智能推荐等业务场景。
技术交流18179014480
842 138
体育数据Lynne
|
9月前
|
JSON 前端开发 API
如何调用体育数据足篮接口API
本文介绍如何调用体育数据API：首先选择可靠服务商并注册获取密钥，接着阅读文档了解基础URL、端点、参数及请求头，然后使用Python等语言发送请求、解析JSON数据，最后将数据应用于Web、App或分析场景，同时注意密钥安全、速率限制与错误处理。
体育数据Lynne
951 152
技术交流18179014480
|
10月前
|
JSON 算法 安全
淘宝商品详情API接口系列，json数据返回
淘宝开放平台提供了多种API接口用于获取商品详情信息，主要通过 淘宝开放平台（Taobao Open Platform, TOP） 的 taobao.tbk.item.info.get（淘宝客商品详情）或 taobao.item.get（标准商品API）等接口实现。以下是关键信息及JSON返回示例：
技术交流18179014480
1012 0

热门文章

最新文章

  • 1
    Ant Design Pro 关闭mock数据 改成使用服务器API
  • 2
    [XMOVE自主设计的体感方案] XMove Studio管理系统（二）应用开发API简要介绍
  • 3
    Flink DataStream API 批处理能力演进之路
  • 4
    11、Windows API 内存管理（1）
  • 5
    Qt 窗口常用位置API函数 & 绘图原理 & 双缓冲机制 总结
  • 6
    【COCO数据集】COCO API 解析图像数据和目标标签，vision-transformer DETR的相关transforms操作实现
  • 7
    百度地图API : 自定义标注图标
  • 8
    ZooKeeper Watch Java API浅析exists
  • 9
    ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
  • 10
    ArcGIS API for Silverlight 地图元素点闪烁，线流动显示的处理方式
  • 1
    基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    363
  • 2
    基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
    512
  • 3
    基于微信小程序的民宿短租系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    439
  • 4
    基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
    356
  • 5
    基于微信小程序的大学生科技竞赛管理系统的+springboot+vue.js附带文章和源代码设计说明文档ppt
    342
  • 6
    基于微信小程序的宠物寄养平台的+ssm+vue.js附带文章和源代码设计说明文档ppt
    333
  • 7
    基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
    216
  • 8
    基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
    295
  • 9
    游戏账号交易微信小程序+ssm+vue.js附带文章和源代码设计说明文档ppt
    342
  • 10
    基于微信小程序的场地预约+ssm+vue.js附带文章和源代码设计说明文档ppt
    269

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • Java Spring Boot开发实战系列课程【第15讲】：Spring Boot 2.0 API与Spring REST Docs实战
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
    • 下一篇
    阿里云数据库产品支持免费试用吗？最新可试用数据库规格信息、配置及可试用人群参考