【微信小程序sass样式】几个可以添加到app.scss的全局样式类

概要

使用全局样式,可以统一小程序界面的风格,方便常用布局的使用。下面是我常用到的一些全局样式类,使用sass编写

代码

common.scss

此文件定义一些sass变量:

$space: 16rpx;
$mini-space: 8rpx;
$font: 24rpx;
$title: 30rpx;
$bg-gray: #ddd;
$bg-primary: #07c160;

app.scss

@import './common.scss';

page {
  font-size: $font; // 字号统一
  background-color: $bg-gray; // 背景与container无缝衔接
}
// 容器,用它来为其中的view添加灰色背景。其直接子元素view或.view会具有统一间距、圆角、padding
.container {
  &.fluid {
    height: 100vh;
  }

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: $space;
  box-sizing: border-box;
  background-color: $bg-gray;

  & > view,
  & > .view {
    margin-bottom: $space;
    background-color: #fff;
    padding: $space;
    border-radius: $space;
  }
}

// row flexbox
.row {
  display: flex;
  flex-direction: row;
  padding: $space;
  align-items: center;
}
// column flexbox
.col {
  display: flex;
  flex-direction: column;
  padding: $space;
  align-items: center;
}
// 需配合.col(column flexbox)和.row(row flexbox)使用,作为他们的子元素,作用是尽量占满父元素剩余空间
.flex-1 {
  flex: 1;
}
// 边框微圆角
.border {
  border: #999 solid 2rpx;
  border-radius: $mini-space;
}

.title {
  font-size: $title;
  font-weight: bold;
}
// 按钮清除默认margin
button.btn {
  font-size: $title;
  // 按钮宽度占满,同时与加边框的表单控件对齐
  &.fluid {
    width: 87vw;
  }
}
// margin盒子
.space {
  margin: $mini-space;
}
// 该类下的view会增加margin,以达到间隔的目的
.space-box {
  & > view,
  & > .view {
    margin: $space;
  }
}
// 灰色字体
.gray {
  color: #999;
}
// 双列瀑布流
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  & > view {
    width: 270rpx;
    transition: all 0.3s;
    // 双列瀑布流,使用flex(justify-content: space-around)实现时,如果最后一行只有一个元素,默认是居中的。我们可以使用下面的样式让它左对齐
    &:nth-child(odd):last-child {
      margin-right: auto;
      margin-left: 20rpx;
    }
    // 点击时放大
    &:active {
      scale: 1.2;
    }
  }
}

.img {
  width: 100%;
}
// padding盒子,一般配合border类用于表单控件
.pdd {
  padding: $space;
}
// 单选框按钮样式
.radio .wx-radio-input {
  font-size: $font;
  width: $font;
  height: $font;
  padding: 0;

  .wx-radio-input-checked {
    &::before {
      // font-size: $font;
    }
  }
}
// 交叉轴拉伸排布
.stretch {
  align-items: stretch;
}

// 单行文本省略效果
// 注意 要实现ellipsis效果,除了要加上[overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 8rem;]外,display属性不能为flex,否则会失效
.ellipsis {
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 8rem;
}

实例展示

登录页

<page-meta>
  <navigation-bar title="登录"></navigation-bar>
</page-meta>
<view class="container">
  <view class="col space-box stretch">
    <view class="row border"><input type="text" bindconfirm="submit" model:value="{{name}}" placeholder="请输入用户名" class="flex-1" /></view>
    <view class="row border"><input type="text" bindconfirm="submit" model:value="{{password}}" password placeholder="请输入密码" class="flex-1" /></view>
    <button class="view btn fluid" type="primary" bind:tap="submit">登录</button>
  </view>
</view>

效果:
登录页

首页示例

<page-meta>
  <navigation-bar title="首页示例"></navigation-bar>
</page-meta>
<swiper circular autoplay indicator-dots indicator-color="#fff" indicator-active-color="#07c160" interval="2000">
  <swiper-item wx:for="{{[1, 2, 3]}}" wx:key="index">
    <image src="https://p2.cri.cn/M00/8A/9B/rBABCWatYmuAEo0bAAAAAAAAAAA440.1024x706.jpg" mode="widthFix" style="width: 100%;height: 100%;" />
  </swiper-item>
