【微信小程序】开发实战 之 「视图层」WXML & WXSS 全解析

在《微信小程序开发实战 之 「配置项」与「逻辑层」》中我们详细阐述了小程序开发的程序和页面各配置项与逻辑层的基础知识。下面我们继续解析小程序开发框架中的「视图层」部分。学习完这两篇文章的基础知识,动手开发一个简单的小程序应用已经不成问题了。

视图层

框架中视图层以给定的样式展现数据并反馈事件给逻辑层。

视图层由WXML(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件来进行展示,组件是视图层的基本组成单元

微信小程序提供了视图窗口、基础内容、表单组件、导航、媒体、地图、画布、开放能力等十余类数十个组件。关于组件的种类和用法,我们可以参考小程序开发者文档中的组件部分。后续我们一起在一些开发实例中对组件用法进行解析。欢迎关注。

于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合。

.wxml文件用于组织页面的结构;

.wxss文件用于编写页面的样式;

WXML详解

WXML是MINA框架设计的一套类似于HTML的标签语言,与基础组件、事件系统一起构建页面的结构,保存在.wxml文件中。

WXML目前具有数据绑定、列表渲染、条件渲染、模板、引用及事件绑定的能力。下面我们通过一些简单的例子具体学习感受一下WXML的这些能力。

数据绑定

在.wxml文件中动态显示的数据均来自对应页面的.js文件中的Page方法的data对象。数据绑定使用Mustache(中文翻译作“胡子”)语法(即“双大括号{{}}”)将变量包括起来。

数据绑定有多种用法,可以简单的用于表现数据,也可以用在组件属性、控制属性中,还可以进行运算、组合构成新的数据。

表现数据

直接用来呈现动态数据:

<!--wxml--> <view> {{content}} </view> //page.js Page({ data:{ content: 'Hello MINA !' } })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzxyf.html