wx.loadBuiltInFontFace(Object object)

基础库 3.7.9 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:不支持

微信小程序插件:支持,需要微信小程序基础库版本不低于 3.7.9

微信 Windows 版:支持

微信 Mac 版:支持

功能描述

加载内置字体。

参数

Object object

属性 类型 默认值 必填 说明
global boolean false 否 是否全局生效
family string 是 定义的字体名称
source string 是 要加载的内置字体名字
合法值 说明
WeChatSansSS WeChatSansSS 字体
WeChatSansStd WeChatSansStd 字体
scopes Array 否 字体作用范围,可选值为 webview / native / skyline,默认全选,设置 native 可在 Canvas 2D 下使用
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

在开发者工具中预览效果

wx.loadBuiltInFontFace({
  family: 'WeChatSansSS',
  source: 'WeChatSansSS',
  success: console.log
})

wx.loadFontFace(Object object)

基础库 2.1.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

微信小程序插件:支持,需要微信小程序基础库版本不低于 2.15.0

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

功能描述

动态加载网络字体。

参数

Object object

属性 类型 默认值 必填 说明 最低版本
global boolean false 否 是否全局生效 2.10.0
family string 是 定义的字体名称
source string 是 字体资源的地址,可以为 https 链接或者 Data URL。
desc Object 否 可选的字体描述符
结构属性 类型 默认值 必填 说明
style string ‘normal’ 否 字体样式,可选值为 normal / italic / oblique
weight string ‘normal’ 否 字体粗细,可选值为 normal / bold / 100 / 200../ 900
variant string ‘normal’ 否 设置小型大写字母的字体显示文本,可选值为 normal / small-caps / inherit
scopes Array 否 字体作用范围,可选值为 webview / native / skyline,默认全选,设置 native 可在 Canvas 2D 下使用
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数
Object res
属性 类型 说明
status string 加载字体结果

object.fail 回调函数

参数
Object res
属性 类型 说明
status string 加载字体结果

object.complete 回调函数

参数
Object res
属性 类型 说明
status string 加载字体结果

示例代码

在开发者工具中预览效果

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://res.wx.qq.com/t/wx_fed/base/weixin_portal/res/static/font/33uDySX.ttf")',
  success: console.log
})

Tips

  1. 字体链接需要是下载类型。
  2. 字体文件返回的 content-type 参考 font,格式不正确时会解析失败。
  3. 字体链接必须是 https(ios不支持http)。
  4. 建议格式为 TTF 和 WOFF,WOFF2 在低版本的iOS上会不兼容。
  5. 字体链接必须是同源下的,或开启了cors支持,微信小程序的域名是servicewechat.com
  6. 工具里提示 Faild to load font可以忽略
  7. 2.10.0 以前仅在调用页面生效。2.10.0 起支持全局生效,需在 app.js 中调用。
  8. 3.7.9 以前 scopes 默认值为 webview。3.7.9 起默认全选。
  9. 3.7.9 开始 source 支持传入 Data URL。

wx.hideTabBar(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 鸿蒙 OS 版:支持

功能描述

隐藏 tabBar

参数

Object object

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

wx.hideTabBarRedDot(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

功能描述

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

参数

Object object

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

wx.removeTabBarBadge(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

功能描述

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

参数

Object object

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

wx.setTabBarBadge(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

功能描述

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

参数

Object object

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

示例代码

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

wx.setTabBarItem(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 鸿蒙 OS 版:支持

功能描述

动态设置 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 否 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

wx.setTabBarStyle(Object object)

基础库 1.9.0 开始支持,低版本需做兼容处理。

以 Promise 风格 调用:支持

需要页面权限:当前是插件页面时,宿主微信小程序不能调用该接口,反之亦然

微信小程序插件:不支持

微信 Windows 版:支持

微信 鸿蒙 OS 版:支持

功能描述

动态设置 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 否 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

属性绑定前缀

WXML 的属性有很多不同的绑定前缀,用于组件框架提供各种各样的特性。

以下是支持的属性绑定前缀及其参考文档的列表。

属性绑定前缀 说明 附注
let: 用于定义临时变量 仅 glass-easel 组件框架支持
class: 框架属性中的样式类 仅 glass-easel 组件框架支持
style: 框架属性中的内联样式 仅 glass-easel 组件框架支持
bind: 用于事件绑定
catch: 用于事件绑定
mut-bind: 用于事件绑定
capture-bind: 用于事件绑定
capture-catch: 用于事件绑定
capture-mut-bind: 用于事件绑定
mark: 用于事件绑定中的 mark
data: 用于事件绑定中的 dataset
slot: 用于接收动态 slot 传递的值 仅 glass-easel 组件框架支持
generic: 用于自定义组件的抽象节点
change: 监听属性变化,用于 WXS 响应函数
worklet: 用于 Skyline 渲染引擎的 worklet

临时变量

仅 glass-easel 组件框架支持

有时,逻辑层提供的数据结构很复杂,而数据中的一部分又被反复使用。

这时可以用 let: 语法创建一个临时变量,例如:

<block let:student="{{ some.complex.student.data }}">
  <view>ID:{{ student.id }}</view>
  <view>名字:{{ student.name }}</view>
  <view>年龄:{{ student.age }}</view>
</block>

let: 创建的临时变量,其作用范围仅限于它所在的标签本身及其内部。