uni-app教程五（页面跳转、本地数据缓存）

小咪咪 2022-12-14 06:37 103阅读 0赞

### 目录 ###

*   *   *  uniapp页面跳转方式
         *  1. \`uni.navigateTo(object)\`
         *  2. \`uni.redirectTo(object)\`
         *  3. \`uni.reLaunch(object)\`
         *  4. \`uni.switchTab(object)\`
         *  5. \`uni.navigateBack(object)\`
         *  6. \`uni.preloadPage(object)\`
         *  本地数据缓存
         *  1. \`uni.setStorage(object)\`
         *  2. \`uni.setStorageSync(KEY,DATA)\`
         *  3. \`uni.getStorageSync(KEY)\`
         *  4. \`uni.removeStorageSync(KEY)\`
         *  5. uni.clearStorageSync()

### uniapp页面跳转方式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

### 1. `uni.navigateTo(object)` ###

> 保留当前页面，`跳转到新页面`，使用`uni.navigateBack()`可以返回到原页面。

**navigator 组件跳转：**

// 跳转到 /pages/info/index.vue页面，注意此页面不可以是tabBar页面
    <navigator url="/pages/info/index?key=100&key2=300" open-type="navigate">
         <view class="uni-link-item">点我跳转</view>
    </navigator>
    
    // /pages/info/index.vue页面接受参数
    export default { 
        onLoad: function (option) {  //option为object类型，会序列化上个页面传递的参数
            console.log(option.key); //打印出上个页面传递的参数。
            console.log(option.key2); //打印出上个页面传递的参数。
        }
    }
    
    // 在起始页面跳转到../components/test.vue页面并传递item={name:"kity",id:1} 参数,注意url有长度限制，过长会导致参数传递失败，可用encodeURIComponent方式解决。
    <navigator :url="'/pages/info/index?item='+ encodeURIComponent(JSON.stringify(item))" open-type="navigate">    
       点我跳转
    </navigator>
    export default { 
    
    	// 接受参数
    	onLoad: function (option) { 
    	//解码后，并转换成对象
    	     const item = JSON.parse(decodeURIComponent(option.item));
    	  }
        
    }

**@tap事件调用API跳转转**

//在起始页面跳转到../components/test.vue页面并传递参数
    uni.navigateTo({ 
        url: '../components/test?id=1&name=uniapp'
    });
    
    
    // 在test.vue页面接受参数
    export default { 
        onLoad: function (option) {  //option为object类型，会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
        }
    }

### 2. `uni.redirectTo(object)` ###

> `在当前页面打开`，关闭当前页面，跳转到应用内的某个页面。不可以使用`uni.navigateBack()`可以返回到原页面。

### 3. `uni.reLaunch(object)` ###

> `关闭所有页面`，打开到应用内的某个页面。不可以使用`uni.navigateBack()`可以返回到原页面。

### 4. `uni.switchTab(object)` ###

> `跳转到 tabBar 页面`，并关闭其他所有非 tabBar 页面。

pages.json
    
    { 
      "tabBar": { 
        "list": [{ 
          "pagePath": "pages/index/index",
          "text": "首页"
        },{ 
          "pagePath": "pages/other/other",
          "text": "其他"
        }]
      }
    }
    
    
    other.vue
    
    uni.switchTab({ 
        url: '/pages/index/index'
    });

### 5. `uni.navigateBack(object)` ###

> `返回上一个页面`

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    uni.navigateTo({ 
        url: 'B?id=1'
    });
    
    // 此处是B页面
    uni.navigateTo({ 
        url: 'C?id=1'
    });
    
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({ 
        delta: 2
    });
    
    
    //如上 A-->B-->C , C返回A

### 6. `uni.preloadPage(object)` ###

> `预加载页面`，是一种性能优化技术。被预载的页面，在打开时速度更快。

支持性不好，慎用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑
    
    uni.preloadPage({ url: "/pages/test/test"});

示例

uni.preloadPage({ url: "/pages/test/test"}); // 预加载 /pages/test/test 页面（仅触发onLoad，onReady)
    uni.navigateTo({ url: "/pages/test/test"}); // url匹配，跳转预加载页面（仅触发onShow)
    uni.navigateTo({ url: "/pages/test/test?a=b"}); // url不匹配，正常打开新页面

想看更多请进入官网：[https://uniapp.dcloud.io/api/router?id=navigateto][https_uniapp.dcloud.io_api_router_id_navigateto]

### 本地数据缓存 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

### 1. `uni.setStorage(object)` ###

> 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({ 
        key: 'storage_key',
        data: 'hello',
        success: function () { 
            console.log('success');
        }
    });

### 2. `uni.setStorageSync(KEY,DATA)` ###

> 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try { 
        uni.setStorageSync('storage_key', 'hello');
    } catch (e) { 
        // error
    }

### 3. `uni.getStorageSync(KEY)` ###

> 从本地缓存中同步获取指定 key 对应的内容。

try { 
        const value = uni.getStorageSync('storage_key');
        if (value) { 
            console.log(value);
        }
    } catch (e) { 
        // error
    }

### 4. `uni.removeStorageSync(KEY)` ###

> 从本地缓存中同步移除指定 key。

### 5. uni.clearStorageSync() ###

try { 
        uni.removeStorageSync('storage_key');
    } catch (e) { 
        // error
    }

> 同步清理本地数据缓存。

try { 
        uni.clearStorageSync();
    } catch (e) { 
        // error
    }

其它不一一详解，更多请看官网[https://uniapp.dcloud.io/api/storage/storage?id=setstorage][https_uniapp.dcloud.io_api_storage_storage_id_setstorage]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/54aa1d449dd44091bfa3c5c5ec0b5a97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/c1a498b6db8544398d59992c7389a35a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f6362d2b4f124e53ac7a39cd2e5bce27.png
[https_uniapp.dcloud.io_api_router_id_navigateto]: https://uniapp.dcloud.io/api/router?id=navigateto
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/9843141cf82f43159f64307ad1626acd.png
[https_uniapp.dcloud.io_api_storage_storage_id_setstorage]: https://uniapp.dcloud.io/api/storage/storage?id=setstorage