微信小程序云开发教程-WXML入门-基本语法
同学们大家好，我是小伊同学，今天我们开始进入WXML部分的学习，首先我们来讲解一下基本语法。
什么是Wxml呢？我们首先要介绍一下Html，Html的全称为HyperTextMarkup Language，翻译过来就是超文本标记语言，这种语言目前已经普遍用于前端开发，而wxml正是从html演变而来，它基于微信这个平台，在很多方面变得更加简洁易用，更加适合微信小程序的开发。Wxml依然是标签语言，在小程序中，它可以结合基础组件、事件系统，可以构建出页面的结构。
如果想学习了解更多html的知识，可以百度“菜鸟教程”进行自学。本教程将以wxml为内容进行讲解，对于学习过html语言的同学通过微信开发者文档自学入门wxml也非常容易。关于wxml和html的区别，由于篇幅限制，也请访问微信开发者文档进行自学。
作为一种标签语言，wxml同样通过使用标记标签来描述页面结构，页面内容写在标签内部，标签由尖括号包围的关键词构成，具体来说，可以分为两类。
第一种是成对出现的标签，即有开始标签和结束标签，内容部分写在两个标签之间，基本结构为：<关键词>或</关键词>例如小程序中最常用的view组件的写法就是这样。
第二种是不成对出现的，使用时只有一个标签存在，基本结构为：<关键词/>，这种标签因为表示的含义使得他们不需要结束标签进行标识，例如我们常见的输入框，只需要一个标签就可以确定这个组件了，程序在编译过程中见到这个标签就会在对应位置添加输入框，而view作为视图容器，内部能够放置其他组件，就需要有开头和结尾进行标识。
在上面这张图片的例子中，代码第一行是注释，注释的格式是尖括号加感叹号加两个连字符开头，中间为注释内容，结尾为两个连字符加尖括号，在编译器中，我们使用ctrl加右斜杠/就可以实现对光标所在行或者所选代码的注释。
第二行为view，可以看到标签是成对出现的，这里的view实际上就是一个箱子，它能够作为一个或多个元素的容器使用。为了使大家在左侧模拟器中能够看到效果，我给view设定了长度和高度以及颜色三种样式。第三行和第四行，我写了两个输入组件，使用该input组件就可以在页面上完成左图所示的输入功能。那么对于input来说，其也可以成对标签的样子，两种写法都是可以的，但是大家一定要注意右斜杠的位置，避免出错。
那么，什么是组件呢？
组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。即：一个以wxml语法书写的整体。
组件的基本格式其实就是我们刚才讲到的标签语法结构。例如视图容器组件和输入框组件。
每一种组件都有一种“独特”的功能，编写wxml的第一步就是选择合适的组件。
WXML中的另一个重要概念就是属性，即刚刚提到的可以用来修饰组件的东西。属性实际上就是对不同组件设置参数用的，其基本的格式就是在第一个尖括号中，在指定了组件名称后，使用属性名称等于属性值的格式对组件的属性进行设置，其中属性值要使用单引号或双引号包裹起来，单引号和双引号都是成对出现，一些情况下，我们也需要同时使用，以区分一些字段的关系，防止歧义。
在上面这个例子中，我们使用了view组件，即视图容器。同时对这个组件设置了class、style、id、bindtap、hidden以及data-属性。Wxml组件的属性分为：通用属性和专用属性两类，通用属性是所有组件都能使用的属性，常用的通用属性包括：样式（包括静态样式class和动态的style）、id、响应函数、参数传递等。专用属性是针对特定组件使用的。想要更加细节地了解本部分内容可以访问开发文档自学。
日拱一卒，功不唐捐。涓流所积，终成沧海。
想看视频版？
关注公号“微程序学堂”，我们的视频教程即将上线
如果你自己写了好文章想投稿
请联系我们
微信小程序云开发教程-WXML入门-基本语法相关推荐
- 前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定
同学们大家好,我是小伊同学,今天带领大家学习WXML部分一个重要的知识点,数据绑定. 简单来讲,数据绑定就是通过双重花括号将一个变量绑定到界面上. 首先,我们为什么要将变量绑定到页面上呢?因为在制作一 ...
- ❤️微信小程序 云开发 教程合集（视频+图文）免费❤️
一.视频版 微信小程序云开发视频教程上线啦 二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
- 微信小程序云开发教程-微信小程序框架的介绍
同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...
- 微信小程序云函数传递数组_微信小程序云开发一周入门
作为一个程序员,一直想自己做一款程序,无奈工作以来一直做的是数据处理的工作.数据库用的挺溜,但前端就两眼一抹黑了.早在微信小程序刚出来的时候,就关注过,但考虑到前端后端的种种因素,一直没太做深入的了解 ...
- uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
- 微信小程序云开发教程-小程序端调用云函数
同学们大家好,我是小伊同学,前面我们已经做好了小程序的页面,在开发好了后端的接口之后,我们就需要对前后端进行联通,而在云开发下,这部分内容就是我们今天将要一起学习的--小程序端如何调用云函数. 在微信 ...
- 页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
- 微信小程序云开发教程-手把手：获取微信订阅消息的模板ID
本小节,我们将手把手带领大家一起实现第一个接口,获取微信订阅消息的模板ID 通过开发这个接口,我们将学会云函数的基本结构和函数返回值的格式定义. 开发接口前,我们必须先写接口文档.小程序后端的接口文档 ...
- 微信小程序注册开发教程（入门）
转眼到了17年,火了那么久的小程序的小程序终于在1月9号开放了,本着凑热闹的心态,打算感受一把.下面是一些大体的流程什么的,简单记录一下,可能不是很全了,想起来再添吧. 1.打开微信公众平台 ,选择立 ...
- 微信小程序云开发教程-互联网软件产品开发流程和团队分工
假设我们现在要开发的软件产品是"近义词查询"小程序. 首先我们得通过调研,明确用户需求,形成需求文档: 产品经理根据需求文档,进一步制作出产品原型,产品原型也可以称之为产品demo ...
最新文章
- [笔记]使用shell命令(awk,sed,grep)处理几个特征字符串之间的文本
- CodeForces 757B Bash's Big Day（线性筛）
- Linux中的软硬连接
- gliffy-confluence-plugin-9.1.2安装
- html通过拼音首字母定位,input+div 实现输入拼音首字母或汉字自动检索上拉列表...
- 计算机网络故障排查,计算机网络故障诊断和排除方法
- Panel控件的使用
- Linux终端默认配色方案
- 用最简单的方法解决:linux系统重启网络delaying initialization错误
- python 修图_拿到一张图怎么后期才能更好一点啊？告诉你具体的修图思路
- 索迪斯携手喜茶致敬白衣天使、慰问抗疫英雄
- Unity｜一键复制log日志｜小技巧
- 盖茨自说不善招聘、管理：善于“借力”
- CTO也糊涂的常用术语：功能模块、业务架构、用户需求、文档
- MicroBlaze系列教程（1）：AXI_GPIO的使用
- 手机版本考试系统载图
- 基于Proteus学习单片机系列（六）——I2C总线AT24C04
- TM商标如何定义 TM商标与R标有何区别？
- 非库安装问题而报错Expected Ptr＜cv::UMat＞ for argument ‘src‘
- CSS3_渐变、过渡和动画