简介
UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小程序（微信小程序、支付宝小程序、百度小程序等）等。UniApp 为开发者提供了统一的开发体验，使得同一套代码可以在多个平台上运行，从而减少开发和维护成本。
基本上可以直接使用vue的语法,为了可移植性,所以大部分的东西都是用的vue的,少部分,像页面导航,使用uniapp自带的
vue
配置
换淘宝源
npm config set registry https://registry.npm.taobao.org
下载
npm install -g @vue/cli
npm uninstall -g @vue/cli
创建项目
vue create vue01
如果创建遇到报错
error Error: certificate has expired
关闭strict-ssl后再安装
yarn config set strict-ssl false
cd到工程目录之后
npm run dev
存储
localStorage
长期有效
<template><div><input v-model="username" placeholder="输入用户名" /><button @click="saveUsername">保存用户名</button><p>存储的用户名：{{ storedUsername }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';// 定义数据
const username = ref('');
const storedUsername = ref('');// 保存用户名到 localStorage
const saveUsername = () => {localStorage.setItem('username', username.value);storedUsername.value = username.value;
};// 获取存储的用户名
onMounted(() => {const savedUsername = localStorage.getItem('username');if (savedUsername) {storedUsername.value = savedUsername;}
});
</script>sessionStorage
关闭浏览器后失效,跟本地存储类似
设置数据到 sessionStorage：
sessionStorage.setItem('sessionData', 'someValue');
获取 sessionStorage 中的数据：
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // 'someValue'
删除 sessionStorage 中的数据：
sessionStorage.removeItem('sessionData');
清空 sessionStorage 中的所有数据：
sessionStorage.clear();
生命周期钩子
可以在页面开始挂载时,进行一些操作,如开始监听消息,填充默认数据等
<template><div><p>当前时间：{{ currentTime }}</p><button @click="stopTimer">停止计时</button></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const currentTime = ref('');
let timer = null;// 组件挂载后开始计时
onMounted(() => {timer = setInterval(() => {currentTime.value = new Date().toLocaleTimeString();}, 1000);
});// 组件销毁之前清除定时器
onBeforeUnmount(() => {clearInterval(timer);
});
</script>
route
uniapp中路由使用自带的uni.navigateTo()跳转
npm install vue-router@4
uniapp
页面跳转
pageA
<!-- pageA.vue -->
<template><view><button @click="goToPageBWithParams">跳转到页面B并传递参数</button><button @click="goToPageB">跳转到页面B不传递参数</button></view>
</template><script setup>
import { ref } from 'vue';const goToPageBWithParams = () => {uni.navigateTo({url: '/pages/pageB/pageB?name=John&age=25'});
};const goToPageB = () => {uni.navigateTo({url: '/pages/pageB/pageB'});
};
</script>
pageB
<!-- pageB.vue -->
<template><view><text v-if="name && age">名字：{{ name }}, 年龄：{{ age }}</text><text v-else>没有接收到参数</text></view>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';const name = ref('');
const age = ref('');onMounted(() => {const route = useRoute();// 获取查询参数name.value = route.query.name || '';age.value = route.query.age || '';
});
</script>
也可以使用页面栈来获取查询参数
// 获取当前页面的 query 参数const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const { name: pageName, age: pageAge } = currentPage.options;name.value = pageName || '';age.value = pageAge || '';
页面栈
在 UniApp 中，页面栈是管理页面之间跳转和返回的一个重要机制。每次打开一个新页面，当前页面会被压入栈中，新的页面会成为栈顶的页面。当用户返回时，栈顶的页面被移除，返回到之前的页面。UniApp 的页面栈管理类似于浏览器的历史记录机制。以下是一些主要概念：
- 页面栈限制
UniApp 的页面栈最多允许 10 层页面（这可以通过 H5 端的history模式来拓展），超过限制时，会自动将底部的页面出栈，从而保持页面栈的数量。
- 页面跳转方式
uni.navigateTo: 进入新页面时，新页面会被压入页面栈，当前页面保持在栈中，适合在栈内管理跳转。uni.redirectTo: 替换当前页面，不会保留当前页面到栈中，适用于不希望用户返回之前页面的场景。uni.reLaunch: 清空整个页面栈，打开指定的页面，一般用于登录页面、首页等。uni.switchTab: 切换到tabBar页面，不会涉及页面栈管理，因为tabBar页面是独立的。
- 页面返回
uni.navigateBack: 返回上一个页面，默认返回一层，可以通过传入参数指定返回的页面层级。
- 生命周期与页面栈的关系
每当页面栈发生变化，页面生命周期函数也会相应地触发：
- onLoad: 页面第一次加载时触发。
- onShow: 每次页面显示时触发，包括返回时。
- onHide: 页面隐藏时触发，通常是在页面跳转到其他页面时触发。
这种页面栈机制帮助开发者在管理多页面应用时，更好地控制页面间的导航和返回操作。
如果有具体的应用场景或问题，也可以进一步探讨如何使用页面栈。
可以用如下代码打印关于页面栈的信息
// 获取当前页面栈const pages = getCurrentPages(); // 打印页面栈console.log(pages);// 打印页面栈的长度（当前打开的页面数量）console.log("页面栈长度: ", pages.length);// 获取栈顶页面（当前显示的页面）const currentPage = pages[pages.length - 1];console.log("当前页面路径: ", currentPage.route);console.log("当前页面参数: ", currentPage.options);
Element plus
简介
一个基于vue3组件库,挺好看的.嗯
配置
安装
npm install element-plus
修改配置文件main.js中vue3部分
import App from './App'import { createSSRApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'export function createApp() {const app = createSSRApp(App)app.use(ElementPlus) // 挂载 ElementPlusreturn {app}
}
示例代码
<template><div><el-input v-model="inputValue" placeholder="请输入内容" style="width: 300px;"></el-input><el-button type="primary" @click="handleClick" style="margin-left: 10px;">提交</el-button><p>输入的内容：{{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';const inputValue = ref('');const handleClick = () => {alert(`你输入的内容是：${inputValue.value}`);
};
</script>
图标库
npm install @element-plus/icons-vue
使用
<template><div><el-button type="primary"><el-icon><search /></el-icon> 搜索</el-button><el-button type="success"><el-icon><edit /></el-icon> 编辑</el-button><el-button type="danger"><el-icon><delete /></el-icon>删除</el-button><el-button><el-icon><refresh /></el-icon>刷新</el-button><el-button type="warning"><el-icon><share /></el-icon>分享</el-button></div>
</template><script setup>
import { Search, Edit, Delete, Refresh, Share } from '@element-plus/icons-vue';
import { ElButton, ElIcon } from 'element-plus';</script>
axios
简介
用于前后端交换数据,通过url与后端连接
url
一个完整的URL（Uniform Resource Locator，统一资源定位符）通常由以下几个部分组成：
-
协议（Scheme/Protocol）：
- 定义访问资源所用的协议，例如
http、https、ftp等。 - 格式：
http://或https://
- 定义访问资源所用的协议，例如
-
域名（Domain Name）或IP地址：
- 标识资源所在的服务器地址，例如
www.example.com或192.168.1.1。 - 也可以包含
www子域，或是更具体的子域名如blog.example.com。
- 标识资源所在的服务器地址，例如
-
端口号（Port）：
- 指定服务器上运行的特定服务的端口，默认为
80（HTTP）或443（HTTPS），通常省略。 - 格式：
:8080
- 指定服务器上运行的特定服务的端口，默认为
-
路径（Path）：
- 服务器上资源的具体位置，通常类似于文件系统路径，如
/folder/page.html。 - 如果没有路径，通常默认指向网站的根目录。
- 服务器上资源的具体位置，通常类似于文件系统路径，如
-
查询参数（Query Parameters）：
-
包含键值对，用于传递给资源的参数，通常用于动态页面或API请求。
-
动态页面如根据id显示不同的界面,API请求如rest风格的接口
-
一般在get里面定位资源,在post里面应用一般都是API版本控制、分页、身份验证、路径补充、兼容性支持等场景，以便保持API接口的一致性和简洁性。
-
格式：
?key1=value1&key2=value2
-
-
片段标识符（Fragment Identifier）：
- 指向资源内的某个位置，如页面内的锚点。
- 在wiki百科中经常用到定位某个标签
https://en.wikipedia.org/wiki/Wiki#Conferences - 格式：
#section1
示例URL:
https://www.example.com:8080/folder/page.html?search=query#section1
配置
npm i axios
示例
<template><div><div @click="fetchData" class="box">Click me to GET data</div><button @click="sendData">Send POST Request</button><div v-if="data"><h3>Data from GET request:</h3><pre>{{ data }}</pre></div><div v-if="postResponse"><h3>Response from POST request:</h3><pre>{{ postResponse }}</pre></div></div>
</template><script setup>
import axios from 'axios'
import { ref } from 'vue'const data = ref(null)
const postResponse = ref(null)async function fetchData() {try {const res = await axios.get("http://localhost:8088/user/list")data.value = res.dataconsole.log(res, "Data received from GET request")} catch (error) {console.error("Error fetching data:", error)}
}async function sendData() {try {const payload = { key: 'value' } // Replace with actual data to sendconst res = await axios.post("http://localhost:8088/user/add", payload)postResponse.value = res.dataconsole.log(res, "Data received from POST request")} catch (error) {console.error("Error sending data:", error)}
}
</script><style scoped>
.box {cursor: pointer;padding: 10px;background-color: #f0f0f0;border: 1px solid #ccc;text-align: center;
}
</style>
库封装
因为需要很多与后端的接口,所以我们进行封装,减少调用复杂度
import axios from 'axios';
import { ElMessage } from 'element-plus';// 创建axios实例
const http = axios.create({baseURL: 'http://localhost:8080', // 设置基础URLtimeout: 5000, // 设置超时时间
});// 请求拦截器
http.interceptors.request.use(config => {// 在请求发送之前做些什么，比如添加 token 等// config.headers.Authorization = `Bearer ${getToken()}`;return config;},error => {// 请求错误处理ElMessage.error('请求发送失败');return Promise.reject(error);}
);// 响应拦截器
http.interceptors.response.use(response => {// 处理响应成功if (response.status === 200) {return response.data;}ElMessage.error('服务器异常');return Promise.reject(response);},error => {// 处理响应失败const status = error.response ? error.response.status : null;if (status === 404) {ElMessage.error('请求的资源未找到');} else if (status === 500) {ElMessage.error('服务器内部错误');} else {ElMessage.error('网络错误，请稍后重试');}return Promise.reject(error);}
);// 封装常用请求方法
export const get = (url, params = {}) => http.get(url, { params });
export const post = (url, data = {}) => http.post(url, data);
export const put = (url, data = {}) => http.put(url, data);
export const del = (url, data = {}) => http.delete(url, { data });
![[SWPUCTF 2021 新生赛]error](https://img-blog.csdnimg.cn/img_convert/82ef7d469508cac8f6727eaf2693fa50.png)
