网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

微信小程序 本地存储 和 页面传参

2021/6/28 21:18:48 人评论

微信小程序: 前言:在微信小程序开发过程中,还会遇到很多知识运用: 一.本地存储: 在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致 好处:有了本地缓存,你的小程序可以做到: 离线应用(已测试在无网络的情况下&…

微信小程序:

前言:在微信小程序开发过程中,还会遇到很多知识运用:

一.本地存储:

在开发的过程中,常常会用到本地存储.数据存储生命周期与小程序生命周期一致
好处:有了本地缓存,你的小程序可以做到:

  1. 离线应用(已测试在无网络的情况下,可以操作缓存数据)
  2. 流畅的用户体验
  3. 减少网络请求,节省服务器资源

(一).数据支持:

原生类型、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)来向后端请求数据.常用的即导航栏
导航栏传参:

  1. 第一页面传参,进行页面跳转

    <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>
    
  2. 第二页面通过页面加载获取
    在页面的右下角可以看到页面参数,这即是我们传递的参数id
    在这里插入图片描述

  onLoad: 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借口,并去除了一些没有必要的功能.

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?