微信小程序 | 小程序WXSS-WXML-WXS

🖥️ 微信小程序 专栏：小程序WXSS-WXML-WXS
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、WXSS编写程序样式

小程序的样式写法

WXSS支持的选择器

WXSS优先级与CSS类似，权重如图

wxss的拓展 - 尺寸单位

二、Mustache语法绑定

Mustache语法

三、WXML的条件渲染

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

hidden属性

四、WXML的列表渲染

列表渲染 - wx:for 基础

block标签

列表渲染 - item / index 名称

列表渲染 - key作用

五、WXS语法基本使用

什么是WXS?

WXS的写法

---

一、WXSS编写程序样式

小程序的样式写法

• 页面样式的三种写法:

• 行内样式、页面样式、全局样式

• 三种样式都可以作用于页面的组件

• 如果有相同的样式 那么优先级如下:

• 行内样式 > 页面样式 > 全局样式

JavaScript // 代码展示 <!-- 1.应用全局样式 --> <view class="title">learn wxss title</view> <!-- 2.页面样式 --> <view class="message">learn wxss message 页面样式</view> <!-- 3.行内样式 --> <view style="color: purple; font-size: 25px;">inline style 行内样式</view>

WXSS支持的选择器

目前支持的选择器:

 

WXSS优先级与CSS类似，权重如图

跟Css一样(依然有权重)

wxss的拓展 - 尺寸单位

跟Css中最大的区别!

• 尺寸单位

• rpx(responsive pixel):可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx

• 如在Iphone6上,屏幕宽为375px 共有750物理像素,则750rpx=375px=750物理像素

• 1rpx = 0.5px = 1物理像素

注:开发微信小程序时设计师可以用Iphone6作为视觉稿的标准

二、Mustache语法绑定