根据腾讯微信小程序文档编辑,添加了相应API的代码实现,对使用场景较少的API仅列示功能。

miniprogram_api

微信小程序原生API简介(一)

基础

boolean wx.canIUse(string schema)

  • 作用
    • 判断小程序的API,回调,参数,组件等是否在当前版本可用。
  • 参数
    • string schema
      • 使用 \${API}.\${method}.\${param}.\${options}
      • 或者 \${component}.\${attribute}.\${option} 方式来调用
  • 返回值
    • boolean
    • 表示:当前版本是否可用
  • 参数说明
    • \${API} 代表 API 名字
      • wx.canIUse('openBluetoothAdapter')
    • \${method} 代表调用方式,有效值为return, success, object, callback
      • wx.canIUse('getSystemInfoSync.return.screenWidth')
      • wx.canIUse('getSystemInfo.success.screenWidth')
      • wx.canIUse('onCompassChange.callback.direction')
    • \${param} 代表参数或者返回值
      • wx.canIUse('request.object.method.GET')
    • \${options} 代表参数的可选值
      • wx.canIUse('live-player')
    • \${component} 代表组件名字
      • wx.canIUse('showToast.object.image')
    • \${attribute} 代表组件属性
      • wx.canIUse('text.selectable')
    • \${option} 代表组件属性的可选值
      • wx.canIUse('button.open-type.contact')

js

Page({
  data: {
    logs: [],
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo') // 判断小程序获取用户信息是否在当前版本可用
  },

wxml

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称
</button>
<block wx:else>
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
  <text  class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>

系统(系统信息)

Object wx.getSystemInfoSync()

  • wx.getSystemInfo 的同步版本

js data & function

Page({
  data: {
    model: null,
    pixelRation: null,
    windowWidth: null,
    windowHeight: null,
    language: null,
    version: null,
    platform: null,
    screenWidth: null,
    screenHeight: null,
    statusBarHeight: null,
    system: null,
    fontSizeSetting: null,
    locationAuthorized: null,
    locationEnabled: null
  },

  systeminfo: function () {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res.model);
        that.setData({
          model: res.model,
          pixelRation: res.pixelRation  || null,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          language: res.language,
          version: res.version,
          platform: res.platform,
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight,
          statusBarHeight: res.statusBarHeight,
          system: res.system,
          fontSizeSetting: res.fontSizeSetting,
          locationAuthorized: res.locationAuthorized  || null,
          locationEnabled: res.locationEnabled || null
        })
      }
    })
  }
}

wxml

<button bindtap="systeminfo">获取手机系统信息</button>
<view wx:if="{{model}}">model: {{model}}</view>
<view wx:if="{{system}}">system: {{system}}</view>
<view wx:if="{{version}}">version: {{version}}</view>
<view wx:if="{{platform}}">platform: {{platform}}</view>
<view wx:if="{{language}}">language: {{language}}</view>
<view wx:if="{{windowWidth}}">windowWidth: {{windowWidth}}</view>
<view wx:if="{{screenWidth}}">screenWidth: {{screenWidth}}</view>
<view wx:if="{{windowHeight}}">windowHeight: {{windowHeight}}</view>
<view wx:if="{{screenHeight}}">screenHeight: {{screenHeight}}</view>
<view wx:if="{{statusBarHeight}}">statusBarHeight: {{statusBarHeight}}</view>
<view wx:if="{{fontSizeSetting}}">fontSizeSetting: {{fontSizeSetting}}</view>
<view wx:if="{{locationAuthorized}}">locationAuthorized: {{locationAuthorized}}</view>
<view wx:if="{{locationEnabled}}">locationEnabled: {{locationEnabled}}</view>
<view wx:if="{{pixelRation}}">pixelRation: {{pixelRation}}</view>

wx.getSystemInfo

  • 获取系统信息
  • 参数 Object object
属性 类型 默认值 必填 说明
success function - 接口调用成功的回调函数
fail function - 接口调用失败的回调函数
complete function - 接口调用结束的回调函数(调用成功、失败都会执行)

更新

UpdateManager wx.getUpdateManager()

  • 获取全局唯一的版本更新管理器,用于管理小程序更新。
  • 关于小程序的更新机制,可以查看运行机制文档。
  • 返回值: UpdateManager
    • 更新管理器对象

UpdateManager

  • UpdateManager 对象,用来管理更新,可通过 wx.getUpdateManager 接口获取实例。

