FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 界面

# 交互

# showToast

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

showToast(Object object)

显示消息提示框。

参数

Object object

属性 类型 默认值 必填 说明
title string 提示的内容
icon string 'success' 图标
image string 自定义图标的本地路径,image 的优先级高于 icon
duration number 1500 提示的显示时长
mask boolean false 是否显示透明蒙层
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.icon 的合法值

说明
success 显示成功图标,此时 title 文本最多显示两行
loading 显示加载图标,此时 title 文本最多显示两行
error 显示失败图标,此时 title 文本最多显示两行
none 不显示图标,此时 title 文本最多可显示两行

示例代码

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

注意

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

# showModal

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

showModal(Object object)

显示模态对话框

参数

Object object

属性 类型 默认值 必填 说明
title string 提示的标题
content string 提示的内容
showCancel boolean true 是否显示取消按钮
cancelText string '取消' 取消按钮的文字
cancelColor string 浅色主题#191919;深色主题#A5A5A5 取消按钮的文字颜色,必须是 16 进制的颜色字符串
confirmText string '确定' 确认按钮的文字
confirmColor string 浅色主题#409EFF;深色主题#368CE4 确认按钮的文字颜色,必须是 16 进制的颜色字符串
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性 类型 说明
confirm boolean 为 true 时,表示用户点击了确定按钮
cancel boolean 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)

示例代码

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

属性 类型 默认值 必填 说明
title string 提示的内容
mask boolean false 是否显示透明蒙层
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

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

注意

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

# showActionSheet

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

showActionSheet(Object object)

显示操作菜单

参数

Object object

属性 类型 默认值 必填 说明
itemList Array.<string> 按钮的文字数组,数组长度最大为 6
itemColor string #000000 按钮的文字颜色
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object res

属性 类型 说明
tapIndex number 用户点击的按钮序号,从上到下的顺序,从0开始

示例代码

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

属性 类型 默认值 必填 说明
noConflict boolean false 目前 toast 和 loading 相关接口可以相互混用,此参数可用于取消混用特性
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# hideLoading

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

hideLoading(Object object)

隐藏 loading 提示框。

参数

Object object

属性 类型 默认值 必填 说明
noConflict boolean false 目前 toast 和 loading 相关接口可以相互混用,此参数可用于取消混用特性
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# enableAlertBeforeUnload

基础库2.11.5开始支持,iOS版本2.35.1,Android版本2.35.1

enableAlertBeforeUnload(Object object)

开启小程序页面返回询问对话框

参数

Object object

属性 类型 默认值 必填 说明
message string 接口调用成功的回调函数
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# disableAlertBeforeUnload

基础库2.11.5开始支持,iOS版本2.35.1,Android版本2.35.1

disableAlertBeforeUnload(Object object)

关闭小程序页面返回询问对话框

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# 导航栏

# showNavigationBarLoading

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

