uniapp封装存储和路由方法详解

 更新时间:2023年09月14日 11:41:35   作者:MarkGuan  
在日常 APP 开发过程中,经常要用到数据的存储、获取和删除等操作以及页面导航之间的跳转,为此,封装了一个两个简单的方法来统一调用,有需要的朋友可以借鉴参考下,希望能够有所帮助

原理分析

主要是以下 API。

  • uni.setStorage:保存数据到本地缓存中;
  • uni.getStorage:获取保存的缓存数据;
  • uni.removeStorage:移除保存的数据缓存;
  • uni.clearStorage:清空保存的缓存数据;
  • uni.navigate{type}:跳转页面;

以下方法存于根目录下的scripts文件夹下的utils.js文件中。

方法实现

接下来一一说明如何实现数据缓存操作和路由跳转的封装。

数据缓存

这里是使用一个方法,通过传入不同的类型和参数来实现。

参数如下:

  • type: 类型,包括设置,获取,删除,清空;
  • isSync: 是否异步;
  • key: 键名;
  • val: 值;
// 存储数据
async function storeage(options) {
  try {
    let defultOptions = {
      type: options.type,
      isSync: options.isSync || false,
      key: options.key,
      data: options.val,
    };
    let params = { ...options, ...defultOptions };
    console.log("数据缓存参数:", params);
    let { type, isSync, key, data } = params;
    let result = null,
      types = {
        set: uni[`setStorage${isSync ? "Sync" : ""}`],
        get: uni[`getStorage${isSync ? "Sync" : ""}`],
        del: uni[`removeStorage${isSync ? "Sync" : ""}`],
        clear: uni[`clearStorage${isSync ? "Sync" : ""}`],
      };
    if (type == "set") {
      if (isSync) {
        result = await types[type](key, data);
      } else {
        result = await types[type]({
          key,
          data,
        });
      }
    }
    if (["get", "del"].includes(type)) {
      let param = isSync ? key : { key };
      result = await types[type](param);
    }
    if (type == "clear") {
      result = await types[type]();
    }
    return {
      code: 1,
      data: result,
    };
  } catch (e) {
    return {
      code: 2,
      data: e,
    };
  }
}

路由操作

这里是把常用的路由方法装进一个方法里面了,方便调用。

参数如下:

  • type: 路由类型;
  • url: 路由地址
  • key: 键名;
  • delta: 返回级数;
// 页面跳转
async function navigate(options) {
  let res = null,
    defultOptions = {
      type: options.type || "to",
      url: options.url || "",
      delta: options.delta || 1,
    },
    params = { ...options, ...defultOptions };
  if (!params.type) return;
  if (params.type != "back" && !params.url) return;
  let { type, url, delta } = params;
  console.log("页面跳转参数:", params);
  if (type == "to") {
    res = await uni.navigateTo({
      url,
    });
  }
  if (type == "back") {
    res = await uni.navigateBack({
      delta,
    });
  }
  if (type == "redir") {
    res = await uni.redirectTo({
      url,
    });
  }
  if (type == "tab") {
    res = await uni.switchTab({
      url,
    });
  }
  if (type == "lanuch") {
    res = await uni.reLaunch({
      url,
    });
  }
  return res;
}

实战演练

模板内容

  • 缓存数据操作
<button class="eg-btn" @click="storeSet('set')">设置数据</button>
<button class="eg-btn" @click="storeSet('get')">获取数据</button>
<button class="eg-btn" @click="storeSet('remove')">删除数据</button>
<button class="eg-btn" @click="storeSet('clear')">清空数据</button>
<view class="eg-res"> 数据:{{ data }} </view>
  • 路由操作
<button class="eg-btn" @click="goPage('to', '/pages/test/stand')">去模板</button>
<button class="eg-btn" @click="goPage('back', '', 1)">返回上一页</button>
<button class="eg-btn" @click="goPage('redir', '/pages/index/swiper')">去重定向</button>
<button class="eg-btn" @click="goPage('tab', '/pages/user/index')">去我的</button>
<button class="eg-btn" @click="goPage('lanuch', '/pages/index/list')">去列表</button>

