鱼C论坛

 找回密码
 立即注册
查看: 3433|回复: 4

[庖丁解牛] 013 ∞ WXML简介 |【WX的HMTL】

[复制链接]
发表于 2018-5-17 09:28:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-5-17 09:28 编辑


                               
登录/注册后可看大图


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

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

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

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

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

先清空index.wxml中默认的代码,然后添加代码:
  1. <view> {{message}} </view>
复制代码


Snip20180517_5.png

然后在index.js中添加:
  1. data: {
  2.     message: 'FishC!'
  3.   }
复制代码


点击编译:
Snip20180517_6.png


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

下面再来一个列表渲染 ,在index.wxml添加代码:
  1. <view wx:for="{{array}}"> {{item}} </view>
复制代码


在index.js的data中添加:
  1. data: {
  2.     message: 'FishC!',
  3.     array: [1, 2, 3, 4, 5,6]
  4.   }
复制代码


编译:
Snip20180517_7.png


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

再来看条件渲染,index.wxml:
  1. <view wx:if="{{view == 'a'}}"> 我最棒~ </view>
  2. <view wx:elif="{{view == 'b'}}"> 鱼C爱我 </view>
  3. <view wx:else="{{view == 'c'}}"> 我爱鱼C </view>
复制代码


index.js中添加:
  1. data: {
  2.     message: 'FishC!',
  3.     array: [1, 2, 3, 4, 5,6],
  4.     view: 'b'
  5.   }
复制代码


编译:
Snip20180517_8.png


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

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

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

还可以添加模版,在index.wxml中添加:
  1. <!-- <view> {{message}} </view>
  2. <view wx:for="{{array}}"> {{item}} </view>
  3. <view wx:if="{{view == 'a'}}"> 我最棒~ </view>
  4. <view wx:elif="{{view == 'b'}}"> 鱼C爱我 </view>
  5. <view wx:else="{{view == 'c'}}"> 我爱鱼C </view> -->
  6. <template name="yuyou">
  7.   <view>
  8.     name: {{name}}, class: {{class}}
  9.   </view>
  10. </template>
  11. <template is="yuyou" data="{{...yuyouA}}"></template>
  12. <template is="yuyou" data="{{...yuyouB}}"></template>
  13. <template is="yuyou" data="{{...yuyouC}}"></template>
复制代码


觉得index.js中onload事件麻烦,可以删掉,并添加代码:
  1. const app = getApp()
  2. Page({
  3.   data: {
  4.     // message: 'FishC!',
  5.     // array: [1, 2, 3, 4, 5,6],
  6.     // view: 'b'
  7.     yuyouA: { name: '小可爱', class: '零习Web开发' },
  8.     yuyouB: { name: '小粉红', class: '零习Python' },
  9.     yuyouC: { name: '小淘气', class: '零习PHP' }
  10.   }
  11. })
复制代码


编译:
Snip20180517_10.png


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

先注释掉上面的代码,在index.wxml添加:
  1. <view bindtap="add"> {{count}} </view>
复制代码


在index.js:
  1. const app = getApp()

  2. Page({
  3.   data: {
  4.     count: 1
  5.   },
  6.   add: function (e) {
  7.     this.setData({
  8.       count: this.data.count + 1
  9.     })
  10.   }
  11. })
复制代码


编译:
May-17-2018 09-26-23.gif


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

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




课后作业


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



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-16 16:06:40 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-23 11:00:30 | 显示全部楼层
学习学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-3 10:03:44 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-4-3 22:03:59 | 显示全部楼层
abcd
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表