数据绑定

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

列表渲染

<!--wxml-->
<view wx:for="{{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 </view>
// page.js
Page({
data: {
view: 'MINA'
}
})

被渲染成了

模板,可以重复使用,data务必加上...

<!--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({
count: this.data.count + 1
})
}
})

小程序WXML基本使用的更多相关文章

  1. 微信小程序wxml文件中调用自定义函数

    想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...

  2. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  3. 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...

  4. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

  5. 微信小程序wxml页面toFixed保留两位小数,wxs脚本语言

    在wxml页面执行toFixed函数的时候发现失效,在微信小程序的js页面是生效的,但是我不希望在data中保留这些额外的数据,于是找到了下面这种解决方案wxs脚本语言. <wxs module ...

  6. 微信小程序のwxml绑定

    一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...

  7. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  8. 微信小程序wxml無法實現頁面跳轉的問題

    wxml的 navigator的url設置后無法跳轉? 檢查要跳轉的頁面是否是在APP.json的tabBar里註冊過,如果是tabBar頁面是不能用wx.navigateTo和wx.Redirect ...

  9. 微信小程序 wxml中的属性记录

    1. view 标签中的属性 style 中的参数 margin-top:10px;  (向上距离) display : flex;  (display : flex 容器声明) flex-direc ...

  10. 小程序WXML 使用小结

    数据绑定 <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 组件 ...

随机推荐

  1. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  2. socket http read

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...

  3. 让Android模拟器飞一会

    https://software.intel.com/zh-cn/android/articles/speeding-up-the-android-emulator-on-intel-architec ...

  4. New Concept English three (45)

    31w/m 65error In democratic countries any efforts to restrict the freedom of the press are rightly c ...

  5. 【机器学习基石笔记】七、vc Dimension

    vc demension定义: breakPoint - 1 N > vc dimension, 任意的N个,就不能任意划分 N <= vc dimension,存在N个,可以任意划分 只 ...

  6. html的meta总结,html标签中meta属性使用介绍(转)

    html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...

  7. PostgreSQL老司机博客 经常翻翻收获不小

    德歌:https://github.com/digoal/blog/blob/master/README.md 唐成:http://blog.osdba.net/525.html 后面持续更新.../ ...

  8. will-change 提高页面滚动、动画等渲染性能

    一.先来看一个例子 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候,发现,页面的绘制 ...

  9. Comparing Xamarin and Delphi XE5 to Xcode for Cross Platform Mobile App Development

    Comparing Xamarin and Delphi XE5 to Xcode for Cross Platform Mobile App Development If you are consi ...

  10. 关于Sublime Text不能在打开方式中显示并且不能被设置成默认打开方式的问题

    解决方法: 1. Windows 输入 regedit 后 回车 打开注册表 2.找到 "HKEY_CLASSES_ROOT\Applications\sublime_text.exe\sh ...