UpdateManager 方法

  • UpdateManager.applyUpdate()
    • 强制小程序重启并使用新版本。在小程序新版本下载完成后(即收到 onUpdateReady 回调)调用。
  • UpdateManager.onCheckForUpdate(function callback)
    • 监听向微信后台请求检查更新结果事件。微信在小程序冷启动时自动检查更新,不需由开发者主动触发。
  • UpdateManager.onUpdateReady(function callback)
    • 监听小程序有版本更新事件。客户端主动触发下载(无需开发者触发),下载成功后回调
  • UpdateManager.onUpdateFailed(function callback)
    • 监听小程序更新失败事件。小程序有新版本,客户端主动触发下载(无需开发者触发),下载失败(可能是网络原因等)后回调
// 示例代码

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好,是否重启应用?',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

Tips

  • 微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试
  • 小程序开发版/体验版没有「版本」概念,所以无法在开发版/体验版上测试更版本更新情况

小程序

生命周期

Object wx.getLaunchOptionsSync()

  • 获取小程序启动时的参数。
  • 与 App.onLaunch 的回调参数一致。

js

Page({
  data: {
    list: [
      { key: 'mypath', value: 'test' },
      { key: 'scene', value: null },
      { key: 'query', value:null },
      { key: 'shareTicket', value: null },
      { key: 'referrerInfoId', value: null },
      { key: 'referrerInfoExtraData', value: null }
    ]
  },

  onLoad: function (options) {
    var obj = wx.getLaunchOptionsSync()
    var list = this.data.list
    this.setData({
      'list[0].value': obj.path || null,
      'list[1].value': obj.scene || null,
      'list[2].value': obj.query || null,
      'list[3].value': obj.shareTicket || null,
      'list[4].value': obj.referrerInfo.appId || null,
      'list[5].value': obj.referrerInfo.extraData || null
    })
    console.log(list[0].key)
    console.log(list[0].value)
    console.log('启动小程序的路径:', obj.path)
    console.log('启动小程序的场景值:', obj.scene)
    console.log('启动小程序的 query 参数:', obj.query)
    console.log('来源信息:', obj.shareTicket)
    console.log('来源信息参数appId:', obj.referrerInfo.appId)
    console.log('来源信息传过来的数据:', obj.referrerInfo.extraData)
  }
})

wxml

<view class="section">  
  <view class="section__title">获取启动时的参数</view>  
  <scroll-view scroll-y style="height: 460px;"  scroll-top="{{scrollTop}}">  
    <view style="height:30px;" wx:for="{{list}}" wx:key="index">{{index}} ,{{list[index].key}} : {{list[index].value}}</view>  
  </scroll-view>  
</view>

应用级事件

wx.onPageNotFound(function callback)

  • 监听小程序要打开的页面不存在事件。
  • 该事件与 App.onPageNotFound 的回调时机一致。

wx.onError(function callback)

  • 监听小程序错误事件。如脚本错误或 API 调用报错等。
  • 该事件与 App.onError 的回调时机与参数一致。

wx.onAudioInterruptionEnd(function callback)

  • 监听音频中断结束事件。在收到 onAudioInterruptionBegin 事件之后,小程序内所有音频会暂停,收到此事件之后才可再次播放成功

wx.onAudioInterruptionBegin(function callback)

  • 监听音频因为受到系统占用而被中断开始事件。以下场景会触发此事件:闹钟、电话、FaceTime 通话、微信语音聊天、微信视频聊天。此事件触发后,小程序内所有音频会暂停。

wx.onAppShow(function callback)

  • 监听小程序切前台事件。该事件与 App.onShow 的回调参数一致。
  • 参数 Object res
    • 属性 类型 说明
    • path string 小程序切前台的路径
    • scene number 小程序切前台的场景值
    • query Object 小程序切前台的 query 参数
    • shareTicket string shareTicket,详见获取更多转发信息
    • referrerInfo Object 来源信息。从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}。(参见后文注意)
  • referrerInfo 的结构
    • 属性 类型 说明
    • appId string 来源小程序、公众号或 App 的 appId
    • extraData Object 来源小程序传过来的数据,scene=1037或1038时支持

wx.onAppHide(function callback)

  • 监听小程序切后台事件。该事件与 App.onHide 的回调时机一致。

wx.offPageNotFound(function callback)

  • 取消监听小程序要打开的页面不存在事件

wx.offError(function callback)

  • 取消监听小程序错误事件。

wx.offAudioInterruptionEnd(function callback)

  • 取消监听音频中断结束事件

wx.offAudioInterruptionBegin(function callback)

  • 取消监听音频因为受到系统占用而被中断开始事件