</swiper>
<view class="container">
  <view class="top">
    <view class="row">
      <view class="row flex-1 border">
        <input type="text" bindconfirm="search" model:value="{{key}}" placeholder="关键词搜索" class="flex-1" />
        <icon type="search" bind:tap="search" />
      </view>
      <!-- <button class="btn space" bind:tap="publish" type="primary" size="mini">我要发布</button> -->
    </view>
  </view>
  <view class="list row">
    <view wx:for="{{[1, 2, 3]}}" wx:key="index" bind:tap="go" class="col border space space-y">
      <image class="img" src="https://p2.cri.cn/M00/8A/9B/rBABCWatYmuAEo0bAAAAAAAAAAA440.1024x706.jpg" mode="aspectFit" style="width: 270rpx; height: 180rpx" />
      <view class="title" style="height: 3rem; overflow: hidden; text-align: center; font-size: 32rpx;">
        奥运奥运奥运奥运奥运奥运奥运奥运奥运
      </view>
      <!-- 注意 要实现ellipsis效果,除了要加上[overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 8rem;]外,display属性不能为flex,否则会失效 -->
      <view class="ellipsis">
        奥运奥运奥运奥运奥运aodsaccf
      </view>
    </view>
  </view>
</view>

效果图:
首页示例

表单示例

<page-meta>
  <navigation-bar title="表单示例"></navigation-bar>
</page-meta>
<view class="container">
  <view class="col stretch">
    <view class="col stretch">
      <view>姓名</view>
      <input type="text" placeholder="请输入姓名" class="input border pdd flex-1" value="{{name}}" disabled="{{name}}" />
    </view>
    <view class="col stretch">
      <view>手机号</view>
      <input type="text" placeholder="请输入手机号" class="input border pdd flex-1" model:value="{{tel}}" />
    </view>
    <view class="col stretch">
      <view>性别</view>
      <radio-group bindchange="selectGender" class="input border pdd flex-1">
        <view class="row">
          <radio class="radio" value="" checked /></view>
        <view class="row">
          <radio class="radio" value="" /></view>
      </radio-group>
    </view>
    <view class="col stretch">
      <view>日期</view>
      <picker mode="date" bindchange="bindPickerChange" model:value="{{birthday}}" start="1949-10-01" end="{{today}}">
        <view class="picker">
          <input type="text" placeholder="请点击选择日期" class="input border pdd flex-1" value="{{birthday}}" disabled />
        </view>
      </picker>
    </view>
    <view class="col stretch">
      <view>照片</view>
      <button class="input border pdd flex-1 fluid btn" bind:tap="chooseAvatar" style="padding-top: 50rpx ; padding-bottom: 50rpx; font-size: 50rpx; margin: 0;">
        <text wx:if="{{!avatar}}" class="plus">+</text>
        <image src="{{avatar}}" wx:if="{{avatar}}" mode="aspectFit" class="img" />
      </button>
    </view>
    <view class="col stretch">
      <view>选项</view>
      <picker bindchange="chooseOpt" model:value="{{optIndex}}" range="{{opts}}" range-key="optName">
        <view class="picker">
          <input type="text" placeholder="请点击选择选项" class="input border pdd flex-1" value="{{opts[optIndex].optName}}" disabled />
        </view>
      </picker>
    </view>
    <view class="row">
      <button class="btn fluid" bind:tap="submit" type="primary">提交表单</button>
    </view>
  </view>
</view>

表单示例

总结

好啦,这些示例应该够用了,其他的用法大家自行探索吧

更新

距离产生美

给上述表单的标签加上space类后,将会更加美观

<view class="space">照片</view>

按钮外置搜索框

之所以不是上面在把input包裹在含边框的row里,而用为input增加padding,外加边框的形式,是为了增大input的接触面积。二者的外观相差不大,但是前者点击边框与输入框之间的留白是无发触发聚焦的(因为点击的是外面rowpadding,不会触发input事件),后者点击留白是可以触发聚焦的(点击的是inputpadding),体验更佳。把icon包裹在按钮里,通过点击按钮触发搜索事件,也是为了增大接触面积,减少误触或点不到的情况。

<view class="row stretch">
    <input type="text" placeholder="关键词搜索" class="input border pdd flex-1" style="border-radius: 8rpx 0 0 8rpx;" />
    <button type="primary" size="mini" style="padding-top: 15rpx; border-radius: 0 8rpx 8rpx 0;">
      <icon type="search" color="#fff" />
    </button>
  </view>

