EA&UML日拱一卒-0基础学习微信小程序(7)-WXSS和CSS

我们按照信息的参照关系来说明小程序中的各类文件,今天的内容是页面样式文件wxss。


WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。说到样式文件大家都知道的是CSS(CascadingStyleSheet),wxss具备CSS的大部分功能,但是为了微信小程序进行了修改和扩充。


CSS概要


在 HTML文档中需要通过使用很多属性来控制字体,颜色,间距。对于不同的画面元素,经常需要指定不同的属性组合。但是同时,在一个一定规模的画面中或者是 不同的画面之间经常存在着共同的组合。通过将属性组合定义在HTML以外的CSS文件中可以为属性设定提供更大的共通性和灵活性。


公共样式表


CSS样式表的基本元素是样式规则,他们由选择器和包裹在一对“{}”中的CSS属性值所组成。这一点对于WXSS也同样适用。


/**app.wxss**/
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
} 


本例中.container就是选择器,它表示任何以“container”类命名的元素都适用“{}”中的属性。属性由[属性名:属性值]构成,注意这里的属性名并不包含双引号,这一点和JSON不同。


页面式样表


在HelloWorld例子中有两个页面式样表,我们只是拿出index.wxss来说明。


/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}


式样表中分别定义了适用于以userinfo,userinfo-avatar, userinfo-nickname,usermotto类命名的元素的属性组合。记一下这些名字就好,属性的具体内容可以参考小程序开发文档。


编程语言的变量定义都有一个作用域的概念,一个变量被重复定义时,语义上距离近的定义有效。同样的道理,如果页面式样表中定义了与公共式样表中相同的内容,那么对于这个页面来说,页面式样表中的定义优先。


参考文献


本文中关于CSS的描述引用了【JavaScript 权威指南】中的一部分内容。


WSXX开发文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html


写在文章的最后


既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
相关文章
相关标签/搜索