uniapp开发学习第3天:路由跳转、网络请求与本地存储,搞定动态交互核心!

各位每天打卡、稳步进阶、吃透跨端开发的老铁们，大家好！📣

欢迎来到 UniApp零基础进阶营·Day3！

先快速复盘前两天的硬核收获：

Day1 搞定框架认知、环境搭建、项目配置，成功入门跨端开发；

Day2 吃透UniApp核心语法、跨端标签、样式适配、数据渲染、事件交互，能独立写标准静态页面；

很多小伙伴学到这里，肯定发现一个问题：页面写得再好看，只能原地展示，不能跳转、不能联网、不能存数据，本质还是一张“死页面”！

真正的商用项目、接单项目，核心全在动态交互：点按钮跳页面、联网拿后端数据、本地存用户信息、列表刷新加载更多。

今天咱们直接解锁UniApp三大动态核心能力：路由系统、网络请求、本地存储，再搭配高频列表交互实战，直接把静态页面盘活成可商用动态项目！

依旧送上今日封神口诀，背完直接拿捏全天知识点：

路由配置看页面，两种跳转随你便；

网络封装做拦截，多端兼容无破绽；

本地存储持久存，TS约束稳又准；

刷新加载做交互，跨端项目真成型！

一、今天学的是项目「造血核心」

如果说前两天学的布局、语法、样式是小程序的皮囊，那今天的路由、网络、存储就是项目的血肉和灵魂。

给大家举个生活化的例子：

路由就是马路，负责页面之间来回穿梭；

网络请求就是快递，负责和后端服务器收发数据；

本地存储就是随身口袋，负责本地留存用户数据；

下拉上拉就是交互手感，让页面贴合用户使用习惯。

学完今天内容，你的项目彻底告别“静态展板”，真正具备商业项目的动态交互能力！

二、UniApp路由系统：和Vue Router完全不一样！

很多会Vue的老铁，上手UniApp第一步必踩坑：拿着Vue Router的逻辑写UniApp路由，直接报错！

这里先划重点：UniApp没有Vue Router！路由规则是自研的，更简单、更适配多端！

1. 核心差异对比（秒懂区别）

Vue3 Web端：靠 vue-router 插件，JS配置路由、嵌套路由、动态路由，依赖插件实现
UniApp跨端：靠 pages.json 静态配置，原生底层支持，无需安装插件、跨端零兼容问题

通俗讲：Vue路由靠“第三方工具”，UniApp路由是“官方自带buff”，更稳、更快、适配更强！

2. pages.json 静态路由配置（基础必学）

所有页面路由，全部在 pages.json 统一注册，数组第一项就是默认首页。

✅ 实战示例：配置首页+详情页路由

{  "pages": [    "pages/index/index",    "pages/detail/detail"  ],  "window": {    "navigationBarTitleText": "UniApp路由实战"  }}

不用引插件、不用写规则，配置保存即刻生效，H5/小程序/APP全端通用！

3. 动态路由 & 路由传参（业务刚需）

页面跳转必带参数！比如列表点击跳详情，需要传递ID、标题等数据。

✅ 实战：路由拼接传参

// 跳转详情页，传递商品IDuni.navigateTo({  url: `/pages/detail/detail?id=1001&name=UniApp实战`})

✅ 目标页面接收参数（onLoad生命周期）

onLoad((options) => {  console.log("接收参数ID：", options.id)  console.log("接收参数名称：", options.name)})

4. 两种页面跳转方式（全覆盖场景）

UniApp路由跳转分两类，适配不同业务场景，记住即可：

① 声明式导航：navigator组件（标签式跳转）

对标Vue的 router-link，直接写标签实现跳转，适合静态固定跳转场景。

<navigatorurl="/pages/detail/detail">  <text>点击跳转详情页</text></navigator>

② 编程式导航：API跳转（灵活万能）

业务逻辑控制跳转，适配判断权限、动态传参等复杂场景，四个核心API熟记：

uni.navigateTo：保留当前页，跳新页面（最常用）
uni.redirectTo：关闭当前页，跳新页面（无返回）
uni.switchTab：跳转Tabbar页面（底部导航专用）
uni.navigateBack：返回上一页/多级页面

5. 简易路由守卫实现

UniApp无原生路由守卫，我们可通过全局拦截+判断逻辑实现权限控制，比如未登录禁止跳转个人中心。

✅ 实战思路：跳转前判断token，无token拦截跳转登录页

const goMine = () => {  const token = uni.getStorageSync("token")  if(!token) {    uni.showToast({ title: "请先登录", icon: "none" })    uni.navigateTo({ url: "/pages/login/login" })    return  }  uni.navigateTo({ url: "/pages/mine/mine" })}

三、UniApp网络请求：告别axios，跨端通用

做Vue开发习惯用axios，但是！UniApp不推荐axios，兼容性极差！

axios基于浏览器XMLHttpRequest，在小程序、APP端直接失效，这是新手最大的坑！

1. uni.request 原生API使用

UniApp官方跨端请求API，一套代码适配H5/小程序/APP，原生兼容无bug。

✅ 实战基础请求示例：

uni.request({  url: "https://jsonplaceholder.typicode.com/todos/1",  method: "GET",  success: (res) => {    console.log("请求成功：", res.data)  },  fail: (err) => {    console.log("请求失败：", err)  }})

2. uni.request vs axios 核心差异

对比维度	axios	uni.request
适配平台	仅浏览器H5	全平台通用
兼容性	小程序/APP报错	官方原生适配
跨端能力	弱，需大量兼容代码	零适配、开箱即用

