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]