wx.offAppShow(function callback)

  • 取消监听小程序切前台事件

wx.offAppHide(function callback)

  • 取消监听小程序切后台事件

定时器

number setInterval(function callback, number delay, any rest)

  • 设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数
  • 参数 function callback
  • 回调函数
    • number delay
      • 执行回调函数之间的时间间隔,单位 ms。
    • any rest
      • param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数。
  • 返回值 number
    • 定时器的编号。这个值可以传递给 clearInterval 来取消该定时。

clearInterval(number intervalID)

  • 取消由 setInterval 设置的定时器。
  • 参数 number intervalID
    • 要取消的定时器的 ID

number setTimeout(function callback, number delay, any rest)

  • 设定一个定时器。在定时到期以后执行注册的回调函数
  • 参数 function callback
  • 回调函数
    • number delay
      • 延迟的时间,函数的调用会在该延迟之后发生,单位 ms。
    • any rest
      • param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数。
  • 返回值 number
    • 定时器的编号。这个值可以传递给 clearTimeout 来取消该定时。
setTimeout(function () {
  wx.hideLoading()
}, 2000)
-----------------以下为代码分解--------------------
setTimeout(  function () { wx.hideLoading() } , 2000            )
-----------| function callback               |,-| 延迟的时间 |,其他参数------

clearTimeout(number timeoutID)

  • 取消由 setTimeout 设置的定时器。
  • 参数 number timeoutID
    • 要取消的定时器的 ID

调试

wx.setEnableDebug(Object object)

  • 设置是否打开调试开关。此开关对正式版也能生效。
  • Tips
    • 在正式版打开调试还有一种方法,就是先在开发版或体验版打开调试,再切到正式版就能看到vConsole。

js

// 打开调试
wx.setEnableDebug({
  enableDebug: true
})

// 关闭调试
wx.setEnableDebug({
  enableDebug: false
})

json

// 关闭或打开小程序的调试模式也可以在app.json 的 debug 配置:

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"  
  ],
  "window": {
    "navigationBarTitleText": "Demo"  
  },
  "tabBar": {
    "list": [
      {      
        "pagePath": "pages/index/index",
        "text": "首页"    
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"    
      }
    ]  
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000  
  },
  "debug": true
}

LogManager wx.getLogManager(Object object)

  • 获取日志管理器对象。
  • 参数 Object object
属性 类型 默认值 必填 说明 最低版本
level number 0 取值为0/1,取值为0表示是否会把 App、Page 的生命周期函数和 wx 命名空间下的函数调用写入日志,取值为1则不会。默认值是 0 2.3.2
  • 返回值 LogManager
// 示例代码。备注:无法在控制台打印,留待后续再理解。

const logger = wx.getLogManager({level: 1})
logger.log({str: 'hello world'}, 'basic log', 100, [1, 2, 3])
logger.info({str: 'hello world'}, 'info log', 100, [1, 2, 3])
logger.debug({str: 'hello world'}, 'debug log', 100, [1, 2, 3])
logger.warn({str: 'hello world'}, 'warn log', 100, [1, 2, 3])

路由

wx.switchTab(Object object)

  • 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  • 参数 Object object
    • 属性 类型 默认值 必填 说明
    • url string 是 需要跳转的 tabBar 页面的路径( 需在 app.json 的 tabBar 字段定义的页面 ),路径后不能带参数。
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

app.json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "index",
        "text": "首页"
      },
      {
        "pagePath": "other",
        "text": "其他"
      }
    ]
  }
}

js

wx.switchTab({
  url: '/index'
})

wx.reLaunch(Object object)

  • 关闭所有页面,打开到应用内的某个页面
  • 参数 Object object
    • 属性 类型 默认值 必填 说明
    • url string 是 需要跳转的应用内页面路径,路径后可以带参数。
      • 参数与路径之间使用?分隔,
      • 参数键与参数值用=相连,
      • 不同参数用&分隔;
      • 如 'path?key=value&key2=value2'
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
  • 因为会关闭所有页面,没有返回按钮,所以暂时列入不常用API

wx.redirectTo(Object object)

  • 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo(Object object)

  • 保留当前页面,跳转到应用内的某个页面。
  • 但是不能跳到 tabbar 页面。(跳到 tabbar 页面需使用 wx.switchTab(Object object) )
  • 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack(Object object)

  • 关闭当前页面,返回上一页面或多级页面。
  • 可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
  • delta number 是 返回的页面数,如果 delta 大于现有页面数,则返回到首页。

