013 ∞ WXML简介 |【WX的HMTL】

不二如是

                               
登录/注册后可看大图

上一讲我么搞定了文件作用域和API简介，这次难度降下来，看WXML。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

说白了就是用在微信小程序开发中的HTML，所以正在学习《零基础入门学习Web开发》（HTML5 & CSS3）的鱼油可以同步学习～

如果精力充沛者，还可以学习HTML5+CSS3 - 庖丁解牛，这个系列已经更新完毕～

用以下一些简单的例子来看看 WXML 具有什么能力，新建一个小程序项目。

先清空index.wxml中默认的代码，然后添加代码：

<view> {{message}} </view>

然后在index.js中添加：

data: {
    message: 'FishC!'
  }

点击编译：

顺利完成第一次数据绑定，是不是和HTML一样简单好用呢

下面再来一个列表渲染 ，在index.wxml添加代码：

<view wx:for="{{array}}"> {{item}} </view>

在index.js的data中添加：

data: {
    message: 'FishC!',
    array: [1, 2, 3, 4, 5,6]
  }

编译：

数组顺利输出，在view中的wx:for="{{array}}"，专门用来输出数组的。

再来看条件渲染，index.wxml：

<view wx:if="{{view == 'a'}}"> 我最棒～ </view>
<view wx:elif="{{view == 'b'}}"> 鱼C爱我 </view>
<view wx:else="{{view == 'c'}}"> 我爱鱼C </view>

index.js中添加：

data: {
    message: 'FishC!',
    array: [1, 2, 3, 4, 5,6],
    view: 'b'
  }

编译：

标签中可以添加判断，如果view为a，输出“我最棒”；b，输出“鱼C爱我”；c，输出“我爱鱼C”。

因为最终view为b，所以输出“鱼C爱我”。

为了后续演示，先注释掉之前的代码。

还可以添加模版，在index.wxml中添加：

<!-- <view> {{message}} </view>
<view wx:for="{{array}}"> {{item}} </view>
<view wx:if="{{view == 'a'}}"> 我最棒～ </view>
<view wx:elif="{{view == 'b'}}"> 鱼C爱我 </view>
<view wx:else="{{view == 'c'}}"> 我爱鱼C </view> -->
<template name="yuyou">
  <view>
    name: {{name}}, class: {{class}}
  </view>
</template>
<template is="yuyou" data="{{...yuyouA}}"></template>
<template is="yuyou" data="{{...yuyouB}}"></template>
<template is="yuyou" data="{{...yuyouC}}"></template>

觉得index.js中onload事件麻烦，可以删掉，并添加代码：

const app = getApp()
Page({
  data: {
    // message: 'FishC!',
    // array: [1, 2, 3, 4, 5,6],
    // view: 'b'
    yuyouA: { name: '小可爱', class: '零习Web开发' },
    yuyouB: { name: '小粉红', class: '零习Python' },
    yuyouC: { name: '小淘气', class: '零习PHP' }
  }
})

编译：

最后还有一种玩法就是事件渲染。

先注释掉上面的代码，在index.wxml添加：

<view bindtap="add"> {{count}} </view>

在index.js：

const app = getApp()

Page({
  data: {
    count: 1
  },
  add: function (e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

编译：

鼠标单击，count数据自动+1。

本次先做了解，后面我们再来依次拆分每个渲染事件怎么玩～

---

课后作业


1、以下属于WXML能力的是？
a.列表渲染  b.数据绑定  c.条件渲染  d.继承渲染



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

yangxiaoyan

答案

oujq2541

学习学习

一笙彤

0

ShmilyLee

abcd