查看更多资讯中心

微信小程序的 WXML2018-12-18 17:51 厦门蓝典网络科技有限公司

内容摘要:WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 打开开发工具的编辑器,在根目录下找到 app.json 文件,...

 

WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,本次的学习通过修改这个文件来完成。
 

WXML 文件后缀名是 .wxml ,打开 pages/wxml/index.wxml 文件,有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式,简单的 WXML语句在语法上同 HTML 非常相似。

<!--pages/wxml/index.wxml-->

<text>pages/wxml/index.wxml</text>

​不带有任何逻辑功能的 WXML 基本语法如下:

<!-- 在此处写注释 -->

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

​一个完整的 WXML语句由一段开始标签和一段结束标签组成,在标签中可以是内容,也可以是其他的 WXML 语句,这一点上同 HTML 是一致的。有所不同的是,WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。

代码清单2-2 编译错误

<text>hello world


<!--
text 没有闭合,导致编译错误:
VM148:2 ./pages/wxml/index.wxml
 end tag missing, near text
> 1 | <text>hello world
    | ^
-->

​标签可以拥有属性,属性提供了有关的 WXML元素更多信息。属性总是定义在开始标签中,除了一些特殊的属性外,其余属性的格式都是key="value" 的方式成对出现。需要注意的是,WXML中的属性是大小写敏感的,也就是说 class 和 Class 在WXML中是不同的属性,代码2-3是一个文本标签的示例。

代码清单2-3 WXML 标签

<!--一个简单的文本标签 -->
<text>hello world</text>

<!-- view 中包含了 text 标签 -->
<view>
  <text>hello world</text>
</view>

代码2-4是一个带属性的图片标签的例子。

代码清单2-4 带有属性的图片标签

<image class="userinfo-avatar" src="./image/a.png" ></image>


要做网站?680全包

要做小程序?680全包

咨询客服

蓝典客服热线 热线:05925325273 电话:13950058311 微信:13950058311 扫描二维码
添加客服微信

扫码关注

公众号:蓝典网络 (landianwl) 扫描二维码
关注蓝典公众号