手把手带你入门微信小程序开发（二）

WXML语法介绍（一）

• 一、WXML脚本语言 - （1）特点 & 变量渲染 - 1.1 WXML-变量渲染 - 渲染方式 - 1、普通方式渲染 & 对象渲染 - 2、通过数组进行渲染 - 1.2 WXML-if 条件判断 - 1.3 WXML- for 循环条件 - 简单循环 - 通过js渲染 - 还可以自己定义访问的下标与值？ - 小项目，打印九九乘法表
• 二、小彩蛋

一、WXML脚本语言

官方文档—（WXML介绍）

WXML(WeiXin Markup Language)，是一套标签语言，和组件结合一起使用，用来构建页面的结构

语法：<标签名 属性名=“属性名1” 属性名=“属性名2” …> …

（1）特点 & 变量渲染

1、布局和HTML一致 2、标签语言语法为微信独有的一套，就成为了WXML的语言 3、变量渲染就要用到js中传过来的值，必须用双大花括号 {{}}

学过HTML5的同学，相必对标签并不陌生

下面我们定义了 “text” 标签和 “view” 标签 ，以及标签内记载的属性，我们还可以发现class 和 “className” 是以键值配对的

1.1 WXML-变量渲染

特点： 1、WXML特别语法，使用两个大花括号{{ XXX }} 2、标签语法与样式的不一样

渲染方式

【tips：所有数据均在 .js文件中 data:{} }进行存储】

1. 普通渲染
2. 通过对象渲染
3. 通过数组渲染

我们需要先在 JS 编写的内容，要通过WXML来进行渲染

1、普通方式渲染 & 对象渲染

js文件

wxml文件

运行结果:

2、通过数组进行渲染

2、使用数组下标访问数据

在JS文件中用数组 “ ”，在WXML中使用下标来访问即可

编写渲染代码:

在wxml中写下如下代码

<view>{{animals[2]}}view>
<view>{{animals[4]}}view>

完成

1.2 WXML-if 条件判断

wxml 中 if 条件的用法为 wx:if,后面以**字符串** 接收信息，同理 else 是通过wx:else， else if在这里面则是wx:elif

我们接着上面的内容，我们在 course文件下的course.js 文件中加入如下代码

  data: {
    //键 : 值配对信息
    person:{
        "user": "gorit",
        "age":22
    },

然后回到 course.wxml 文件中，加入如下的代码

<view>{{person.user}}view>  //通过person对象来调用user的信息
<view wx:if="{{person.age >= 18}}"> //这里如果要使用 if 条件，必须加上双引号，然后再加上判断条件
  可以进入网吧
view>
<view wx:else>
  不可以进入网吧
view>

根据条件判断，我们很容易知道结果

我们还可以用多重条件判断

 <view>年龄为：{{person.age}}view>  
<view wx:if="{{person.age >18}}">
  你可以进入网吧
view>
<view wx:elif="{{person.age==18}}">
  要带身份证
view>
<view wx:else="{{person.age}}">
  年龄未满18岁不能进入
view>

但是，这样做，是局限性的，如果条件判断需要渲染多个标签的时候，就要用到 block 标签了

这个时候我们在 course.js中加入一个单独的元素

weather:"晴天",//与block 对应

然后回到course.wxml

 <block wx:if ="{{weather == '晴天'}}">
  <view>因为是晴天，难得的好天气</view>
  <view>晴天就要出去玩</view>
</block>

<block wx:elif ="{{weather == '阴天'}}">
  <view>我会选择逛街</view>
</block>

<block wx:else ="{{weather == '下雨天'}}">
  <view>我选择在家</view>
</block> 

1.3 WXML- for 循环条件

简单循环

问题描述，我们前面如果定义了一个列表，我们是可以通过下标来访问的，但是与其一步一步的打印，还不如使用循环一步到位

看了前面的条件判断，相比大家也能猜到循环的用法 wx:for

1. 准备工作 接下来我们创建一个新的文件，名为 forloop，然后新建目录，回到utils中，改app.js的信息

1. 在forloop中添加循环的代码

<view wx:for="{{['a','b','c','d']}}">//使用for循环遍历列表
  {{item}}/{{index}}//第一双括号代表列表的元素，第二个代表下标索引值
view>

1. 运行结果

通过js渲染

上面的只是简单的循环，下面我们借来通过 js 来渲染 列表的元素，我们回到 forloop.js 文件中，然后在data中添加如下数据

然后直接在 forloop.wxml 中添加如下代码

<view wx:for="{{books}}">//这里直接把列表传进去即可
  {{item}}//我们这里只能通过item 来遍历，后面会介绍自定义名字来遍历数组元素
view>

还可以自己定义访问的下标与值？

前面我们发现只能通过 item 和 index 来进行访问元素和其下标，但是当我们需要多个循环时，就得自己另外定义循环的默认参数了（改进后的代码）

<view wx:for="{{books}}" wx:for-item="value" wx:for-index="ix">
  {{value}}//{{ix}}
view>

这样一改，我们既可以通过 value 来访问元素了，通过 ix 来访问下标了

前面还讲过 block 标签 ，可能前面的例子大家不是很清楚，这个例子大家可能会更好理解一点

<block wx:for="{{books}}">
<view>{{item}}view>
<view>{{index}}view>
block>

奇迹发生了，实际上 view 标签也可以这么用，也就是继续嵌套一个view 即可

小项目，打印九九乘法表

<view class='row' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row">
  <view class='col' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col" wx:if="{{col<=row}}">
    {{col}}*{{row}}={{col*row}}
  view>
view>

.row{
  display: flex;
  /*横向的布局*/
  justify-content: flex-start; 
  /* 从左到右边 */

  font-size: 10px;
  /*设置字体大小*/
}
.row.col{
  width:40px;
}

二、小彩蛋

感觉没看够，这里有 8大练习项目等你：微信小程序之项目实战篇

手把手带你学习微信小程序文章整合：手把手带你学习微信小程序系列文章整合