<think>好的,我现在要解决用户的问题:如何在微信小程序中引用公共的SCSS样式文件。首先,我需要回顾一下用户提供的引用内容,看看有没有相关的信息。 用户提供了四个引用,其中引用[2]和引用[4]提到了使用SCSS的方法。引用[2]讲的是通过watch.js文件监听SCSS文件的变化并自动编译成wxss,而引用[4]提到在project.config.json中设置useCompilerPlugins为sass,这样才能支持SCSS。引用[3]则展示了如何在app.scss添加全局样式,比如使用.row和.input等,这可能涉及到如何将这些样式应用到各个页面。 接下来,我需要确定正确的步骤。首先,用户需要确保项目已经配置了SCSS支持。根据引用[4],需要在project.config.json文件的setting部分添加"useCompilerPlugins": ["sass"]。这一步是关键,否则小程序可能无法识别SCSS文件。 然后,用户需要创建公共的SCSS文件,比如variables.scss和mixins.scss,这些文件通常存放在styles或common目录下。接着,在需要使用这些公共样式的页面或app.scss中,使用@import语句引入这些文件。引用[3]中的app.scss可能就是通过这种方式引入公共样式的,然后在页面中使用这些。 但是,小程序中的每个页面可能需要单独引入,或者通过app.wxss全局引入。不过,SCSS的@import在编译后会合并到单个wxss文件中,所以如果在app.scss中引入,编译后的app.wxss会包含所有公共样式,从而全局生效。引用[3]的例子可能就是这样做的,将样式放在app.scss中,这样所有页面都能使用。 另外,引用[2]提到的watch.js可能是一个自动编译SCSS到wxss的脚本,这对于开发效率很有帮助。用户可能需要安装sass编译器,并运行这个脚本来自动处理SCSS文件的变化。 需要注意的是,小程序的每个页面的样式文件是独立的,如果要在多个页面中使用公共样式,需要在每个页面的.scss文件中引入公共文件,或者在app.scss中引入,这样编译后的app.wxss会被所有页面加载。根据小程序文档,app.wxss中的样式是全局的,所以这是一个有效的方法。 总结步骤应该是:1. 配置项目支持SCSS;2. 创建公共SCSS文件;3.app.scss中引入这些文件;4. 确保编译过程正确,比如使用watch.js或官方工具自动编译;5. 在页面中使用这些样式。 同时,用户可能遇到的问题包括:路径错误导致@import失败,SCSS语法错误,或者项目配置未正确启用sass插件。需要提醒用户检查这些点。 最后,生成相关问题时要考虑用户可能的后续疑问,比如如何管理多个样式文件,如何覆盖样式,或如何处理编译错误等。</think>在微信小程序中引用公共 SCSS 样式文件,可以通过以下步骤实现: ### 一、配置 SCSS 支持 1. **修改项目配置** 在 `project.config.json` 文件中添加 SCSS 编译支持: ```json "setting": { "useCompilerPlugins": ["sass"] } ``` 该配置使开发者工具自动将 `.scss` 文件编译为 `.wxss` [^4] ### 二、创建公共 SCSS 文件 1. **新建样式目录** 在项目根目录创建 `styles` 文件夹,存放公共样式文件如: - `variables.scss`(变量定义) - `mixins.scss`(混入函数) - `common.scss`(通用样式) ### 三、引入公共样式 1. **全局引入方式** 在 `app.scss` 中通过 `@import` 引入: ```scss @import './styles/variables'; @import './styles/mixins'; @import './styles/common'; ``` 编译后会生成全局生效的 `app.wxss` [^3] 2. **页面级引入** 在具体页面的 `.scss` 文件中局部引入: ```scss @import '../../styles/variables'; ``` ### 四、自动编译配置(可选) 添加 `watch.js` 文件实现实时编译: ```javascript fs.watch(__dirname, { recursive: true }, (eventType, filename) => { if (path.extname(filename) === '.scss') { execSync(`sass ${filename} ${filename.replace('.scss','.wxss')}`); } }); ``` 运行 `node watch.js` 后,SCSS 修改会自动编译为 `.wxss` [^2] ### 五、样式应用示例 ```html <view class="common-btn flex-center">按钮</view> ``` ```scss // common.scss .common-btn { padding: 16rpx; background: $primary-color; // 使用variables中定义的变量 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值