微信小程序的几种常见的样式写法

一、微信小程序样式默认写法

默认写法就是直接用class类选择器的方法，在WXSS中直接用“.”+class类来定位渲染

微信小程序中使用class选择器可以使用".class-name"（class类名可以随意取，但是未来便于阅读代码一般使用英语单词）的形式来定义样式。在wxml文件中，可以给需要添加样式的组件添加class属性，例如：

<view class="container"></view>

在对应的wxss文件中，可以使用以下方式定义.container的样式：

.container {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10rpx;
}

二、样式直接在WXML组件里面编辑

这种方法就不用到WXSS文件中写，但是原理都是一样的

三、外部定义然后引用

在微信小程序和pages包同级位置创建Css（名字可以自取）文件（可以在微信小程序中建也可以找到小程序文件包在电脑中的位置再在pages同级位置建），然后在这个目录下新建一个文件命名为my.wxss，然后在这个文件中编写css代码.

我们在my.wxss中编写

.test1{
  color: brown;
}

然后在需要引入的页面的WXSS文件中写入以下代码

@import'/mywxss/myCSS.wxss'

将需要渲染的模块的class类设置为和my.wxss中的class类名对应

<view>
<text class="test1">这是一段文字</text>
</view>

运行即可引用成功

---