自适配高度 自定义的顶部导航栏，可参考博文 如图可见，在页面滚动过程中，顶部导航栏和底栏未动，仅中间的内容区域可滚动。 整个页面的高度设置为100%，并采用flex布局 滚动区域的高度，通过flex布局的flex-grow实现自适配 <template> <!-顶部--自定义的导航栏--> <CustomNavbar/> <!-中间--自适配高度的滚动区--> <scroll-viewscroll-yclass="contentBox"> <!-此处省略了页面内容的相关代码--> </scroll-v...

效果预览 弹出的内容 src\pages\goods\components\ServicePanel.vue <scriptsetuplang="ts"> //子组件调父组件的方法 constemit=defineEmits<{ (event:'close'):void }>() </script> <template> <viewclass="service-panel"> <!-关闭按钮--> <textclass="closeicon-close"@tap="emit('close')">...

组件封装 src\components\SUI_Swiper2.vue <scriptsetuplang="ts"> import{ref}from'vue' constprops=defineProps({ config:Object, }) constactiveIndex=ref(0) constchange:UniHelper.SwiperOnChange=(e)=>{ activeIndex.value=e.detail.current } //点击图片时 constonTapImage=(url:string)=>{ //大图预览 uni.pr...

效果预览 完整范例代码 页面src\pages\category\category.vue <scriptsetuplang="ts"> import{getCategoryTopAPI}from'@/apis/category' importtype{CategoryTopItem}from'@/types/category' import{onLoad}from'@dcloudio/uni-app' import{computed,ref}from'vue' //获取分类列表数据 constcategoryList=ref<CategoryTopItem[...

1.自动生成骨架屏代码 在微信开发者工具中，预览界面点击生成骨架屏 确定后，会自动打开骨架屏代码文件pages\index\index.skeleton.wxml 2.将骨架屏代码转换为vue文件 在项目中新建文件src\pages\index\components\skeleton.vue 将pages\index\index.skeleton.wxml中的代码复制到skeleton.vue中 删除所有的注释和无接口访问的部分（如顶部的导航栏），如下图所示，通过is属性可以轻松辨别出各个组件对应的骨架屏代码。 scroll-view标签也删除，只留接口更新内容的静态...

手机真机调试微信小程序 开发版和体验版的小程序，域名没有备案时想调试接口访问效果，可以按下述方式操作： 在手机上点右上方三个点，点击“开发调试”，开启调试模式，即可真机访问接口（跳过域名校验） 重新进入小程序，看到下图所示的绿色浮标，即进入了调试模式 根据环境自适配参数 //开发环境时值为30,其他环境（如生产环境）时值为1 page:import.meta.env.DEV?30:1, 指定编译页 在微信开发者工具中，增加编译模式 修改启动页面和启动参数即可。

效果预览 组件封装 src\components\SUI_Guess.vue <scriptsetuplang="ts"> import{ref,onMounted}from'vue' importtype{GuessItem}from'@/types/index' import{getGuessListAPI}from'@/apis/index' importtype{PageParams}from'@/types/global' //分页参数-Required指定分页参数必传 constpageParams:Required<PageParams>=...

