快捷導(dǎo)航

uniapp封裝存儲和路由方法詳解

更新時間：2023年09月14日 11:41:35 作者：MarkGuan

在日常?APP?開發(fā)過程中,經(jīng)常要用到數(shù)據(jù)的存儲、獲取和刪除等操作以及頁面導(dǎo)航之間的跳轉(zhuǎn),為此,封裝了一個兩個簡單的方法來統(tǒng)一調(diào)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助

原理分析

主要是以下 API。

uni.setStorage：保存數(shù)據(jù)到本地緩存中；
uni.getStorage：獲取保存的緩存數(shù)據(jù)；
uni.removeStorage：移除保存的數(shù)據(jù)緩存；
uni.clearStorage：清空保存的緩存數(shù)據(jù)；
uni.navigate{type}：跳轉(zhuǎn)頁面；

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

方法實現(xiàn)

接下來一一說明如何實現(xiàn)數(shù)據(jù)緩存操作和路由跳轉(zhuǎn)的封裝。

數(shù)據(jù)緩存

這里是使用一個方法，通過傳入不同的類型和參數(shù)來實現(xiàn)。

參數(shù)如下：

type: 類型，包括設(shè)置，獲取，刪除，清空；
isSync: 是否異步；
key: 鍵名；
val: 值；

// 存儲數(shù)據(jù)
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("數(shù)據(jù)緩存參數(shù)：", 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,
    };
  }
}

路由操作

這里是把常用的路由方法裝進一個方法里面了，方便調(diào)用。

參數(shù)如下：

type: 路由類型；
url: 路由地址
key: 鍵名；
delta: 返回級數(shù)；

// 頁面跳轉(zhuǎn)
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" &amp;&amp; !params.url) return;
  let { type, url, delta } = params;
  console.log("頁面跳轉(zhuǎn)參數(shù):", 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;
}

實戰(zhàn)演練

模板內(nèi)容

緩存數(shù)據(jù)操作

<button class="eg-btn" @click="storeSet('set')">設(shè)置數(shù)據(jù)</button>
<button class="eg-btn" @click="storeSet('get')">獲取數(shù)據(jù)</button>
<button class="eg-btn" @click="storeSet('remove')">刪除數(shù)據(jù)</button>
<button class="eg-btn" @click="storeSet('clear')">清空數(shù)據(jù)</button>
<view class="eg-res"> 數(shù)據(jù)：{{ 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>

腳本方法

定義數(shù)據(jù)

// 緩存數(shù)據(jù)
let data = ref("");

數(shù)據(jù)操作

這里為了方便都整合到一起調(diào)用了。

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(`數(shù)據(jù)${type}操作結(jié)果：`, 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(`數(shù)據(jù)${type}操作結(jié)果：`, res);
  }
  if (type == "remove") {
    let res = await proxy.$apis.utils.storeage({
      type: "del",
      isSync: true,
      key,
    });
    console.log(`數(shù)據(jù)${type}操作結(jié)果：`, res);
  }
  if (type == "clear") {
    let res = await proxy.$apis.utils.storeage({
      type: "clear",
      isSync: true,
    });
    console.log(`數(shù)據(jù)${type}操作結(jié)果：`, res);
  }
}

路由方法

這里為了方便都整合到一起調(diào)用了。

async function goPage(type, url, delta) {
  let data = await proxy.$apis.utils.navigate({
    type,
    url,
    delta,
  });
  console.log("頁面跳轉(zhuǎn)結(jié)果:", data);
}