乐趣区

关于uniapp:uniapp项目实践总结十四封装存储和路由方法

jiezi

导语：在日常 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);
}

案例展现

  • 数据缓存
  • 页面路由

最初

以上就是封装存储和路由办法的次要内容，有不足之处，请多多斧正。

退出移动版