View - WXSS

WXSS(WeiXin Style Sheets)

wxss编译器：wcsc 把wxss文件转化为 js

执行方式： wcsc index.wxss

支持大部分CSS特性

亲测包含但不限于如下内容：

• Transition
• Animation
  • Keyframes
• border-radius
• calc()
• 选择器，除了官方文档列出的，其实还支持
  • element>element
  • element+element
  • element element
  • element:first-letter
  • element:first-line
  • element:first-child
  • element:last-child
  • element~element
  • element:first-of-type
  • element:last-of-type
  • element:only-of-type
  • element:only-child
  • element:nth-child(n)
  • element:nth-last-child(n)
  • element:nth-of-type(n)
  • element:nth-last-of-type(n)
  • :root
  • element:empty
  • :not(element)
• iconfont

建议 Css3 的特性都可以做一下尝试。

尺寸单位 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。公式：

const dsWidth = 750
export const screenHeightOfRpx = function () {
  return 750 / env.screenWidth * env.screenHeight
}
export const rpxToPx = function (rpx) {
  return env.screenWidth / 750 * rpx
}
export const pxToRpx = function (px) {
  return 750 / env.screenWidth * px
}

可以了解一下 pr2rpx-loader 这个库。

样式导入

使用 @import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

内联样式

静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

iconfont

截止20180810

小程序未来有计划支持字体。参考微信公开课。

小程序开发与平时 Web开发类似，也可以使用字体图标，但是 src:url() 无论本地还是远程地址都不行，base64 值则都是可以显示的。

将 ttf 文件转换成 base64。打开这个平台 transfonter.org/。点击 Add fonts 按钮，加载ttf格式的那个文件。将下边的 base64 encode 改为 on。点击 Convert 按钮进行转换，转换后点击 download 下载。

复制下载的压缩文件中的 stylesheet.css 的内容到 font.wxss ，并且将 icomoon 中的 style.css 除了 @font-face 所有的代码也复制到 font.wxss 并将i选择器换成 .iconfont，最后：

<text class="iconfont icon-home" style="font-size:50px;color:red"></text>