小程序的样式写法

小程序的样式写法

小程序的页面样式有三种写法：行内样式、页面样式、全局样式，三种样式都可以作用于页面的组件。如果有相同的样式，它们是有优先级的。优先级依次是：行内样式 > 页面样式 > 全局样式。

尺寸单位

rpx可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

Mustache语法

WXML基本格式类似于HTML代码，比如可以写成单标签，也可以写成双标签；必须有严格的闭合：没有闭合会导致编译错误；大小写敏感：class和Class是不同的属性。开发中, 界面上展示的数据并不是写死的, 而是会根据服务器返回的数据，或者用户的操作来进行改变。如果使用原生JS或者jQuery的话, 我们需要通过操作DOM来进行界面的更新。小程序和Vue一样, 提供了插值语法: Mustache语法(双大括号)。

逻辑判断 wx:if – wx:elif – wx:else

某些时候, 我们需要根据条件来决定一些内容是否渲染：当条件为true时, view组件会渲染出来；当条件为false时, view组件不会渲染出来。

hidden属性

hidden是所有的组件都默认拥有的属性：hidden是所有的组件都默认拥有的属性：当hidden属性为true时, 组件会被隐藏；当hidden属性为false时, 组件会显示出来；

hidden和wx:if的区别在于hidden控制隐藏和显示是控制是否添加hidden属性，而wx:if是控制组件是否渲染的。

列表渲染 – wx:for

我们知道，在实际开发中，服务器经常返回各种列表数据，我们不可能一一从列表中取出数据进行展示，需要通过for循环的方式，遍历所有的数据，一次性进行展示。在组件中，我们可以使用wx:for来遍历一个数组 （字符串 - 数字）。默认情况下，遍历后在wxml中可以使用一个变量index，保存的是当前遍历数据的下标值。数组中对应某项的数据，使用变量名item获取。