showNavigationBarLoading(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# setNavigationBarTitle

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

setNavigationBarTitle(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
title string 页面标题
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

# setNavigationBarColor

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

setNavigationBarColor(Object object)

设置页面导航条颜色。

参数

Object object

属性 类型 默认值 必填 说明
frontColor string 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
backgroundColor string 背景颜色值,有效值为十六进制颜色
animation Object 动画效果
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.animation 的结构

属性 类型 默认值 必填 说明
duration number 0 动画变化时间,单位 ms
timingFunc string 'linear' 动画变化方式

object.animation.timingFunc 的合法值

说明
'linear' 动画从头到尾的速度是相同的
'easeIn' 动画以低速开始
'easeOut' 动画以低速结束
'easeInOut' 动画以低速开始和结束

示例代码

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

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# 背景

# setBackgroundTextStyle

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

ft.setBackgroundTextStyle(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
textStyle string 下拉背景字体、loading 图的样式。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.textStyle 的合法值

说明
dark dark 样式
light light 样式

示例代码

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

# setBackgroundColor

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

ft.setBackgroundColor(Object object)

动态设置窗口的背景色

参数

Object object

属性 类型 默认值 必填 说明
backgroundColor string 窗口的背景色,必须为十六进制颜色值
backgroundColorTop string 顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
backgroundColorBottom string 底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

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

# Tab Bar

# showTabBarRedDot

ft.showTabBarRedDot(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
index number tabBar 的哪一项,从左边算起
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# showTabBar

ft.showTabBar(Object object)

显示 tabBar

参数

Object object

属性 类型 默认值 必填 说明
animation boolean false 是否需要动画效果
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# setTabBarStyle

ft.setTabBarStyle(Object object)

动态设置 tabBar 的整体样式

参数

Object object

属性 类型 默认值 必填 说明
color string tab 上的文字默认颜色,HexColor
selectedColor string tab 上的文字选中时的颜色,HexColor
backgroundColor string tab 的背景色,HexColor
borderStyle string tabBar上边框的颜色, 仅支持 black/white
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

# setTabBarItem

ft.setTabBarItem(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
index number tabBar 的哪一项,从左边算起
text string tab 上的按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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 某一项的右上角添加文本

属性 类型 默认值 必填 说明
index number tabBar 的哪一项,从左边算起
text string 显示的文本,超过 4 个字符则显示成 ...
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

# removeTabBarBadge

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

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

属性 类型 默认值 必填 说明
index number tabBar 的哪一项,从左边算起
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# hideTabBarRedDot

ft.hideTabBarRedDot(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
index number tabBar 的哪一项,从左边算起
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# hideTabBar

ft.hideTabBar(Object object)

隐藏 tabBar

参数

Object object

属性 类型 默认值 必填 说明
animation boolean false 是否需要动画效果
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

# 字体

# loadFontFace

ft.loadFontFace(Object object)

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

注意:

  1. 字体文件返回的 contet-type 参考 font (opens new window),格式不正确时会解析失败。
  2. 字体链接必须是https(ios不支持http)
  3. 字体链接必须开启cors支持 *
  4. 工具里提示 Faild to load font可以忽略

参数

Object object

属性 类型 默认值 必填 说明 最低版本
global boolean false 是否全局生效 2.10.0
family string 定义的字体名称
source string 字体资源的地址。建议格式为 TTF 和 WOFF,WOFF2 在低版本的iOS上会不兼容。
desc Object 可选的字体描述符
scopes Array 字体作用范围,可选值为 webview / native,默认 webview,设置 native 可在 Canvas 2D 下使用
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.desc 的结构

属性 类型 默认值 必填 说明
style string 'normal' 字体样式,可选值为 normal / italic / oblique
weight string 'normal' 字体粗细,可选值为 normal / bold / 100 / 200../ 900
variant string 'normal' 设置小型大写字母的字体显示文本,可选值为 normal / small-caps / inherit

object.success 回调函数

参数

Object res

属性 类型 说明
status string 加载字体结果

object.fail 回调函数

参数

Object res

属性 类型 说明
status string 加载字体结果

object.complete 回调函数

参数

Object res

属性 类型 说明
status string 加载字体结果

示例代码

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

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

ft.startPullDownRefresh()

# stopPullDownRefresh

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

stopPullDownRefresh(Object object)

停止当前页面下拉刷新。

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

# 滚动

# pageScrollTo

ft.pageScrollTo(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明 最低版本
scrollTop number 滚动到页面的目标位置,单位 px
duration number 300 滚动动画的时长,单位 ms
selector string 选择器 2.7.3
offsetTop number 偏移距离,需要和 selector 参数搭配使用,可以滚动到 selector 加偏移距离的位置,单位 px 3.0.8
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

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
})

# ScrollViewContext

基础库 3.0.45 开始支持

scroll-view 增强实例

示例代码

// 获取 ScrollViewContext
ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
  })

# ScrollViewContext 属性

属性 类型 说明 最低版本
scrollEnabled boolean 滚动开关 3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollEnabled = false
  })

# ScrollViewContext 方法

# scrollIntoView

scrollIntoView(String selector)

滚动至指定位置

参数

String selector

属性 类型 默认值 必填 说明 最低版本
selector string 元素选择器,目标元素必须是 scroll-view 的子元素 3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollIntoView('.some-class');
  })

# scrollTo

scrollTo(Object object)

滚动至指定位置

参数

Object object

属性 类型 默认值 必填 说明 最低版本
top number 顶部距离 3.0.45
left number 左边界距离 3.0.45
velocity number 初始速度(未支持) 3.0.45
duration number 300 滚动动画时长 3.0.45
animated boolean false 是否启用滚动动画 3.0.45

示例代码

ft.createSelectorQuery()
  .select('#scroll-view')
  .node()
  .exec((res) => {
    const scrollViewContext = res[0].node;
    scrollViewContext.scrollTo({
      top: 0,
      duration: 400,
      animated: false
    });
  })

# 动画

# createAnimation

Animation ft.createAnimation(Object object)

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

参数

Object object

属性 类型 默认值 必填 说明
duration number 400 动画持续时间,单位 ms
timingFunction string 'linear' 动画的效果
delay number 0 动画延迟时间,单位 ms
transformOrigin string '50% 50% 0'

timingFunction 的合法值

说明 最低版本
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始,然后加快,在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态,最后一帧跳到结束状态

返回值

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

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

属性 类型 说明
width number 宽度,单位:px
height number 高度,单位:px
top number 上边界坐标,单位:px
right number 右边界坐标,单位:px
bottom number 下边界坐标,单位:px
left number 左边界坐标,单位:px

# 窗口

# onWindowResize

监听窗口尺寸变化事件

参数

function listener

窗口尺寸变化事件的监听函数

返回值 Object res

属性 类型 说明
size Object

size

属性 类型 说明
windowWidth number 变化后的窗口宽度,单位 px
windowHeight number 变化后的窗口高度,单位 px

# offWindowResize

移除窗口尺寸变化事件的监听函数

参数 function listener

onWindowResize 传入的监听函数。不传此参数则移除所有监听函数。

© FinClip with ❤ , Since 2017