微信小程序> 微信小程序视图层学习笔记(1)

微信小程序视图层学习笔记(1)

浏览量:3092 时间: 来源:AVENGER辉

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

用以下一些简单的例子来看看 WXML 具有什么能力:
1.数据绑定(WXML 中的动态数据均来自对应 Page 的 data。)

<!--wxml--><view> {{message}} </view>// page.jsPage({  data: {    message: 'Hello MINA!'  }})

这里介绍一下JS和JSON的区别,json是(javascript object notation)是一种轻量级的数据交换格式,json格式的数据,主要是为了跨平台交流数据用的。它是从JavaScript对象中演变过来的,是js的一个子集。json只有字符串形式,key-value形式。json和xml文件是如出一辙的,只不过比xml文件轻便。

算数运算

<view> {{a + b}} + {{c}} + d </view>Page({  data: {    a: 1,    b: 2,    c: 3  }})

view中的内容为 3 + 3 + d。

字符串运算

<view>{{"hello" + name}}</view>Page({  data:{    name: 'MINA'  }})

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({  data: {    zero: 0  }})

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>Page({  data: {    a: 1,    b: 2  }})

最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 … 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>Page({  data: {    obj1: {      a: 1,      b: 2    },    obj2: {      c: 3,      d: 4    }  }})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
2.列表渲染

<!--wxml--><view wx:for="{{array}}"> {{item}} </view>// page.jsPage({  data: {    array: [1, 2, 3, 4, 5]  }})

for循环遍历12345,以列表形式输出
3.条件渲染

<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA </view>// page.jsPage({  data: {    view: 'MINA'  }})

4.模板

<!--wxml--><template name="staffName">  <view>    FirstName: {{firstName}}, LastName: {{lastName}}  </view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>// page.jsPage({  data: {    staffA: {firstName: 'Hulk', lastName: 'Hu'},    staffB: {firstName: 'Shang', lastName: 'You'},    staffC: {firstName: 'Gideon', lastName: 'Lin'}  }})

运行结果如下:
在wxml中,标签中的内容是要显示的,js中的内容作为提供变量的,提高代码的灵活性。
小程序

5.事件

<view bindtap="add"> {{count}} </view>Page({  data: {    count: 1  },  add: function(e) {    this.setData({      count: this.data.count + 1    })  }})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