dedecms 网站地图 模板,网站开发和运行 法律,自己做网站步骤,调查问卷 wordpress简介
UniApp 是一个基于 Vue.js 的跨平台开发框架#xff0c;旨在通过一次开发、编译后运行在多个平台上#xff0c;如 iOS、Android、H5、以及小程序#xff08;微信小程序、支付宝小程序、百度小程序等#xff09;等。UniApp 为开发者提供了统一的开发体验#xff0c;使…简介
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 falsecd到工程目录之后
npm run dev存储
localStorage
长期有效
templatedivinput v-modelusername placeholder输入用户名 /button clicksaveUsername保存用户名/buttonp存储的用户名{{ storedUsername }}/p/div
/templatescript 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();生命周期钩子
可以在页面开始挂载时,进行一些操作,如开始监听消息,填充默认数据等
templatedivp当前时间{{ currentTime }}/pbutton clickstopTimer停止计时/button/div
/templatescript 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);
});
/scriptroute
uniapp中路由使用自带的uni.navigateTo()跳转
npm install vue-router4uniapp
页面跳转
pageA
!-- pageA.vue --
templateviewbutton clickgoToPageBWithParams跳转到页面B并传递参数/buttonbutton clickgoToPageB跳转到页面B不传递参数/button/view
/templatescript setup
import { ref } from vue;const goToPageBWithParams () {uni.navigateTo({url: /pages/pageB/pageB?nameJohnage25});
};const goToPageB () {uni.navigateTo({url: /pages/pageB/pageB});
};
/scriptpageB
!-- pageB.vue --
templateviewtext v-ifname age名字{{ name }}, 年龄{{ age }}/texttext v-else没有接收到参数/text/view
/templatescript 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 ./Appimport { createSSRApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.cssexport function createApp() {const app createSSRApp(App)app.use(ElementPlus) // 挂载 ElementPlusreturn {app}
}示例代码
templatedivel-input v-modelinputValue placeholder请输入内容 stylewidth: 300px;/el-inputel-button typeprimary clickhandleClick stylemargin-left: 10px;提交/el-buttonp输入的内容{{ inputValue }}/p/div
/templatescript setup
import { ref } from vue;const inputValue ref();const handleClick () {alert(你输入的内容是${inputValue.value});
};
/script图标库
npm install element-plus/icons-vue使用
templatedivel-button typeprimaryel-iconsearch //el-icon 搜索/el-buttonel-button typesuccessel-iconedit //el-icon 编辑/el-buttonel-button typedangerel-icondelete //el-icon删除/el-buttonel-buttonel-iconrefresh //el-icon刷新/el-buttonel-button typewarningel-iconshare //el-icon分享/el-button/div
/templatescript setup
import { Search, Edit, Delete, Refresh, Share } from element-plus/icons-vue;
import { ElButton, ElIcon } from element-plus;/scriptaxios
简介
用于前后端交换数据,通过url与后端连接
url
一个完整的URLUniform Resource Locator统一资源定位符通常由以下几个部分组成 协议Scheme/Protocol 定义访问资源所用的协议例如http、https、ftp等。格式http://或https:// 域名Domain Name或IP地址 标识资源所在的服务器地址例如www.example.com或192.168.1.1。也可以包含www子域或是更具体的子域名如blog.example.com。 端口号Port 指定服务器上运行的特定服务的端口默认为80HTTP或443HTTPS通常省略。格式:8080 路径Path 服务器上资源的具体位置通常类似于文件系统路径如/folder/page.html。如果没有路径通常默认指向网站的根目录。 查询参数Query Parameters 包含键值对用于传递给资源的参数通常用于动态页面或API请求。 动态页面如根据id显示不同的界面,API请求如rest风格的接口 一般在get里面定位资源,在post里面应用一般都是API版本控制、分页、身份验证、路径补充、兼容性支持等场景以便保持API接口的一致性和简洁性。 格式?key1value1key2value2 片段标识符Fragment Identifier 指向资源内的某个位置如页面内的锚点。在wiki百科中经常用到定位某个标签https://en.wikipedia.org/wiki/Wiki#Conferences格式#section1
示例URL:
https://www.example.com:8080/folder/page.html?searchquery#section1配置
npm i axios示例
templatedivdiv clickfetchData classboxClick me to GET data/divbutton clicksendDataSend POST Request/buttondiv v-ifdatah3Data from GET request:/h3pre{{ data }}/pre/divdiv v-ifpostResponseh3Response from POST request:/h3pre{{ postResponse }}/pre/div/div
/templatescript setup
import axios from axios
import { ref } from vueconst 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)}
}
/scriptstyle 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 });
