零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等
总时长 23:40:00 共116P
此文章包含第36p-第p40的内容
文章目录
- 响应式尺寸单位 rpx
- 各种工具修改ui给的图片的宽度
- ps操作步骤
- 即时设计操作步骤：
- 导入css样式
- uni.scss
- 自定义scss文件 并且使用uni.scss进行引用
- 页面路由
- globalStyle(全局样式)
- 设置导航背景颜色和文字颜色
- 设置全局标题
- 隐藏导航栏
- 开启下拉刷新
- 触底刷新
- pages
- 给单独页面设置导航颜色
- pages的顺序 排列第一的 会在首页展示
- 单独页面下拉刷新功能
- 底部tabBar导航
- 底部导航数 最低2个最多5个
- 添加
- 也可以设置到上面（仅微信小程序支持）
- 添加图标
响应式尺寸单位 rpx
rpx是按照屏幕大小为750像素的宽度；即750rpx占整个屏幕的宽度，屏幕的大小变化 会根据750px进行等比例放大缩小
750是默认苹果6的像素大小 开发一般按照都是苹果6的尺寸来的
各种工具修改ui给的图片的宽度
如果ui给的图片的宽度不是750px，我们可以用各种工具进行缩放
ps操作步骤
长宽锁定 调整大小 即可
即时设计操作步骤：
锁定宽高 改成750 即可
也可以设置字体大小 这里的字体大小是52 我们设计程序的时候就可以写成52rpx
导入css样式
样式来说 App.vue的权重低于页面权重（就近原则）
uni.scss
这个文件定义了许多uniapp的变量 可以直接在别的文件里进行引用
引用
也可以在uni.scss里进行自定义设置颜色等变量，添加后需要重启程序 否则可能会导致小程序报错
自定义scss文件 并且使用uni.scss进行引用
切记@import 结束的时候要加分号
页面路由
globalStyle(全局样式)
设置导航背景颜色和文字颜色
设置全局标题
如果使用全局标题的话 前面页面没有设置页面名称的都会显示这个
隐藏导航栏
navigationStyle:"custom"添加后 导航栏会消失（不希望消失的话不要写）
小技巧：使用qq截图的时候 鼠标放的地方按住ctrl+c 可以copy出十六进制的颜色，只按c可以copy出RGB颜色
开启下拉刷新
开启下拉刷新
下拉刷新 可以看到背景颜色
触底刷新
还可以设置距离底部多少像素进行触发
pages
给单独页面设置导航颜色
pages的顺序 排列第一的 会在首页展示
单独页面下拉刷新功能
可以全局不设置、单独页面设置true 只这一页进行下拉刷新
也可以 全局设置都有刷新，单独页面设置false，这页不刷新
底部tabBar导航
底部导航数 最低2个最多5个
添加
也可以设置到上面（仅微信小程序支持）
添加图标
可以去iconfont网站搜索一些矢量图标 iconfont-阿里巴巴矢量图标库
可以下载多种颜色的 进行切换使用
我们放到static文件夹的images里
