微信小程序 教程之WXML
2016-10-18 00:00
731 查看
系列文章:
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML
WXML
WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力:
数据绑定
列表渲染
条件渲染
模板
事件
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之模块化
微信小程序 触控事件详细介绍
微信小程序 地图定位简单实例
微信小程序 wx.request(OBJECT)发起请求详解
微信小程序 教程之引用
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML
WXML
WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力:
数据绑定
<!--wxml--> <text> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } })
列表渲染
<!--wxml--> <view wx:for-items="{{array}}"> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
条件渲染
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view> // page.js Page({ data: { view: 'MINA' } })
模板
<!--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.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
事件
<view bindtap="add"> {{count}} </view> Page({ data: { count: 1 }, add: function(e) { this.setData({ data: this.data.count + 1 }) } })
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
微信小程序 教程之事件微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之模块化
微信小程序 触控事件详细介绍
微信小程序 地图定位简单实例
微信小程序 wx.request(OBJECT)发起请求详解
微信小程序 教程之引用
相关文章推荐
- 微信小程序 教程之WXML
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
- 详解微信小程序开发教程
- 全球首个实战类微信小程序开发教程
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
- 微信应用号来了,微信小程序开发教程!
- 微信小程序开发教程文档(包括搭建环境)
- 微信小程序入门教程及实例
- 微信小程序(微信应用号)开发工具0.9版安装详细教程
- 微信小程序开发教程之组件开发以及wxss介绍
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
- 首个微信小程序开发教程!
- 微信小程序简单教程
- 首个微信小程序开发教程!
- 微信小程序开发教程(破解版IDE 无内测资格也可使用)
- 首个微信小程序开发教程!
- 开发微信小程序入门教程,含破解工具
- 微信小程序开发教程,大多数人都搞错的八个问题