小程序中数据缓存和位置相关的api总结

简介:

数据缓存

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。

注意: 如果用户储存空间不足,会清空最近最久未使用的小程序的本地缓存。并不建议将关键信息全部存在 localStorage,以防储存空间不足或用户换设备的情况。

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口

OBJECT参数说明:

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
data Object/String 需要存储的内容
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
wx.setStorage({
  key:"key",
  data:"value"
})

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口

参数说明:

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
data Object/String 需要存储的内容
try {
    wx.setStorageSync('key', 'value')
} catch (e) {   
}

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容

OBJECT参数说明:

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数,res = {data: key对应的内容}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数名 类型 说明
data String key对应的内容
wx.getStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  } 
})

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容

参数说明:

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

wx.getStorageInfo(OBJECT)

异步获取当前storage的相关信息

OBJECT参数说明:

参数名 类型 必填 说明
success Function 接口调用的回调函数,详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数名 类型 说明
keys String Array 当前storage中所有的key
currentSize Number 当前占用的空间大小, 单位kb
limitSize Number 限制的空间大小,单位kb
wx.getStorageInfo({
  success: function(res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})

wx.getStorageInfoSync

同步获取当前storage的相关信息

try {
  var res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // Do something when catch error
}

wx.removeStorage(OBJECT)

从本地缓存中异步移除指定 key

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  } 
})

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key

参数名 类型 必填 说明
keys String 当前storage中所有的key
try {
  wx.removeStorageSync('key')
} catch (e) {
  // Do something when catch error
}

wx.clearStorage()

清理本地数据缓存

wx.clearStorage()

wx.clearStorageSync()

同步清理本地数据缓存

try {
    wx.clearStorageSync()
} catch(e) {
  // Do something when catch error
}

tip: 本地数据存储的大小限制为 10MB

位置

获取位置

wx.getLocation(OBJECT)

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。需要用户授权 scope.userLocation

OBJECT参数说明:

| 参数 | 类型 | 必填 | 说明 | 最低版本 |
|:--------:|:--------:|:----:|:-----------------------------------------------------------------------------:| |
| type | String | 否 | 默认为 wgs84 返回 GPS 坐标;gcj02 返回国测局坐标,可用于wx.openLocation的坐标 | 1.6.0 |
| altitude | Boolean | 否 | 传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度 | |
| success | Function | 是 | 接口调用成功的回调函数,返回内容详见返回参数说明 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | |

success返回参数说明:

参数 说明 最低版本
latitude 纬度,浮点数,范围为-90~90,负数表示南纬
longitude 经度,浮点数,范围为-180~180,负数表示西经
speed 速度,浮点数,单位m/s
accuracy 位置的精确度
altitude 高度,单位 m 1.2.0
verticalAccuracy 垂直精度,单位 m(Android 无法获取,返回 0) 1.2.0
horizontalAccuracy 水平精度,单位 m 1.2.0
wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

Tips

1.工具中定位模拟使用IP定位,可能会有一定误差。且工具目前仅支持 gcj02 坐标。

2.使用第三方服务进行逆地址解析时,请确认第三方服务默认的坐标系,正确进行坐标转换

wx.chooseLocation(OBJECT)

打开地图选择位置。需要用户授权 scope.userLocation

OBJECT参数说明:

参数 类型 必填 说明
success Function 接口调用成功的回调函数,返回内容详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数 说明
latitude 纬度,浮点数,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系
longitude 经度,浮点数,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系
name 位置名称
address 详细地址

查看位置

wx.openLocation(OBJECT):使用微信内置地图查看位置。需要用户授权 scope.userLocation

OBJECT参数说明:

参数 类型 必填 说明
latitude Float 纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系
longitude Float 经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系
scale INT 缩放比例,范围5~18,默认为18
name String 位置名
address String 地址的详细说明
success Function 接口调用成功的回调函数,返回内容详见返回参数说明
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale: 28
    })
  }
})

bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息

地图组件控制

wx.createMapContext(mapId, this):创建并返回 map 上下文 mapContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 组件

mapContext

mapContext 通过 mapId 跟一个 组件绑定,通过它可以操作对应的 组件

mapContext 对象的方法列表

| 参数 | 类型 | 说明 | 最低版本 |
|:-----------------:|:------:|:-------------------------------------------------------------------------:| |
| getCenterLocation | OBJECT | 获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 wx.openLocation | |
| moveToLocation | 无 | 将地图中心移动到当前定位点,需要配合map组件的show-location使用 | |
| translateMarker | OBJECT | 平移marker,带动画 | 1.2.0 |
| includePoints | OBJECT | 缩放视野展示所有经纬度 | 1.2.0 |
| getRegion | OBJECT | 获取当前地图的视野范围 | 1.4.0 |
| getScale | OBJECT | 获取当前地图的缩放级别 | 1.4.0 |

