界面

交互

showToast

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

showToast(Object object)

显示消息提示框。

参数

Object object

object.icon 的合法值

示例代码

ft.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

注意

• ft.showLoading 和 ft.showToast 同时只能显示一个
• ft.showToast 应与 ft.hideToast 配对使用

showModal

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

showModal(Object object)

显示模态对话框

参数

Object object

object.success 回调函数​

参数

Object res

示例代码

ft.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

showLoading

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

showLoading(Object object)

显示 loading 提示框。需主动调用 ft.hideLoading 才能关闭提示框。

参数

Object object

示例代码

ft.showLoading({
  title: '加载中',
})

setTimeout(function () {
  ft.hideLoading()
}, 2000)

注意

• ft.showLoading 和 ft.showToast 同时只能显示一个
• ft.showLoading 应与 ft.hideLoading 配对使用

showActionSheet

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

showActionSheet(Object object)

显示操作菜单

参数

Object object

object.success 回调函数

参数

Object res

示例代码

ft.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success(res) {
    console.log(res.tapIndex)
  },
  fail(res) {
    console.log(res.errMsg)
  }
})

hideToast

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

hideToast(Object object)

隐藏消息提示框。

参数

Object object

hideLoading

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

hideLoading(Object object)

隐藏 loading 提示框。

参数

Object object

导航栏

showNavigationBarLoading

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

showNavigationBarLoading(Object object)

在当前页面显示导航条加载动画。

参数

Object object

setNavigationBarTitle

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

setNavigationBarTitle(Object object)

动态设置当前页面的标题。

参数

Object object

示例代码

ft.setNavigationBarTitle({
  title: '页面标题'
})

setNavigationBarColor

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

setNavigationBarColor(Object object)

设置页面导航条颜色。

参数

Object object

object.animation 的结构

object.animation.timingFunc 的合法值

示例代码

ft.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#ff0000',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

hideNavigationBarLoading

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

hideNavigationBarLoading(Object object)

在当前页面隐藏导航条加载动画。

参数

Object object

hideHomeButton

ft.hideHomeButton(Object object)

隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

参数

Object object

背景

setBackgroundTextStyle

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

ft.setBackgroundTextStyle(Object object)

动态设置下拉背景字体、loading 图的样式

参数

Object object

object.textStyle 的合法值

示例代码

ft.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})

setBackgroundColor

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

ft.setBackgroundColor(Object object)

动态设置窗口的背景色

参数

Object object

示例代码

ft.setBackgroundColor({
  backgroundColor: '#ffffff', // 窗口的背景色为白色
})

ft.setBackgroundColor({
  backgroundColorTop: '#ffffff', // 顶部窗口的背景色为白色
  backgroundColorBottom: '#ffffff', // 底部窗口的背景色为白色
})

Tab Bar

showTabBarRedDot

ft.showTabBarRedDot(Object object)

显示 tabBar 某一项的右上角的红点

参数

Object object

showTabBar

ft.showTabBar(Object object)

显示 tabBar

参数

Object object

setTabBarStyle

ft.setTabBarStyle(Object object)

动态设置 tabBar 的整体样式

参数

Object object

示例代码

wx.setTabBarStyle({
  color: '#FF0000',
  selectedColor: '#00FF00',
  backgroundColor: '#0000FF',
  borderStyle: 'white'
})

setTabBarItem

ft.setTabBarItem(Object object)

动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件。

参数

Object object

示例代码

ft.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

setTabBarBadge

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

为 tabBar 某一项的右上角添加文本

示例代码

ft.setTabBarBadge({
  index: 0,
  text: '1'
})

removeTabBarBadge

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

移除 tabBar 某一项右上角的文本

hideTabBarRedDot

ft.hideTabBarRedDot(Object object)

隐藏 tabBar 某一项的右上角的红点

参数

Object object

hideTabBar

ft.hideTabBar(Object object)

隐藏 tabBar

参数

Object object

字体

loadFontFace

ft.loadFontFace(Object object)

动态加载网络字体，文件地址需为下载类型。'2.10.0'起支持全局生效，需在 app.js 中调用。

注意：

1. 字体文件返回的 contet-type 参考 font (opens new window)，格式不正确时会解析失败。
2. 字体链接必须是https（ios不支持http)
3. 字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
4. 工具里提示 Faild to load font可以忽略
5. '2.10.0' 以前仅在调用页面生效。

