uniapp壁纸项目笔记

项目初始化

static文件夹中尽量不要存放一些测试时用的图片。因为项目在打包的时候会将static文件夹一并的打包,这样会使得打包后的项目变得臃肿。
解决办法是在项目的根目录下创建一个common文件夹,用于存放测试用的图片和其他文件。common文件夹中的文件只有在被引入的时候才会被一并打包。
否则要避免这个情况就只能在打包项目前清理static文件夹。
同理,一些公共样式(scss文件)也可以放在common文件夹中,这样既在编写项目的时候可以做到样式的统一,又可以同时不使给项目添加一些不必要的东西(项目最后编译的时候只需要css,而不需要我们编写的时候用的scss,打包的时候只打由scss编译而来的css就可以了)。
在用scss文件预处理的时候,记得要在app文件中引入scss文件(一般都是在app中)。

项目进行中

uniapp中有很多插件,可以在uniapp官网中直接点击下载同时安装到项目中,安装的时候注意选择到需要的项目。
安装成功后在根目录中会多一个uni_modules文件夹,里面是安装的所有插件和也给scss文件。
在index文件中写banner轮播图
uniapp中swiper是一个内置组件,无需引用。
已经写定swiper的宽度,因为swiper-item的padding存在,内填充将元素充大了,可以通过对父级元素添加box-sizing: border-box;解决。
在banner下方写纵向的公告轮播
每个模块的标题重合性高,提出来作为可复用的组件
可复用的组件一般放在components文件夹中。
组件中的不同title和content通过slot插槽从父级获取。通过具名插槽可以向不同的插槽传递不同的值。
如果用props方法,父组件在标签内传递参数,子组件中需要在defineProps中接收,再将参数放在相应的结构中。如果参数需要处理,可以用变量(一般命名props)接收definePropsz再对其进行处理(比如computed,接收到的props是只读的,不能对其进行赋值操作)。
slot插槽接收在父组件中用template标签包裹的内容。
遇事不决找组件
uni-dateformat 日期格式化
每个壁纸类别也是高度重合的组件
做有规律的网格式布局用grid最爽了
直接在组件中使用组件名,可能会报错
在图片组件上需要对3个组件整体做倒角,所以在外层容器上做倒角。此时图片没有倒角效果,是被图片遮盖了,需要再添加一个overflow:hidden效果。此时正确显示整体的倒角效果。
毛玻璃的磨砂效果是一个可以记录下来方便后续复用的代码块。
border-radius属性可以按照“左上,右上,右下,左下”的顺序挨个进行设置。
响应式变小的css可以使用transform:scale属性。但此效果默认为以容器中心为基点进行缩放,需要设置transform-origin属性来改变缩放的基点位置。
兼容多个平台的时候,编译器,差异编译是很重要的
h5和小程序的差异功能:打电话和联系客服,需要使用uniapp的组件实现。
公共背景颜色可以在common文件夹中的style文件夹中的commonn-style文件中设置。
对于全局使用的颜色 ,可以在uni-scss文件中设置全局的颜色变量,方便后期批量更改颜色。同时切记多写注释,方便后期修改和阅读。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值