getCenterLocation 的 OBJECT 参数列表

参数 类型 必填 说明
success Function 接口调用成功的回调函数 ,res = { longitude: "经度", latitude: "纬度"}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

translateMarker 的 OBJECT 参数列表

参数 类型 必填 说明
markerId Number 指定marker
destination Object 指定marker移动到的目标点
autoRotate Boolean 移动过程中是否自动旋转marker
rotate Number marker的旋转角度
duration Number 动画持续时长,默认值1000ms,平移与旋转分别计算
animationEnd Function 动画结束回调函数
fail Function 接口调用失败的回调函数

includePoints 的 OBJECT 参数列表

参数 类型 必填 说明
points Array 要显示在可视区域内的坐标点列表,[{latitude, longitude}]
padding Array 坐标点形成的矩形边缘到地图边缘的距离,单位像素。格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。开发者工具暂不支持padding参数

getRegion 的 OBJECT 参数列表

参数 类型 必填 说明
success Function 接口调用成功的回调函数,res = {southwest, northeast},西南角与东北角的经纬度
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

getScale 的 OBJECT 参数列表

参数 类型 必填 说明
success Function 接口调用成功的回调函数,res = {scale}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
<!-- map.wxml -->
<map id="myMap" show-location />
<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>
<button type="primary" bindtap="translateMarker">移动标注</button>
<button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>
// map.js
Page({
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 0,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})
目录
相关文章
|
3天前
|
缓存 监控 测试技术
获取API接口数据的最佳实践详解
在开发过程中,与API进行交互是获取数据和服务的关键步骤。本文详细介绍了10个最佳实践,包括明确需求和文档、错误处理、数据验证、性能优化、安全性、日志和监控、版本控制、代码复用和维护、测试以及遵守法律和道德规范,帮助开发者更高效地从API获取数据,确保数据的准确性、安全性和性能。
|
2天前
|
存储 数据可视化 API
API接口数据获取流程的细化
本文概述了API的基础知识、获取API访问权限的方法、编写代码调用API的步骤、数据处理与分析技巧以及数据安全与合规的重要性,并提供了社交媒体数据分析、天气预报应用和电商数据分析等API数据获取的应用实例,旨在帮助读者全面了解和实践API接口数据获取的流程。
|
3天前
|
缓存 监控 API
抖音抖店 API 请求获取宝贝详情数据的调用频率限制如何调整?
抖音抖店API请求获取宝贝详情数据的调用频率受限,需遵循平台规则。开发者可通过提升账号等级、申请更高配额、优化业务逻辑(如缓存数据、异步处理、批量请求)及监控调整等方式来应对。
|
4天前
|
缓存 负载均衡 API
抖音抖店API请求获取宝贝详情数据、原价、销量、主图等参数可支持高并发调用接入演示
这是一个使用Python编写的示例代码,用于从抖音抖店API获取商品详情,包括原价、销量和主图等信息。示例展示了如何构建请求、处理响应及提取所需数据。针对高并发场景,建议采用缓存、限流、负载均衡、异步处理及代码优化等策略,以提升性能和稳定性。
|
12天前
|
Prometheus 监控 Cloud Native
如何查看商品销量 API 接口的性能指标数据?
要查看商品销量 API 接口的性能指标数据,可以通过以下几种方法:1. 使用第三方或开源 API 监控工具,如 Datadog、New Relic、Prometheus 和 Grafana;2. 在代码中手动记录时间戳或使用性能测量库;3. 查看 API 提供商的文档和报告;4. 进行负载测试,使用工具如 Apache JMeter 和 Gatling。这些方法可以帮助你全面评估 API 的性能表现。
35 2
|
14天前
|
缓存 监控 前端开发
处理页面缓存中数据不一致的问题
【10月更文挑战第9天】
27 2
|
18天前
|
小程序 JavaScript 开发工具
|
19天前
|
存储 JavaScript 前端开发
Blazor 调用 Clipboard API 读写剪贴板数据
【10月更文挑战第14天】Blazor 是一个使用 .NET 和 C# 构建交互式 Web UI 的框架。由于浏览器安全策略,直接访问某些原生 API(如 Clipboard API)受限。通过 JavaScript 互操作性(JS Interop),可在 Blazor 中调用这些 API。首先在 HTML 定义 JavaScript 函数,再通过 `IJSRuntime` 调用。此外,需注意不同浏览器对 Clipboard API 的支持程度及用户隐私授权问题。
|
20天前
|
消息中间件 缓存 NoSQL
大数据-49 Redis 缓存问题中 穿透、雪崩、击穿、数据不一致、HotKey、BigKey
大数据-49 Redis 缓存问题中 穿透、雪崩、击穿、数据不一致、HotKey、BigKey
36 2
|
20天前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!