小程序的视图层 xxx.wxml
- 数据绑定
- 列表渲染
- 条件渲染
- 绑定事件
数据绑定
- 语法： {{ }}
//视图层 例如：index.wxml <view>{{ message }}</view> //逻辑层 例如：index.js Page({ data:{ message: 'Hello MINA!' } })
列表渲染
- 语法：wx:for
//逻辑层 xxx.js Page({ data:{ array:[{ // array数组，包含了两个对象 messqge:'foo', },{ message:'bar' }] } }) //视图层 xxx.wxml <view wx:for="{{array}}"> // for循环array数组 //注意，与变量展示相比，需要加两个冒号 {{index}}: {{item.message}} // index是数组序号，item是数组里的对象 </view>
条件渲染
- 语法： wx:if 、wx:elif、wx:else
<view wx:if=“{{length > 5}}”> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
绑定事件
| 页面事件 | 触发时机 |
| tap | 手指触摸后马上离开 |
| longpress | 手指触摸后，超过350ms再离开（推荐使用） |
| longtap | 手指触摸后，超过350ms再离开 |
| touchstart | 手指触摸动作开始 |
| touchend | 手指触摸动作结束 |
- 事件绑定的写法以key、value的形式
- key以bind或catch开头，然后跟上事件的类型
// 视图层 xxx.wxml <view id="tapTest" data-hi="WeChat" bindtap='tapName'> Click me! </view> // 逻辑层 xxx.js Page({ tapName: function(event) { console.log(event) } })
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/app/6197.html