7. 关于微信小程序wxml、wxss

1. wxml页面结构语言

  .wxml文件可以看做是微信小程序页面的结构化语言,也就是用于页面展示骨架的结构语言,它类似于前端开中PC端的HTML文件。

  在.wxml文件中,我们可以进行数据绑定 --- {{绑定的数据名}},条件判断 --- wx:if、循环遍历 --- wx:for等等,它和vue是极其的相像,但又存在自我的独特性,比如说封装性。微信小程序为我们准备了很多高度封装的标签,使我们在日常开发的过程中直接使用标签即可完成相关对应的功能模块。

  对于.wxml文件中的各个模块,我们也可以对其进行单独的封装,从而实现代码的高度复用性。这里我就不对组件的定义和调用做详细的说明了,在之前的博客中也详细讲解到了。

2. wxss样式文件

  和PC端的css文件功能一致,用于描述美化.wxml文件中的结构。当然对于样式文件,这里需要着重的讲解一下几点:

  1. 尺寸(rpx)

    前端开发过程中,无可避免的问题之一就是响应式,让元素在不同的尺寸下呈现出不同的样式大小。微信小程序同样如此。

    对于微信小程序的尺寸单位是rpx,不同的手机设备px和rpx之间的换算比例是不同的,在日常开发的过程中,我们一般以iPhone6位标准进行页面布局设计。

    

  2. 选择器

    

  3. 官方样式库

    WeUI是一套与微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

  下载地址:https://github.com/Tencent/weui-wxss

猜你喜欢

转载自www.cnblogs.com/qfshini/p/12124393.html