小技巧
Shift+Alt+ ↓ 复制当前行
demo03.js
js文件中的 data 其实就相当于储存变量,定义一些值,在后期可以通过名称来调用。
// pages/demo03/demo03.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"hello mina",
num:10000,
isGirl:false,
person:{
age:18,
height:158,
weight:90,
name:"某女生"
},
ischecked:false,
list:[{id:0,name:"猪八戒"},{id:1,name:"天蓬元帅"},{id:0,name:"悟能"}]
}
})
demo03.wxml
调用在data中存储的数据的方法就是两个花括号加变量名称
基础控件
<!--text 相当于以前web中的 span标签 行内元素 不会换行-->
<!--view 相当于以前web中的 div标签 块级元素 会换行-->
<!-- checkbox相当于以前的复选框 -->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
元素类型
<!-- 1 字符串 -->
<view >{{msg}}</view>
<!-- 2 数字类型 -->
<view >{{num}}</view>
<!-- 3 布尔类型 -->
<view >是否是女生:{{isGirl}}</view>
<!-- 4 object类型 -->
<view >{{person.age}}</view>
<view >{{person.height}}</view>
<view >{{person.weight}}</view>
<view >{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性
字符串和花括号之间一定不要有空格,否则会导致识别失败,
注意下面两行的区别以及效果区别-->
<view >
<checkbox checked="{{isGirl}}"></checkbox>
<checkbox checked=" {{isGirl}}"></checkbox></view>
运算表达式
<!-- 7 运算 => 表达式
1 可以在花括号中 加入表达式--“语句”
2 表达式指的是一些简单的数字运算、字符串拼接、逻辑运算等
还可以使用三元表达式
3 语句
a) 复杂的代码段 如 循环、switch -->
<view >{{1+1}}</view>
<view >{{"1"+"1"}}</view>
<view>
{{10%2==0?'偶数':'奇数'}}
{{11%2==0?'偶数':'奇数'}}
</view>
循环(列表、对象)
<!-- 8 列表循环
a) wx:for="{{数组或对象}}"
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
b) wx:key="唯一的值"用来提高列表渲染的性能
1) wx:key 绑定一个普通的字符串的时候,那么这个字符串名称肯定是循环数组中的对象的唯一属性
2) wx:key="*this" 就表示你的数组是一个普通的数组 *this代表循环项
如:[1,2,3,44,5]或["da","wd","a","csa"]
c) 当出现数组的嵌套循环时,尤其注意 以下绑定的名称不要重名
wx:for-item="item"
wx:for-index="index"
d)默认情况下,我们不写 wx:for-item="item" wx:for-index="index"
小程序也会默认把循环项的名称和索引的名称叫做item和index
所以只有一重循环渲染时,这两句可以省略
-->
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引:{{index}}
--
值:{{item.name}}
</view>
</view>
<!-- 9 对象循环
a)wx:for={{对象}}
wx:for-item="对象的值"
wx:for-index="对象的属性"
b)循环对象的时候,最好把item和index的名称都修改一下
wx:for-item="value"
wx:for-index="key" -->
<view>
<view> 对象循环</view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key='name'>
属性:{{key}}
--
值:{{value}}
</view>
</view>
block、条件渲染
<!-- 10 block
占位符的标签
写代码时存在
页面渲染时小程序会把它移除 -->
<view>
<block
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class='my_list'>
索引:{{index}}
--
值:{{item.name}}
</block>
</view>
<!-- 11 条件渲染
a) wx:if="{{true/false}}" 控制显示或隐藏
1) if,else,if else
wx:if
wx:elif
wx:else
b) hidden
1) 在标签上直接加入属性 hidden
2)hidden="{{true}}"
c) 什么场景用什么
1) 当标签不是频繁的切换显示时,优先使用wx:if
wx:if 工作机理:直接把标签移除
2) 当标签频繁的切换显示时,优先使用hidden
hidden 工作机理:为标签添加样式 display:none;
所以 hidden 属性不要和display一起使用,会被覆盖
-->
<view >
<view >条件渲染</view>
<view wx:if="{{false}}">显示</view>
<view wx:elif="{{false}}">隐藏</view>
<view wx:else="{{false}}">darling</view>
</view>
<view >
<view >----------</view>
<view hidden >hidden</view>
<view hidden="{{true}}"></view>
</view>