微信小程序之WXMl的学习

客官°小女子只卖身不卖艺 2022-05-12 10:36 320阅读 0赞

WXML的学习包括：  
WXML语法，WXML数据绑定，属性，WXML列表渲染，条件渲染，WXML模板及引用，响应式像素，样式，选择器  
**WXML 语法：**  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
我们需要注意wxml的标签必须是完全闭合的，大小写敏感  
WXML语言特性：  
![这里写图片描述][70 2]

**数据绑定：**  
![这里写图片描述][70 3]  
wxml中的动态数据都是来自页面js的Page的data对象，数据绑定是用一个Mustache语法，就是变量名加双括号的语法  
也可以绑定属性  
![这里写图片描述][70 4]  
需要注意的是所有的组件和属性要为小写  
运算符绑定：

![这里写图片描述][70 5]  
类似的绑定还包括：字符串运算绑定，组合式绑定和扩展运算符绑定等等

**属性：**  
![这里写图片描述][70 6]

**列表渲染：**  
![在这里插入图片描述][70 7]

**条件渲染：**  
![在这里插入图片描述][70 8]  
hidden也可以控制元素的显示和隐藏，那么两者有什么区别呢  
if在切换时框架会有个局部渲染的过程，确保条件块在渲染可以销毁便于进行进行渲染，hidden组件始终都会渲染。只是通过hidden属性，我们可以控制元素在视图上的显示和隐藏。所以说wx-if 有更高的切换消耗，而hidden有更高的初始化消耗，如果频繁切换显示的话是hidden更好

**模板引用**  
![在这里插入图片描述][70 9]  
模板标签template  
在template中定义了一个代码片段，那么属性代表了template的名称，在外面通过一个is属性声明我们想要的是哪个模板，这里的is也可以动态的进行数据绑定，data属性，向模板传递数据信息  
需要注意的是模板拥有自己的作用域，只能通过data属性去传入。  
除了模板引用，微信还提供了文件引用  
![在这里插入图片描述][70 10]  
import：  
![在这里插入图片描述][70 11]  
所引用的模板文件，它的模板只能去渲染它对应的模板的内容  
import作用域的概念：  
只能引用目标文件所定义的的template模板，如果说目标文件嵌套了其他的文件的template模板，是不会被引用到的，避免了引用模板死循环的问题  
![在这里插入图片描述][70 12]  
和import不同的是，include是把目标文件内除了template代码块之外的所有代码引进来  
![在这里插入图片描述][70 13]  
以上就是import和include的区别

**响应式像素**  
![在这里插入图片描述][70 14]  
wxss和css的样式定义很像，但对css做了一些补成  
![在这里插入图片描述][70 15]  
![在这里插入图片描述][70 16]  
设备像素：设备显示的最小物理单位，这些物理单位是显示屏上一个个点，这些点是固定不变的。  
CSS像素：是外部编程概念，是css样式代码中所使用的逻辑像素。  
PPI: 每英寸所拥有的像素数，数值越高，说明我们的显示屏越能以更高的密度去显示图像。公式：  
![在这里插入图片描述][70 17]  
DPR：指的是手机某一方向上设备像素和css像素之比  
在做APP移动端开发，会使用rem,rem是根据HTML的根元素的font-size大小来适配的，但是wxss不能直接去操作HTML的样式属性，所以rem的适配方案就失效了。所以微信团队基于此推出了rpx,它规定了屏幕宽度为750个rpx，我们可以根据屏幕宽度进行自适应。其实rpx实现原理和rem原理是一样的，而且rpx最终也是转换成了rem。

**样式**  
外联样式的引入：@import  
![在这里插入图片描述][70 18]  
如果样式index.wxss样式和外联样式有冲突，会采用index.wxss中的样式  
内联样式：  
![在这里插入图片描述][70 19]  
内联样式可以绑定样式  
所以一般来说，把静态样式写入class属性中，动态样式写入内联中绑定数据

**选择器：**  
wxss支持的选择器：  
![在这里插入图片描述][70 20]  
优先级：  
![在这里插入图片描述][70 21]  
慎用important，修改插件样式是可能会用到

WXML的学习就到这里了，从这里我们可以看到和HTML，CSS，前端的思想是一致的，在数据绑定这一模块和Vue是非常相似的。

[70]: /images/20220512/dd607852e25c42eda1b707a9e2099545.png
[70 1]: /images/20220512/e1314c84e46947c5b626bdbaa214a407.png
[70 2]: /images/20220512/8cbbb24315244518a3971028e4a76fcc.png
[70 3]: /images/20220512/3a834d829c9440afbf38c88814b5751f.png
[70 4]: /images/20220512/29ab915ca1c7440e9930e2e5c52af33a.png
[70 5]: /images/20220512/5ff4e199528b40b4921c99cecaedf857.png
[70 6]: /images/20220512/370d2d32fd3146e0a71ab861aa1a4a8f.png
[70 7]: /images/20220512/4b45faa6bbdf4c0aa290e7ac9356e21f.png
[70 8]: /images/20220512/66ee202c5478473da0c5d3067b662e48.png
[70 9]: /images/20220512/09e009376ffa4ce49f4f6c2455602202.png
[70 10]: /images/20220512/02ad2cc544f94dc09cb4d698af719793.png
[70 11]: /images/20220512/0af00911aa454bd5a9cc065da6de0321.png
[70 12]: /images/20220512/6deb98f3fd324ce6b9d506cddf7bb81c.png
[70 13]: /images/20220512/abfa55b370b44ab08bab345ef0eb2257.png
[70 14]: /images/20220512/0281fc2b270440e9a1a8a61b0310c81e.png
[70 15]: /images/20220512/f9ca8922d64744c7a4a9aaa1e7079a0d.png
[70 16]: /images/20220512/ba66b4beffbe4430899edfdde0439e36.png
[70 17]: /images/20220512/3da2658ba38c43f182543656c1bbfcaa.png
[70 18]: /images/20220512/0301864b17b24a3482ebc968ecd50902.png
[70 19]: /images/20220512/00b8b6bbb4e745b4bebb8ff05018040a.png
[70 20]: /images/20220512/c136eaca4ba946439de680873a3766d3.png
[70 21]: /images/20220512/8a0222d723fc42128ab417fe7c8b7224.png