uniapp学习（007-2 壁纸项目:详细设计css代码较多）

最新推荐文章于 2025-04-05 22:49:07 发布
原创 最新推荐文章于 2025-04-05 22:49:07 发布 · 1.3k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #学习 #css #vue #微信小程序 #前端框架 #小程序

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第70p-第p78的内容

文章目录

客服消息

按钮的open-type属性

在这里插入图片描述

在这里插入图片描述

添加客服

要添加客服 需要在微信开放平台里 找到 开发管理
配置AppID
在这里插入图片描述
放到程序的mainifest.json里

在这里插入图片描述

然后回到开放平台 找到客服 添加客服
在这里插入图片描述

在这里插入图片描述

然后手机扫码登录
在这里插入图片描述

设置按钮

这里我们使用的是view open-type只能在按钮上使用 我们把按钮覆盖view 然后透明度改成0 即可
在这里插入图片描述

先看一下半透明效果
在这里插入图片描述
在这里插入图片描述

全透明效果
在这里插入图片描述

在这里插入图片描述
这里也可以用label标签实现，按钮用hidden属性隐藏

ifdef和ifndef 实现多端匹配

语法

<!-- #ifdef xxx  --> 代表属于xxx 是这种效果 
<!-- #ifndef xxx  --> 代表属于除了xxx 都是这种效果

实现

让h5拨打电话 小程序联系客服

两个按钮叠加在这里 使用 ifdef 实现多端匹配
在这里插入图片描述

查看编译器
在这里插入图片描述

在这里插入图片描述

各种值 我们主要使用 H5 \APP \ MP(所有小程序)
在这里插入图片描述

在这里插入图片描述
在html\css\js代码都可以使用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
拨打电话功能
在这里插入图片描述
在这里插入图片描述

渐变效果

效果

在这里插入图片描述

编写

添加一个类给这个页面的最外围
在这里插入图片描述

在全局scss文件里定义类

单层渐变

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

双重渐变

在这里插入图片描述
在这里插入图片描述

也可以用transparent来充当透明效果
在这里插入图片描述

在这里插入图片描述
添加透明的位置
在这里插入图片描述

在这里插入图片描述

推荐选择颜色的网站ColorDrop
ColorDrop
在这里插入图片描述

选择两个好看的颜色
在这里插入图片描述
最终效果
在这里插入图片描述

颜色全局变量

创建一个scss文件

在这里插入图片描述

引入我们的scss文件 在里面定义变量

在这里插入图片描述
记得加前面加 @/代表根目录下的文件
在这里插入图片描述

我们定义一些变量

在这里插入图片描述

添加后记得重启程序，要不然可能会报错

在这里插入图片描述

这里直接引用即可

如果希望我们的css生效 可以添加 !important 提升权重
在这里插入图片描述

小程序穿透才可以
使用:deep 进行穿透
在这里插入图片描述

vue3有个:v-deep

uni-app 有个导出功能
在这里插入图片描述

分类列表页面

图片记得加aspectFill 让最短边展示出来
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

跳转

在这里插入图片描述

更多按钮 要跳转的是tabBar页面 所以要加上 open-type=“reLaunch”

在这里插入图片描述

nav下添加row 实现跳转 需要修改所有选项的结构
方法一是 使用前面提到的：deep()
方法二是使用 相对定位 透明度改为0
方法三就是 click事件方法跳转 这里感觉还是用事件跳转好

图片详情页面

设置页面图片样式

在这里插入图片描述

在这里插入图片描述
前面记得添加衔接滑动
在这里插入图片描述

添加遮罩层

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
当前效果
在这里插入图片描述

只设置margin:auto; 会拉满这个dom元素
在这里插入图片描述

在这里插入图片描述

有了宽度 并且margin:auto; 会自动居中
在这里插入图片描述

在这里插入图片描述

width:fit-content 有多少内容宽度就是多少
在这里插入图片描述
在这里插入图片描述

模糊一下
在这里插入图片描述
在这里插入图片描述

这代表mask的子view（第一层子view们）
在这里插入图片描述
在这里插入图片描述

提出去一个公用的class，就不用每个都这么写了
在这里插入图片描述

在这里插入图片描述

也可以用@mixin 像写函数一样传参
在这里插入图片描述

底部按钮

在这里插入图片描述
在这里插入图片描述