界面

交互

wx.showToast(Object object)

  • 显示消息提示框
  • 参数 Object object
    • 属性 类型 默认值 必填 说明 最低版本
    • title string 是 提示的内容
    • icon string 'success' 否 图标
    • image string 否 自定义图标的本地路径,image 的优先级高于 icon 1.1.0
    • duration number 1500 否 提示的延迟时间
    • mask boolean false 否 是否显示透明蒙层,防止触摸穿透
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
  • object.icon 的合法值
    • 值 说明 最低版本
    • success 显示成功图标,此时 title 文本最多显示 7 个汉字长度
    • loading 显示加载图标,此时 title 文本最多显示 7 个汉字长度
    • none 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持

wx.hideToast(Object object)

  • 隐藏消息提示框

wx.showModal(Object object)

  • 显示模态对话框
  • 参数 Object object
    • 属性 类型 默认值 必填 说明
    • title string 是 提示的标题
    • content string 是 提示的内容
    • showCancel boolean true 否 是否显示取消按钮
    • cancelText string '取消' 否 取消按钮的文字,最多 4 个字符
    • cancelColor string #000000 否 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串
    • confirmText string '确定' 否 确认按钮的文字,最多 4 个字符
    • confirmColor string #576B95 否 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
  • object.success 回调函数
  • 参数 Object res
    • 属性 类型 说明 最低版本
    • confirm boolean 为 true 时,表示用户点击了确定按钮
    • cancel boolean 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)

js

Page({
  data: {
    confirmlog: null,
    cancellog: null
  },

  onLoad: function (options) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          that.setData({
            confirmlog: "you click confirm."
          })
          console.log('用户点击确定', res.confirm, that.data.confirmlog)
        } else if (res.cancel) {
          that.setData({
            cancellog: "you click cancel."
          })          
          console.log('用户点击取消', res.cancel, that.data.cancellog)
        }
      }
    })
  }
})

json

<view class="section">  
  <view class="section__title"></view>  
  <scroll-view scroll-y style="height: 460px;" >  
    <text wx:if="{{confirmlog}}">{{confirmlog}}</text>  
    <text wx:if="{{cancellog}}">{{cancellog}}</text>  
  </scroll-view>  
</view>

wx.showLoading(Object object)

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

wx.hideLoading(Object object)

  • 隐藏 loading 提示框
wx.showLoading({
  title: '加载中',
})

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

wx.showActionSheet(Object object)

  • 显示操作菜单
tapIndex: 0,
share: function () {
  wx.showActionSheet({
      itemList: ['保存图片','分享给好友','分享到朋友圈'],
      success: function (res1) {
        tapIndex: res1.tapIndex;
          success: function (res) {
            if (tapIndex == 0){
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
              })
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1500
              });
            }
        if (tapIndex == 1){
            /*
            *******
            */
            }   
          }
        });
      },
          fail: function (res) {
              console.log(res.errMsg)
          }   
    });
}

js

Page({
  data: {
    mysave:null
  },

  onLoad: function (options) {
    var that = this
    wx.showActionSheet({
      itemList: ['保存图片', '分享给好友', '分享到朋友圈'],
      success(res) {
        console.log(res.tapIndex)
        if (res.tapIndex==0) {
          that.setData({
            mysave: '保存图片'
          })
        } else if(res.tapIndex == 1) {
          that.setData({
            mysave: '分享给好友'
          })
        } else {
          that.setData({
            mysave: '分享到朋友圈'
          })
        }
        console.log(that.data.mysave)
      },
      fail(res) {
        console.log(res.errMsg)
      }  
    })
  }
})

导航

wx.showNavigationBarLoading(Object object)

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

wx.hideNavigationBarLoading(Object object)

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

wx.setNavigationBarTitle(Object object)

  • 动态设置当前页面的标题
  • 参数 Object object
    • 属性 类型 默认值 必填 说明
    • title string 是 页面标题
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

js

  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '界面交互窗口'
    })
  },

wx.setNavigationBarColor(Object object)

  • 设置页面导航条颜色

背景

wx.setBackgroundTextStyle(Object object)

  • 动态设置下拉背景字体、loading 图的样式
// 首先先设置可以下拉
// index.json
{
  "enablePullDownRefresh": true
}

// index.wxml
<button bindtap="btnClick1" type="primary">改变下拉背景字体、loading 图的样式</button>
<button bindtap="btnClick2" type="primary">动态改变窗口的背景色为黑色</button>
<button bindtap="btnClick3" type="primary">动态底部窗口的上面为红,下面为绿</button>