<template> <divclass="container"> <divclass="label">猜你喜欢</div> </div> </template> <stylelang="scss"scoped> .label{ display:flex; &::before, &::after{ content:""; width:20px; height:20px; background-image:url(./bubble.png); background-size:contain...

效果预览 下图中的红框区域 范例代码 src\pages.json 配置隐藏默认顶部导航栏 "navigationStyle":"custom",//隐藏默认顶部导航 src\pages\index\components\CustomNavbar.vue 封装自定义顶部导航栏的组件（要点在于：获取屏幕边界到安全区域距离） <scriptsetuplang="ts"> //获取屏幕边界到安全区域距离 const{safeAreaInsets}=uni.getSystemInfoSync() </script> <template> &lt...

核心技术 伪类选择器 含义 li:nth-child(2) 第2个li li:nth-child(n) 所有的li li:nth-child(2n) 所有的第偶数个li li:nth-child(2n+1) 所有的第奇数个li li:nth-child(-n+5) 前5个li li:nth-last-child(-n+5) 最后5个li li:nth-child(7n) 选中7的倍数 border-right:3pxsolidwhite; border-top:3pxsolidwhite; //父元素中的偶数个子元素 &:nth...

1.在码云上创建远程仓库 复制远程仓库地址 2.在本地代码上创建git仓库 在本地代码文件夹上，打开git命令窗口 输入初始化命令，创建git仓库 gitinit 3.给git仓库添加远程仓库 继续输入git命令 gitremoteaddorigin远程仓库地址 4.按git的标准操作，提交代码即可

src\views\otherPages\404.vue <template> <divclass="pageBox"> <svg width="100%" height="auto" viewBox="00636324" fill="none" xmlns="http://www.w3.org/2000/svg" > <gid="OBJECTS"> <gid="Group"> <path id="Vector" d="M101.3255.2C101.3255.2111.1272.6181.8280.5C252.5288...

安装插件uni-create-view 用于快速创建页面 配置插件 创建页面 输入页面名称，空格，顶部导航的标题，回车 自动生成页面并在pages.json中注册了路由 pages\login\login.vue <template> <divclass="login">login</div> </template> <scriptlang="ts"setup> </script> <stylelang="scss"scoped></style> 需将div改为view...

下载安装Snipaste windows64位版本下载链接：https://pan.baidu.com/s/1i2L3JHxOGqkmX3lj2fUVHA?pwd=eut6 无需安装，解压后即可使用 其他版本见官网 启动Snipaste 双击解压后文件夹Snipaste-2.8.8-Beta-x64中的Snipaste.exe即可 启动成功后，在右下角可见其图标 修改Snipaste默认配置 在Snipaste图标上右键快捷菜单中点首选项 改动的配置如下（根据个人喜好修改，以下仅供参考）： 使用方法 截图后复制 Alt+A绘制截图区域后——回车 截图后悬浮 A...

文章 <divclass="contentBox"> <p>这是一篇范文——仅供测试使用</p> <p> Withthecomingofnationalday,Ihaveaoneweekholiday.Ireally expecttoit,becauseitwanttohaveashorttripduringthesedays.I willtraveltoJiuzhaiValleywithmyparentsforthreedays.Ihave heardthatthesceneryofJiuzhaiValleyisverybeautif...

登出逻辑 弹窗询问用户是否确定登出 清除登录状态登录状态通常存储在vuex和sessionStorage中，更彻底的登出还可以把所有本地存储数据都清除掉，如Cookie和localStorage。 跳转到登录页面 代码实现 <divclass="loginBox"v-if="isLogin"> <el-dropdown@command="handleCommand"> <spanclass="el-dropdown-link"> <span >{{timeMark}}，{{ userInfo.nickname||userInfo...

登录过期逻辑 现在普遍的登录权限校验方式是JWT（jsonwebtoken），当登录成功时，前端页面会获得一个token，每个token都设置了过期时间，通过解析token即可判断出token是否过期。 token过期，即登录过期。 核心技术 前端项目安装依赖jsonwebtoken和dayjs cnpmi-Sjsonwebtoken cnpmi-Sdayjs src\router\index.js中使用它们 importjwtfrom"jsonwebtoken"; importmomentfrom"dayjs"; 解析token constpayload=jwt.deco...

变量$ 定义变量 $link-color:'blue'; 变量名可以与css中的属性名和选择器名称相同 使用变量 a{ color:$link_color; } $highlight-border:1pxsolid$link_color; 中划线和下划线相互兼容，即中划线声明的变量可以使用下划线的方式引用，反之亦然。 $link-color:blue; a{ color:$link_color; } 变量作用域 ｛｝中定义的变量为局部变量，仅在｛｝内有效 $nav-color:F90; nav{ $width:100px; width:$width; color:$na...

需求描述 常见于列表的排版，如文章列表、用户列表、商品列表等。 代码实现 <divclass="listBox"> <divclass="itemBox">文章1</div> <divclass="itemBox">文章2</div> <divclass="itemBox">文章3</div> </div> .listBox{ margin:20px; padding:10px; border:1pxsolidblack; width:300px; } .itemBox{ padd...

路由访问权限逻辑 有的页面无需用户登录即可查看，如登录页、注册页、找回密码页、主页、对外公开的其他页面等。 有的页面需要用户登录后才能查看，如用户中心、博客编辑页等。 核心技术 VueRouter路由守卫 代码范例 src\router\index.js在需要登录才能访问的路由上添加路由meta元数据，以用户中心为例： //用户中心 { path:"/userCenter", meta:{requiresAuth:true}, component:(resolve)=>require(["@/views/userCenter/index.vue"],resolve),...