脚本方法

  • 定义数据
// 缓存数据
let data = ref("");
  • 数据操作

这里为了方便都整合到一起调用了。

async function storeSet(type) {
  let id = proxy.$apis.utils.uuid(),
    key = "1693991490699-10vrs3hoiv6";
  if (type == "set") {
    let res = await proxy.$apis.utils.storeage({
      type: "set",
      isSync: true,
      key: id,
      val: `id-${id}`,
    });
    console.log(`数据${type}操作结果:`, res);
  }
  if (type == "get") {
    let res = await proxy.$apis.utils.storeage({
      type: "get",
      isSync: true,
      key,
    });
    if (res.code == 1) {
      data.value = res.data;
    }
    console.log(`数据${type}操作结果:`, res);
  }
  if (type == "remove") {
    let res = await proxy.$apis.utils.storeage({
      type: "del",
      isSync: true,
      key,
    });
    console.log(`数据${type}操作结果:`, res);
  }
  if (type == "clear") {
    let res = await proxy.$apis.utils.storeage({
      type: "clear",
      isSync: true,
    });
    console.log(`数据${type}操作结果:`, res);
  }
}
  • 路由方法

这里为了方便都整合到一起调用了。

async function goPage(type, url, delta) {
  let data = await proxy.$apis.utils.navigate({
    type,
    url,
    delta,
  });
  console.log("页面跳转结果:", data);
}

案例展示

数据缓存

页面路由

以上就是uniapp封装存储和路由方法详解的详细内容,更多关于uniapp封装存储路由的资料请关注脚本之家其它相关文章!

相关文章

  • 使用JavaScript实现改造layer弹层移动版组件

    使用JavaScript实现改造layer弹层移动版组件

    这篇文章主要为大家详细介绍了使用JavaScript实现改造layer弹层移动版组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 一文详解为什么资深前端都在悄悄学WebAssembly

    一文详解为什么资深前端都在悄悄学WebAssembly

    WebAssembly(简称Wasm)是一种低级的类汇编语言,它具有紧凑的二进制格式,能够以接近原生的性能在现代Web浏览器中运行,这篇文章主要介绍了为什么资深前端都在悄悄学WebAssembly的相关资料,需要的朋友可以参考下
    2026-06-06
  • JavaScript设计模式学习之“类式继承”

    JavaScript设计模式学习之“类式继承”

    这篇文章主要介绍了JavaScript设计模式学习之“类式继承”,本文直接用代码实例讲解类式继承的实现方法,需要的朋友可以参考下
    2015-03-03
  • js 数组倒序排列的具体实现

    js 数组倒序排列的具体实现

    有时候需要将数组类型变量内的元素颠倒一下顺序再输出,本文就详细的介绍一下,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • JS 各种网页尺寸判断实例方法

    JS 各种网页尺寸判断实例方法

    JS 各种网页尺寸判断实例方法,需要的朋友可以参考一下
    2013-04-04
  • JS中let的基本用法举例

    JS中let的基本用法举例

    ES6新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,下面这篇文章主要给大家介绍了关于JS中let的基本用法,需要的朋友可以参考下
    2023-01-01
  • vue(javaScript)操作字符串的一些常用方法总结

    vue(javaScript)操作字符串的一些常用方法总结

    在平时前端开发中,我们不难发现经常会用到字符串操作,这篇文章主要给大家介绍了关于vue(javaScript)操作字符串的一些常用方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • 基于JavaScript实现电子签名功能

    基于JavaScript实现电子签名功能

    这篇文章主要为大家详细介绍了如何通过JavaScript实现简单的电子签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-11-11
  • JavaScript实现俄罗斯方块游戏过程分析及源码分享

    JavaScript实现俄罗斯方块游戏过程分析及源码分享

    这篇文章主要介绍了JavaScript实现俄罗斯方块游戏过程分析及源码分享,本文分解了游戏规则、实现过程、难点分析及实现源码,需要的朋友可以参考下
    2015-03-03
  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论