微信官方文档学习——API

一、基础

    1. wx.canIUse('console.log')        //true  //wx.canIUse  （判断小程序的API，回调，参数，组件等是否在当前版本可用）
    2. const arrayBuffer = wx.base64ToArrayBuffer('xuezhiqian')   //(将Base64字符串转成ArrayBuffer对象)
    3. const arrayBuffer = new Uint8Array([11, 22, 33])          //(将Base64字符串转成ArrayBuffer对象)
       const base64 = wx.arrayBufferToBase64(arrayBuffer)
    4. wx.getSystemInfoSync()           //(系统信息,包括设备品牌、型号、微信号版本、摄像头、蓝牙、WiFi的开关等)
    5. wx.getSystemInfo({                 //success、fail、complete
        success (res) {
          console.log(res)
        }
      })
    6. wx.getUpdateManager()          //获取全局唯一的版本更新管理器
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {  //onCheckForUpdate(监听向微信后台请求检查更新结果事件。微信在小程序冷启动时自动检查更新，)
      console.log(res.hasUpdate)    // 请求完新版本信息的回调
    })
    updateManager.onUpdateReady(function () {      //监听小程序有版本更新事件,下载成功后回调
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success: function (res) {
          if (res.confirm) {
            updateManager.applyUpdate()  // 强制小程序重启并使用新版本。在小程序新版本下载完成后调用。
          }
        }
      })
    })
    updateManager.onUpdateFailed(function () {   // 新版本下载失败
      
    })
    7. wx.getLaunchOptionsSync()     //获取小程序启动时的参数,包含path,query,scene,只有冷启动
    8.wx.getEnterOptionsSync()         //获取小程序启动时的参数,包含path,query,scene,冷启动和热启动

注：

①热启动：假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；

②冷启动：用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动

二、路由

    // 1.switchTab跳转到tabBar页面
    wx.switchTab({
      url: '/index'
    })
    // 2.reLaunch  关闭所有页面，打开到应用内的某个页面
    // 3.redirectTo  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    // 4.navigateTo  保留当前页面，跳转到应用内的某个页面。小程序中页面栈最多十层
    // 5.navigateBack  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
    // 此处是B页面
    wx.navigateTo({
      url: 'C?id=1'
    })
    // 在C页面内 navigateBack，将返回A页面
    wx.navigateBack({
      delta: 2
    })
    // 6.EventChannel  页面间事件通信通道

