013 ∞ WXML简介 |【WX的HMTL】
本帖最后由 不二如是 于 2018-5-17 09:28 编辑http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png
上一讲我么搞定了文件作用域和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:
}
编译：
数组顺利输出，在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: ,
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: ,
// 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.继承渲染
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 答案 学习学习 0 abcd
页:
[1]