0
点赞
收藏
分享

微信扫一扫

小程序入门教程


13. WXML特性之数据绑定

数据绑定
Page对象的data属性

<!--index.wxml-->
<view>
<text>{{message}}</text>
</view>

//index.js
Page({
data: {
message : "hello, word"
},
})

小程序入门教程_数据绑定


flag=false,不隐藏

<!--index.wxml-->
<view hidden='{{flag ? true : false}}'>
hidden
</view>

//index.js
Page({
data: {
flag: false
},
})

小程序入门教程_xml_02


公共属性为

小程序入门教程_xml_03

14. WXML特性之列表渲染

<!--index.wxml-->
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>

//index.js
Page({
data: {
items: [
{ name: "商品A"},
{ name: "商品B" },
{ name: "商品C" },
{ name: "商品D" }
]
}
})

小程序入门教程_数据绑定_04

15. WXML特性之条件渲染

<!--index.wxml-->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">
饺子
</view>
<view wx:elif="{{condition === 2}}">
米饭
</view>
<view wx:else>
面食
</view>

//index.js
Page({
data: {
// 生成一个1到3的随机整数
// Math.random()生成[0,1)的浮点随机数
// Math.floor()下取整
condition: Math.floor(Math.random() * 3 + 1)
}
})

小程序入门教程_数据绑定_05

16. WXML特性之模板及引用

<!--index.wxml-->
<template name="tempItem">
<view>
<view>收件人: {{name}}</view>
<view>联系方式: {{phone}}</view>
<view>地址: {{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>

//index.js
Page({
data: {
item: {
name: "张三",
phone: "15515561556",
address: "中国"
}
}
})



文件引用

import 引入目标文件中模板代码块的内容

<!--index.wxml-->
<import src="a.wxml"></import>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
Hello,wixin
</template>

小程序入门教程_代码块_06

import有作用域的概念,避免死循环,只会引入模板中的内容,不会引入模块中的模板内容

include 引入目标文件中除了模块代码块的所有内容

<!--index.wxml-->
<include src="a.wxml"></include>
<template is="a"></template>

<!--a.wxml-->
<view>Hello, word</view>
<template name="a">
Hello,wixin
</template>

小程序入门教程_代码块_07

19. WXSS特性之选择器

小程序入门教程_代码块_08


选择器的优先级

小程序入门教程_xml_09

27. 生命周期

小程序入门教程_数据绑定_10


小程序入门教程_数据绑定_11

29. 小程序事件流

小程序入门教程_xml_12


小程序入门教程_数据绑定_13

<!--index.wxml-->
<view class='container-A' bindtap='clickA'>
container-A
<view class='container-B' bindtap='clickB'>
container-B
<view class='container-C' bindtap='clickC'>
container-C
</view>
</view>
</view>

//index.js
Page({
clickA() {
console.log('click container-A')
},
clickB() {
console.log('click container-B')
},
clickC() {
console.log('click container-C')
}
})

微信小程序基础内容组件之icon

参考博客

[1]


举报

相关推荐

0 条评论