3. 企业级TS版请求封装（重点干货）

原生uni.request太繁琐，每次写重复代码！企业开发必做请求拦截、响应拦截、类型约束、统一报错。

我们直接封装一套可复用的TS版全局请求库：

第一步：定义接口TS类型

// utils/request.ts// 统一返回体类型interface ResType<T = any> {  code: number  data: T  message: string}

第二步：封装请求&响应拦截

// 全局请求方法export const http = <T>(options: Uni.RequestOptions): Promise<ResType<T>> => {  // 请求拦截：统一添加token  const token = uni.getStorageSync("token")  if(token) {    options.header = {      ...options.header,      Authorization: `Bearer ${token}`    }  }  return new Promise((resolve, reject) => {    uni.request({      ...options,      // 响应拦截：统一处理状态码、报错      success: (res: any) => {        if(res.data.code === 200) {          resolve(res.data)        } else {          uni.showToast({ title: res.data.message || "请求失败", icon: "none" })          reject(res.data)        }      },      fail: (err) => {        uni.showToast({ title: "网络异常，请重试", icon: "none" })        reject(err)      }    })  })}

第三步：页面直接调用

import { http } from "@/utils/request"// 泛型约束返回值类型，类型安全const getList = async () => {  const res = await http<any>({    url: "https://jsonplaceholder.typicode.com/todos",    method: "GET"  })  console.log("接口数据：", res.data)}

✅ 这套封装是企业标准模板，支持TS类型、自动带token、统一报错、全局适配多端！

四、UniApp本地存储：持久化数据TS适配

做项目离不开本地存储：存token、存用户信息、存配置参数、存缓存数据。

UniApp存储和小程序localStorage相似，但兼容性、稳定性更强！

1. 核心API实战

uni.setStorage：异步存储数据（推荐，不阻塞页面）
uni.getStorage：异步读取数据
uni.removeStorage：删除指定缓存
uni.clearStorage：清空所有缓存

✅ 实战存储用户信息（带TS类型约束）

// 定义用户类型interface UserInfo {  nickname: string  avatar: string  token: string}// 存储数据const saveUser = () => {  const user: UserInfo = {    nickname: "跨端开发者",    avatar: "https://xxx.png",    token: "123456789"  }  uni.setStorage({    key: "userInfo",    data: user  })}// 读取数据const getUser = () => {  uni.getStorage({    key: "userInfo",    success: (res) => {      console.log("本地用户信息：", res.data as UserInfo)    }  })}

2. 与小程序localStorage差异

小程序localStorage仅适配微信端，跨端失效
uniStorage全端通用，H5/小程序/APP数据持久化一致
支持异步语法，性能更优，不卡顿页面渲染

💡 口诀：本地缓存用uni，多端统一不踩坑，TS约束保稳定！

五、列表交互实战：下拉刷新 + 上拉加载更多

只要做列表页、商城页、资讯页，必用这两个功能！属于项目刚需交互，多端适配是核心难点。

1. 下拉刷新 onPullDownRefresh

实现下拉刷新列表最新数据，无需手动触发，页面原生监听。

✅ 实战完整代码：

// 开启下拉刷新（pages.json配置）// "enablePullDownRefresh": true// 页面监听下拉刷新const onPullDownRefresh = async () => {  // 重新请求最新数据  await getList()  // 停止刷新动画  uni.stopPullDownRefresh()}

2. 上拉加载更多 onReachBottom

滚动到底部自动加载下一页数据，分页功能核心。

✅ 实战分页逻辑：

let page = 1const pageSize = 10// 触底加载更多const onReachBottom = async () => {  page++  // 请求下一页数据  const res = await http({    url: "xxx/list",    data: { page, pageSize }  })  // 拼接列表数据  list.value = [...list.value, ...res.data]}

3. 多端适配要点

H5端自动适配浏览器滚动
小程序端原生触发，无兼容问题
APP端无需额外适配，UniApp底层统一处理

一套代码，三端完美交互，彻底告别重复适配！

六、今日学习目标自查清单

全部掌握，彻底打通项目动态交互能力✅

熟练掌握UniApp路由系统，理清与Vue Router的核心差异，可独立完成路由配置、动态传参、各类页面跳转及简易路由权限拦截
精通uni.request原生请求API，掌握与axios的适配差异，能够独立封装TS版企业级请求库，实现请求拦截、响应拦截、统一错误处理
熟练使用UniApp本地存储API，掌握与小程序存储的差异，可通过TS类型约束实现数据持久化存储、读取、删除
独立实现下拉刷新、上拉加载更多列表交互功能，掌握多端适配规则，可落地商用项目分页场景

七、结尾

各位老铁，恭喜大家完成UniApp动态交互核心攻坚战！🎉

前两天我们搞定了页面骨架和静态样式，今天直接给项目装上了跳转、联网、存数据、动态交互的核心引擎。

到这里，你写的页面再也不是死板的静态展板，而是能跳转、能联网、能存数据、可交互的标准商业页面。

重点是我们全程用TS工程化写法+企业级封装思路，不是野路子demo，是能直接上线、直接接单交付的标准代码！

路由解决页面流转、网络解决数据互通、存储解决数据持久、刷新加载解决用户交互，四大能力叠加，已经可以支撑90%的中小型跨端项目开发。

明天我们进阶UniApp自定义组件、组件通信、全局状态管理，彻底告别代码冗余，迈入工程化高阶开发！

坚持打卡深耕，一步步吃透跨端全栈能力，求职、接单、副业开发全程开挂！💪