让按钮都在一行 display:flex;
在这里插入图片描述
在这里插入图片描述

底部平均分配 justify-content:space-around;
在这里插入图片描述
在这里插入图片描述
添加阴影和模糊
在这里插入图片描述

在这里插入图片描述

给按钮进行调整

.box{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加点击事件 隐藏遮罩层

这里使用v-show更好 更省性能
在这里插入图片描述

在这里插入图片描述

使用时间插件替换写死的日期和时间的值
在这里插入图片描述

信息弹窗

在这里插入图片描述

下载插件
在这里插入图片描述

导入到项目当中 （导入后记得重启项目）
在这里插入图片描述

编写点击事件

在这里插入图片描述
vue2的写法
在这里插入图片描述

vue3的写法
在这里插入图片描述

弹出
这里写一个空盒子放在上面 到时候可以进行左中右展示
在这里插入图片描述

在这里插入图片描述
让标题左中右设置

在这里插入图片描述

在这里插入图片描述

给close加点区域 要不然不好点
在这里插入图片描述

设置一下弹窗的最大高度不要超过60%
在这里插入图片描述

selectable要长按
在这里插入图片描述

添加评分组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

版权声明

在使用互联网图片时，最好写声明（避免不必要的官司）
在这里插入图片描述

在这里插入图片描述

评分

效果

在这里插入图片描述

代码

在这里插入图片描述

在这里插入图片描述

将头部css提出到最外面 这样就都可以使用了
在这里插入图片描述

uniapp-tailwindcss-uview-starter
xlzy
04-03 1976
uniapp-tailwind-uview-starter 背景：之前用uniapp+uview开发了一大一小两个小程序，css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwindcss，研究之后发现用Hbuilder创建的自由度比较低，于是选择了用Vue-cli4搭建了一套。 项目地址 uniapp-tailwind-uview-starter 项目初始化 在Webstorm中或者Vscode中开发uniapp 我选择了默认模板。 我的Webstorm默认使用pnpm包管理，这是第一个
使用postcss-px-to-viewport-8-plugin将页面转响应式
qq_45279180的博客
03-29 1830
可以看到exclude的配置如上所示，但是并没有include的配置，难不成这个配置不在index.js吗，但是没有找到，这里先暂且按下不表，先检查一下include的正则匹配有没有问题，打印上面的file以及正则匹配结果，发现无法匹配。OK打包完成，检查一下css，发现和上面一样，单位是转换了，但是是全局的，include并没有生效，事已至此没办法了，只能看看源码调试一下了。然后我看了下，发现是postcss8换写法了，得升级，于是我检查了一下next自带的postcss版本，发现是。
分享自己在uniapp开发中用的css样式
小虎哥的技术博客
10-28 1771
分享自己在uniapp开发中用的css样式和布局
uni-app--》打造个性化壁纸预览应用平台（一）
ztK63LrD的博客
08-17 1844
今天开始使用vue3+uni-app搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：
uniapp APP端 如何自定义导航栏背景颜色(渐变)
SLife4599的博客
08-30 7801
效果如图 需要注意的点,这个效果只能在真机调试下看见,在预览模式下是看不到的.而且只针对app 管用. 代码如下: { "path": "pages/shoppingMall/productDetails", "style": { "navigationBarTitleText": "商品详情", "navigationBarTextStyle":"white", // "enablePullDownRefresh": false, "app-plus": {
uniapp中view设置为透明
我有故人折剑去，斩尽春风不曾归
03-15 6046
index.vue(这是你要变透明的页面这里用index举例)
# uni-app开发攻略 # 个人封面页 （透明导航栏、源码）
ZHENGCHUNJUN的博客
08-24 2746
需求：制作一个类似于某博的个人主页的封面板块 效果图： 思路： 拿到设计图以后，我们需要先进行拆解页面结构， 这个页面主要由三大板块组成：导航栏+背景图+用户信息 拆解完结构以后，下一步是进行细分板块， 看每一个板块里面有什么特点，会用到什么知识点 下面是每个版块的思路及知识点 一、导航栏： （tip：这里我们采用的是uview里面的组件——u-navbar， 所以第一步是先要在page.json里面的这个页面加上"navigationStyle":"custom"） 然后我.
uniapp插件：基于CSS实现的进度环.zip
01-23
在IT行业中，尤其是在移动应用开发领域，uniapp是一个非常受欢迎的框架，它允许开发者使用一套代码来构建跨平台的应用程序，覆盖iOS、Android、Web、小程序等多个平台。本压缩包“uniapp插件：基于CSS实现的进度环....
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
【uniapp新闻列表-上拉刷新-下拉加载更多】是一个基于uniapp框架开发的应用功能模块，主要用于构建具有动态加载和刷新...通过这个项目，开发者不仅可以学习到uniapp的基本操作，还能提升对移动端应用交互设计的理解。
wot-design-uni-uniapp
09-24
这些配置文件的存在说明项目开发者对于代码质量和规范性有较高的要求，也体现了现代前端项目开发中的一些最佳实践。 index.html和favicon.ico是项目的基本组成部分，分别代表了网页的入口文件和网站图标，它们是...
uniapp滑动屏幕导航栏背景渐变
yangyishinanshen的博客
10-31 986
uniapp滑动屏幕导航栏背景渐变
学习咸虾米壁纸项目
m0_73638967的博客
08-02 1246
这样实现了不使用定位和浮动，则使.left,.right,.center分成三部分做出如上布局效果图，可采用实现上述壁纸信息和叉号的布局
Day2-2：前端项目uniapp壁纸实战
最新发布
2301_82019265的博客
04-05 766
在components下新建组件common-title。再在wallpaper新建一个目录components。图片换了下，原来的有点丑，图片可按自己喜欢在网上下载。来到common-title.vue。想要好看点就下载多一点图片哈。接下来我们来弄一下公共标题。下载好了，最好重启一下哈。记得点击创建同名目录。再去uniapp官网。
【Uniapp-Vue3】动态设置页面导航条的样式
XunLin233的博客
01-22 938
title:"标题名称"})点击修改以后顶部导航栏的标题会从“主页”变为“动态标题”
Uniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 Unia
南北极之间
12-26 5089
Uniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 UniaUniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式（完整代码示例） 全面解析 Uniapp 顶部栏颜色设置：从全局配置到动态切换 UniaUniapp 导航栏教程：全局设置、局部定制和动态更改一步到位！ Uniapp 新手必看：如何轻松设置顶部栏样式
专业黑色调CSS网页模板设计指南
weixin_35639680的博客
10-02 1938
本文还有配套的精品资源，点击获取 简介：黑暗主题CSS网页模板以其独特的黑色调风格在现代网页设计中备受青睐，尤其适用于游戏、科技、音乐和艺术等领域的网站。CSS在黑暗主题的设计中起着关键作用，负责定义背景、文字颜色、边框样式、过渡效果和动画等，以保证深色背景下内容的清晰度和视觉吸引力。通过模块化的DIV元素布局，黑暗主题网页模板展现了专业和时尚感，能够帮助商务和公司网站减少...
uniapp，使用css设置背景宫格
m0_71513265的博客
07-03 479
uniapp，使用css设置背景宫格。
【uniapp】app端压窗屏设计
欢迎来到☆槿畔☆的博客
05-26 1927
众所周知，在app端中，普通的组件是无法覆盖原生组件，即使是官方提供的`cover-view`也只是在实体内容中覆盖一些原生的如地图。但是无法覆盖底部的tabbar。
vue3+uniapp咸虾米壁纸项目实战
weixin_65574176的博客
08-14 1946
目前已完成的效果如下所示，因为要自己去申请域名才能实现网络图片下载的api，有需要的朋友可以去咸虾米老师的视频教程了解。目前已完成的效果如下图所示，限于篇幅原因，因为代码真的太多了，写多了自己都头大，懒得搬过来了，请各位移步仓库QAQ。PS:这个项目后期需要给配置域名，得自己去申请。如果使用腾讯云服务的话，应该就不用了。uni-app官网 (dcloud.net.cn)项目实战教程 哔哩哔哩搜索 咸虾米。
RuoYi-Geek-App：基于Vue3与Uniapp的移动开发框架
**Uniapp** 是该项目的核心运行框架，它基于 Vue.js 开发，通过一套代码编译成多个平台的应用。其底层采用原生渲染与 WebView 渲染相结合的方式，在保证性能的同时实现了良好的兼容性。开发者可以使用标准的 HTML、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值