前言
:在微信小程序开发过程中,还会遇到很多知识运用:
在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致
好处
:有了本地缓存,你的小程序可以做到:
原生类型、Date、及能够通过JSON.stringify序列化的对象
1.同步
(1)wx.setStorageSync()
; 存储值
wx.setStorageSync("collect", collect);
参数:
参数 | 作用 |
---|---|
key | 本地缓存中指定的 key |
success | 异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容} |
fail | 异步接口调用失败的回调函数 |
complete | 异步接口调用结束的回调函数(调用成功、失败都会执行) |
data | 需要存储的内容 |
(2)wx.removeStorageSync()
; // 移除指定的值
wx.removeStorageSync("collect");
(3)wx.getStorageSync()
; 获取值
let collect=wx.getStorageSync("collect")
(4)wx.getStorageInfoSync()
; 获取当前 storage 中所有的 key
const res = wx.getStorageInfoSync() console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize)
参数:
参数 | 作用 |
---|---|
key | 本地缓存中指定的 key |
success | 异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容} |
fail | 异步接口调用失败的回调函数 |
complete | 异步接口调用结束的回调函数(调用成功、失败都会执行) |
(5)wx.clearStorageSync()
; 清除所有的key
wx.clearStorageSync()
2.异步
(1)wx.setStorage()
; 存储值
将数据存储在本地缓存中指定的 key
中。会覆盖掉原来该 key
对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key
允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorage({ key:"key", data:"value" })
参数:
参数 | 作用 |
---|---|
key | 本地缓存中指定的 key |
success | 异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容} |
fail | 异步接口调用失败的回调函数 |
complete | 异步接口调用结束的回调函数(调用成功、失败都会执行) |
data | 需要存储的内容 |
(2)wx.removeStorage()
; 移除指定的值
wx.removeStorage({ key: 'key', success (res) { console.log(res) } })
(3)wx.getStorage()
; 获取值
wx.getStorage({ key: 'key', success (res) { console.log(res.data) } })
参数:
参数 | 作用 |
---|---|
key | 本地缓存中指定的 key |
success | 异步接口调用成功的回调函数,回调参数格式: {data: key对应的内容} |
fail | 异步接口调用失败的回调函数 |
complete | 异步接口调用结束的回调函数(调用成功、失败都会执行) |
(4)wx.getStorageInfo()
; 获取当前 storage 中所有的 key
wx.getStorageInfo({ success (res) { console.log(res.keys)`在这里插入代码片` console.log(res.currentSize) console.log(res.limitSize) } })
(5)wx.clearStorage()
; 清除所有的key
wx.clearStorage()
注
:可以看到以Sync结尾都是同步方法
注意
:微信小程序本地多个存储数据,要分开写.
错误示范:
wx.setStorageSync('hourDetail','luopanNav',res.data.data.h_detail,res.data.data.position);
正确事例:
wx.setstoragesync('hourDetail', res.data.data.h_detail ); _this.setData({ report: res.data.data }) wx.setstoragesync('hourDetail', res.data.data.position); _this.setData({ report: res.data.data })
同步方法会堵塞当前任务,直到同步方法处理返回。
异步方法不会塞当前任务
当我们要查询某个商品详情时,就需要利用传参(一般是id)来向后端请求数据.常用的即导航栏
导航栏传参:
第一页面传参,进行页面跳转
<navigator class="" target="" hover-class="navigator-hover" open-type="navigate" wx:for="{{item.children}}" wx:for-item="item" wx:for-index="index" wx:key="index" //第一页面进行传参 url="/pages/goods_list/index?cid={{item.cat_id}}" > <image class="omg" src="{{item.cat_icon}}" mode="widthFix" lazy-load="false" binderror="" bindload="" /> <view>{{item.cat_name}}</view> </navigator>
第二页面通过页面加载获取
在页面的右下角可以看到页面参数,这即是我们传递的参数id
onl oad: function (options) { // console.log(options) let goods_id=options.goods_id //获取id wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail', data: {goods_id}, //向后台接口传递id success:(res)=>{ this.GoodsInfo=res.data.message console.log(res) this.setData({ shopList:res.data.message, //赋值,渲染 }) } }) },
微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言)、WXSS(WeiXin Style Sheet 微信样式表)、JS(JavaScript 小程序的主体);JS文件这个与前段中使用的JS也是几乎没有区别,当然针对微信小程序新增了一些微信的API借口,并去除了一些没有必要的功能.