本文主要是介绍微信小程序 本地存储 和 页面传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序:

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

一.本地存储:

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

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

(一).数据支持:

原生类型、Date、及能够通过JSON.stringify序列化的对象

(二).方法:

1.同步
（1）wx.setStorageSync(); 存储值

wx.setStorageSync("collect", collect);

参数:

（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)

参数:

（5）wx.clearStorageSync(); 清除所有的key

 wx.clearStorageSync()

2.异步
（1）wx.setStorage(); 存储值

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

 wx.setStorage({
  	key:"key",
   	data:"value"
 })

参数:

（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)
   }
 })

参数:

（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
   

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

这篇关于微信小程序 本地存储 和 页面传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！