// index.wxss
page{
  background-color: lightblue
}
button{
  margin: 20rpx;
}

// index.js
/*
  wx.setBackgroundTextStyle属性
  textStyle 下拉背景字体、loading 图的样式。 dark 样式和light 样式

  wx.setBackgroundColor属性
  backgroundColor  窗口的背景色,必须为十六进制颜色值
  backgroundColorTop  顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
  backgroundColorBottom  底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
*/

Page({
  data: { 
  },
  btnClick1:function(){
    wx.setBackgroundTextStyle({
      textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
    })
  },
  btnClick2: function () {
    wx.setBackgroundColor({
      backgroundColor: '#000000', // 窗口的背景色为黑色
    })
  },
  btnClick3: function () {
    wx.setBackgroundColor({
      backgroundColorTop: '#DC143C', // 顶部窗口的背景色为红
      backgroundColorBottom: '#   #00FA9A', // 底部窗口的背景色为绿
    })
  }
})

wx.setBackgroundColor(Object object)

  • 动态设置窗口的背景色
wx.setBackgroundColor({
  backgroundColor: '#ffffff', // 窗口的背景色为白色
})

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

Tab Bar

wx.showTabBarRedDot(Object object)

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

wx.showTabBar(Object object)

  • 显示 tabBar
  • 参数
    • animation boolean false 否 是否需要动画效果

wx.setTabBarStyle(Object object)

  • 动态设置 tabBar 的整体样式

wx.setTabBarItem(Object object)

  • 动态设置 tabBar 某一项的内容

wx.setTabBarBadge(Object object)

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

js

//index.js

Page({
  data: {
    motto: '以独特的视角\n和非凡的勇气\n打开并进入一个\n别有洞天的世界'
  },
  onLoad: function () {
    // 啥事没有...
    wx.showTabBarRedDot({
      index: 0
    })

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

  },

wx.removeTabBarBadge(Object object)

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

wx.hideTabBarRedDot(Object object)

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

wx.hideTabBar(Object object)

  • 隐藏 tabBar

字体

wx.loadFontFace(Object object)

  • 动态加载网络字体。文件地址需为下载类型。iOS 仅支持 https 格式文件地址。

下拉刷新

wx.startPullDownRefresh(Object object)

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

wx.stopPullDownRefresh(Object object)

  • 停止当前页面下拉刷新。

滚动

wx.pageScrollTo(Object object)

  • 将页面滚动到目标位置
  • 参数 Object object
    • 属性 类型 默认值 必填 说明
    • scrollTop number 是 滚动到页面的目标位置,单位 px
    • duration number 300 否 滚动动画的时长,单位 ms
    • success function 否 接口调用成功的回调函数
    • fail function 否 接口调用失败的回调函数
    • complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

js

  scrolltotop: function () {
    var l = this.data.mynews.length
    if (l>15) {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 10,
        success (res) {
          console.log(res)
        }
      })
    } else {
      console.log('why')
    }
  }
------------------------------------------------
{errMsg: "pageScrollTo:ok"}
errMsg
:
"pageScrollTo:ok"
__proto__
:
Object

wxml

// 不能与 scroll-view混用,否则无效

<button bindtap="scrolltotop">滚动到顶部</button>

动画 (暂时不使用)

Animation wx.createAnimation(Object object)

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

Animation

-动画对象

置顶 - 从基础库 1.9.9 开始,本接口停止维护

wx.setTopBarText(Object object)

  • 动态设置置顶栏文字内容。
  • 只有当前小程序被置顶时能生效,如果当前小程序没有被置顶,也能调用成功,但是不会立即生效,只有在用户将这个小程序置顶后才换上设置的文字内容.

自定义组件

wx.nextTick(function callback)

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

菜单

Object wx.getMenuButtonBoundingClientRect()

  • 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
  • 返回值 Object
    • 菜单按钮的布局位置信息
属性 类型 说明
width number 宽度,单位:px
height number 高度,单位:px
top number 上边界坐标,单位:px
right number 右边界坐标,单位:px
bottom number 下边界坐标,单位:px
left number 左边界坐标,单位:px

窗口 手机上窗口会怎样变化呢?

wx.onWindowResize(function callback)

  • 监听窗口尺寸变化事件
  • 参数 function callback
    • 窗口尺寸变化事件的回调函数

wx.offWindowResize(function callback)

  • 取消监听窗口尺寸变化事件

◎ 欢迎参与讨论,请在这里发表您的看法、交流您的观点。