参数

Object object

object.desc 的结构

object.success 回调函数

参数

Object res

object.fail 回调函数

参数

Object res

object.complete 回调函数

参数

Object res

示例代码

ft.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})

下拉刷新

startPullDownRefresh

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

startPullDownRefresh(Object object)

开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

参数

Object object

示例代码

ft.startPullDownRefresh()

stopPullDownRefresh

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

stopPullDownRefresh(Object object)

停止当前页面下拉刷新。

参数

Object object

示例代码

Page({
  onPullDownRefresh() {
    ft.stopPullDownRefresh()
  }
})

滚动

pageScrollTo

ft.pageScrollTo(Object object)

将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

参数

Object object

selector 语法

selector类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

示例代码

ft.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

动画

createAnimation

Animation ft.createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

参数

Object object

timingFunction 的合法值

返回值

Animation

Animation

动画对象

方法

• Array.<Object> Animation.export()
  ​ 导出动画队列。export 方法每次调用后会清掉之前的动画操作。

• Animation Animation.step(Object object)
  表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

• Animation Animation.matrix()
  同 transform-function matrix

• Animation Animation.matrix3d()
  同 transform-function matrix3d

• Animation Animation.rotate(number angle)
  从原点顺时针旋转一个角度

• Animation Animation.rotate3d(number x, number y, number z, number angle)
  从 固定 轴顺时针旋转一个角度

• Animation Animation.rotateX(number angle)
  从 X 轴顺时针旋转一个角度

• Animation Animation.rotateY(number angle)
  从 Y 轴顺时针旋转一个角度

• Animation Animation.rotateZ(number angle)
  从 Z 轴顺时针旋转一个角度

• Animation Animation.scale(number sx, number sy)
  缩放

• Animation Animation.scale3d(number sx, number sy, number sz)
  缩放

• Animation Animation.scaleX(number scale)
  缩放 X 轴

• Animation Animation.scaleY(number scale)
  缩放 Y 轴

• Animation Animation.scaleZ(number scale)
  缩放 Z 轴

• Animation Animation.skew(number ax, number ay)
  对 X、Y 轴坐标进行倾斜

• Animation Animation.skewX(number angle)
  对 X 轴坐标进行倾斜

• Animation Animation.skewY(number angle)
  对 Y 轴坐标进行倾斜

• Animation Animation.translate(number tx, number ty)
  平移变换

• Animation Animation.translate3d(number tx, number ty, number tz)
  对 xyz 坐标进行平移变换

• Animation Animation.translateX(number translation)
  对 X 轴平移

• Animation Animation.translateY(number translation)
  对 Y 轴平移

• Animation Animation.translateZ(number translation)
  对 Z 轴平移

• Animation Animation.opacity(number value)
  设置透明度

• Animation Animation.backgroundColor(string value)
  设置背景色

• Animation Animation.width(number|string value)
  设置宽度

• Animation Animation.height(number|string value)
  设置高度

• Animation Animation.left(number|string value)
  设置 left 值

• Animation Animation.right(number|string value)
  设置 right 值

• Animation Animation.top(number|string value)
  设置 top 值

• Animation Animation.bottom(number|string value)
  设置 bottom 值

自定义组件

nextTick

ft.nextTick(function callback)

延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）

参数

function callback

说明

因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作，当这几个接口被连续调用时，都是在一个同步流程中执行完的，因此若逻辑不当可能会导致出错。

一个极端的案例：当父组件的 setData 引发了子组件的 triggerEvent，进而使得父组件又进行了一次 setData，期间有通过 ft:if 语句对子组件进行卸载，就有可能引发奇怪的错误，所以对于不需要在一个同步流程内完成的逻辑，可以使用此接口延迟到下一个时间片再执行。

示例代码

Component({
  doSth() {
    this.setData({ number: 1 }) // 直接在当前同步流程中执行

    ft.nextTick(() => {
      this.setData({ number: 3 }) // 在当前同步流程结束后，下一个时间片执行
    })

    this.setData({ number: 2 }) // 直接在当前同步流程中执行
  }
})

菜单

getMenuButtonBoundingClientRect

基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。