常用api

2021-04-25  本文已影响0人  波仔_4867
//显示消息提示框
wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
  })

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

//显示 loading 提示框。
//需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
  title: '加载中',
})

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

// 显示操作菜单
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

// 发起 HTTPS 网络请求。
wx.request({
  url: 'http://localhost/api/getGoods', 
  data: {
    x: '',
    y: ''
  },
 method: 'get',
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})
数据缓存(异步)
wx.setStorage({
  key:"name",
  data:"value"
})

//移除本地缓存
wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  }
})


//获取本地缓存
wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})
//清理本地缓存
wx.clearStorage()

数据缓存(同步)
//存储本地缓存
 wx.setStorageSync('key', 'value')
//移除本地缓存
 wx.removeStorageSync('key')
//获取本地缓存
 var value = wx.getStorageSync('key')
//清除本地缓存
  wx.clearStorageSync()
关于同步缓存和异步缓存的区别

以Sync(同步,同时)结尾的都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。

路由跳转方法

  1. wx.navigateTo

用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。

对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。

wx.navigateTo({
url: '/pages/index/index?id=3',
})

在index中
onLoad(options){
//通过options获取数据
}

  1. wx.redirectTo
    当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间。
  1. wx.reLaunch

wx.reLaunch()与 wx.redirectTo()的用途基本相同, 只是 wx.reLaunch()先关闭了内存中所有保留的页面,再跳转到目标页面。

  1. wx.switchTab

对于跳转到 tabbar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tab bar 的页面。

其次,也可以选择 wx.reLaunch(),它也能实现从非 tab bar 跳转到 tab bar,或在 tab bar 间跳转,效果等同 wx.switchTab()。

使用其他跳转 API 来跳转到 tab bar,则会跳转失败。

  1. wx.navigateBack

    用于关闭当前页面,并返回上一页面或多级页面。

    开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

    这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页
    面。当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面。

wx.navigateBack({
delta: 2
})

  1. 跳转到某个小程序,需配置

wx.navigateToMiniProgram({
appId: '',
path: 'page/index/index?id=123',
extraData: {
foo: 'bar'
},
envVersion: 'develop',
success(res) {
// 打开成功
}
})

导航组件 navigator

//等同: wx.navigateTo

<navigator url="/pages/detail/detail?title=navigate" open-type="navigate">跳转到新页面</navigator>

//等同:wx.redirectTo

<navigator url="/pages/detail/detail?title=navigate" open-type="redirect" >在当前页打开</navigator>

//等同:wx.switchTab

<navigator url="/pages/index/index" open-type="switchTab" >切换 Tab</navigator>

//等同:wx.navigateToMiniProgram

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">
打开绑定的小程序

上一篇下一篇

猜你喜欢

热点阅读