三、界面

    1.wx.showToast({
      title: '显示消息提示框',
      icon: 'success',              //success、loading、none
      duration: 2000,
      mask:true
    })
    2.wx.hideToast()   //隐藏消息提示框
    3.wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      showCancel:false,          //是否显示取消按钮
      cancelText:'取消',         //取消按钮的文字
      cancelColor:'#000000',    //取消按钮的文字颜色
      confirmText:'确定',
      confirmColor:'#576B95',   
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    4.wx.showLoading({
      title: '加载中'
    })
    5.setTimeout(function () {
      wx.hideLoading()
    }, 2000)
    // 6.显示操作菜单
    wx.showActionSheet({
      itemList: ['拍照', '从相册选取'],
      success (res) {
        console.log(res.tapIndex)
      },
      fail (res) {
        console.log(res.errMsg)
      }
    })
    //7.在当前页面显示导航条加载动画
    wx.showNavigationBarLoading({
      success(e){

      }
    })
    8. wx.hideNavigationBarLoading()        //在当前页面隐藏导航条加载动画
    //9.动态设置当前页面的标题
    wx.setNavigationBarTitle({
      title: '当前页面'
    })
    //10.设置页面导航条颜色
    wx.setNavigationBarColor({
      frontColor: '#ffffff',       //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
      backgroundColor: '#ff0000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    11. wx.hideHomeButton()       //隐藏返回首页按钮
    12. wx.setBackgroundTextStyle({
      textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark    只能为dark和light
    })
    13. wx.setBackgroundColor({
      backgroundColorTop: '#ff0000', // 顶部窗口的背景色为白色
      backgroundColorBottom: '#fff000', // 底部窗口的背景色为白色
    })
    //14.显示 tabBar 某一项的右上角的红点
    wx.showTabBarRedDot({
      index: 0,
    })
    隐藏tabbar上的红点
    wx.hideTabBarRedDot({
      index: (0),
    })
    //15.显示tabbar
    wx.showTabBar({
      animation: true,
    })
    //16.隐藏tabbar
    wx.hideTabBar({
      animation: true,
    })
    //17.动态设置 tabBar 的整体样式
    wx.setTabBarStyle({
      color:'#000000',
      selectedColor:'#ffffff',
      backgroundColor: '#ff0000',
      borderStyle:'black'            //值只能是black/white
    })
    //18.动态设置 tabBar 某一项的内容(文字和图片)
    wx.setTabBarItem({
      index: 0,
      text: 'text',
      iconPath: '/path/to/iconPath',
      selectedIconPath: '/path/to/selectedIconPath'
    })
    //19.为 tabBar 某一项的右上角添加文本
    wx.setTabBarBadge({
      index: 0,
      text: '1'
    })
    //20.移除 tabBar 某一项右上角的文本
    wx.removeTabBarBadge({
      index: 0,
    })
    //21.字体-------------------------------------------------需学习
    wx.loadFontFace({
      family: 'Bitstream Vera Serif Bold',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      success: console.log
    })
    //22.下拉刷新       下拉刷新要在json文件中容许下拉刷新  "enablePullDownRefresh":true
    wx.startPullDownRefresh()        //下拉刷新
    wx.stopPullDownRefresh()         //停止下拉刷新
    //23.滚动
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
    //24.置顶
    wx.setTopBarText({
      text: 'hello, world!'
    })
    //25.延迟一部分操作到下一个时间片再执行（类似于 setTimeout）
    wx.nextTick(() => {
      this.setData({ number: 3 }) // 在当前同步流程结束后，下一个时间片执行
    })
    //26.获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
    wx.getMenuButtonBoundingClientRect()
    27. wx.setWindowSize()          //设置窗口大小，该接口仅适用于 PC 平台(已停止维护)
    28. wx.onWindowResize((result) => {
      console.log(result)
    })
    29. wx.offWindowResize((res) => {
      console.log(res)
    })
    30. 监听键盘高度变化  (一个值为height)
    wx.onKeyboardHeightChange((result) => {
      console.log(result)
    })
    31. 取消监听键盘高度变化事件
    wx.offKeyboardHeightChange(callback)
    //32. 在input、textarea等focus拉起键盘之后，手动调用此接口收起键盘
    wx.hideKeyboard({
      complete: (res) => {
        console.log(res)
      },
    })
    //33. 在input、textarea等focus之后，获取输入框的光标位置。注意：只有在focus的时候调用此接口才有效
    wx.getSelectedTextRange({
      complete: (res) => {
        console.log(res)
      },
    })

四、动画

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = wx.createAnimation({
      duration:3000,       //动画持续时间,ms
      timingFunction:'linear',     //动画的效果  linear匀速、ease慢快慢、ease-in慢速开始、
      // ease-in-out慢速开始和结束、ease-out慢速结束、step-start动画第一帧就跳至结束状态直到结束、step-end动画一直保持开始状态，最后一帧跳到结束状态
      delay: 500,         //动画延迟时间,ms      
      transformOrigin:"left top 0"
    })
    this.animation = animation
    // step()表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画
    animation.scale(2,2).rotate(45).step()
    this.setData({
      // this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作
      animationData:animation.export()
    })
  },
})

五、数据缓存

    1.  wx.setStorageSync('0', '你好，ly！')     //同步的(即当存储成功后才会执行下一步代码)
    2.  wx.setStorage({                         //异步的(即存储成功的同时也会执行下一步代码)
          data: "您好，wh！",
          key: '1',
        })
    3.  wx.removeStorage({
          key: '0',
          success (res) {

          }
        })
    3.  wx.removeStorageSync('1')               //
    4.  wx.getStorage({                   //异步获取指定 key 的内容
          key: '1',
          success(res){
            console.log(res.data)
          }
        })
    4.  wx.getStorage('1')
    5. wx.getStorageSync('1')      //同步获取指定 key 的内容
    6.  wx.getStorageInfo()
    7.  wx.getStorageInfoSync()
    8.  wx.clearStorage()
    9.  wx.clearStorage()

六、生命周期

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }