uniapp 通用样式
uniapp 通用样式设置方法
在 uniapp 中，可以通过全局样式和局部样式来实现通用样式的管理，确保应用在不同平台和设备上保持一致的视觉效果。
全局样式设置
在 App.vue 文件中定义全局样式，所有页面和组件都会继承这些样式：
/* App.vue */
<style>
/* 全局字体设置 */
page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #f8f8f8;
}
/* 通用边距和布局 */
.container {
padding: 15px;
}
/* 通用按钮样式 */
.btn {
padding: 10px 15px;
border-radius: 4px;
background-color: #007aff;
color: white;
text-align: center;
}
</style>通用颜色变量
在 uni.scss 中定义全局 SCSS 变量，方便统一管理主题色和常用颜色：
/* uni.scss */
$primary-color: #007aff;
$success-color: #4cd964;
$warning-color: #f0ad4e;
$error-color: #dd524d;
$text-color: #333;
$border-color: #eaeaea;常用工具类
创建通用工具类样式文件 common.css，并在需要的地方引入：
/* common.css */
.flex-row {
display: flex;
flex-direction: row;
}
.flex-column {
display: flex;
flex-direction: column;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.mt-10 {
margin-top: 10px;
}
.mb-10 {
margin-bottom: 10px;
}响应式适配方案
使用 rpx 单位实现不同屏幕尺寸的适配：
.container {
width: 750rpx; /* 设计稿宽度为750px时，1px=1rpx */
padding: 20rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
}状态栏和导航栏样式
在 pages.json 中配置全局导航栏样式：
{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "应用名称",
"navigationBarBackgroundColor": "#007aff",
"backgroundColor": "#f8f8f8"
}
}组件样式隔离
使用 options 配置组件样式隔离，防止组件样式影响全局：
export default {
options: {
styleIsolation: 'shared' // 可选 isolated/shared/page-isolated
}
}条件编译样式
针对不同平台使用条件编译语法：
/* #ifdef H5 */
.h5-specific {
background-color: #f0f0f0;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.wx-specific {
padding: 10px;
}
/* #endif */通过以上方法可以建立一套完整的 uniapp 通用样式体系，提高开发效率和维护性，同时保证多平台样式的一致性。
