目录
- 数据绑定
- 运算表达式
- 循环渲染
- 条件渲染
- 事件绑定(传参)
首先对初始化后的小程序目录进行梳理(图来自某机构)
补充:
sitemap配置:小程序根目录下的sitemap. json文件用来配置小程序及其页面是否允许被微信索引。
数据绑定
wxml数据显示
<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型 -->
<view> 是否: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>
<!-- 6 使用bool类型充当属性 checked
字符串和 花括号之间一定不要存在空格 否则会导致识别失败 -->
<view>
<checkbox checked="{{isChecked}}"> </checkbox>
</view>
js内的data模拟数据
Page({
data: {
msg: "hello mina",
num: 10000,
isGirl: false,
person: {
age: 1,
height: 165,
name: "fur"
},
isChecked:false,
}
});
运算表达式
- 可以在花括号中 加入 表达式 – “语句”
- 表达式,指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算。。
- 数字的加减
- 字符串拼接
- 三元表达式
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
<!--输出
2
11
奇数
-->
循环
一、列表循环
- wx:for="{{数组或者对象}}"
- wx:for-item=“循环项的名称”
- wx:for-index=“循环项的索引”
- wx:key=“唯一的值” 用来提高列表渲染的性能
如果 wx:key 绑定一个普通的字符串,那么这个字符串名称,肯定是 循环数组中的对象的唯一属性
如果 wx:key ="*this" 就表示你的数组是一个普通的数组 *this 表示是 循环项
注意:
当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
wx:for-item="item" wx:for-index="index"
默认情况下 我们 不写wx:for-item="item" wx:for-index="index"
,小程序也会把 循环项的名称 和 索引的名称设为 item 和 index
只有一层循环的话 wx:for-item="item" wx:for-index="index"
可以省略
二、对象循环
- wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”
- 循环对象的时候 最好把 item和index的名称都修改一下
wx:for-item="value" wx:for-index="key"
<!-- 列表循环-->
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引:{{index}} -- 值:{{item.name}}
</view>
</view>
<!-- 对象循环-->
<view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="id">
属性:{{key}} -- 值:{{value}}
</view>
</view>
js的data内元素
person: {
id:1,
age: 1,
height: 165,
name: "fur"
},
list:[
{
id:0,
name:"fur"
},
{
id:1,
name:"furfur"
}
]
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>
条件渲染
两种方法可以对页面元素进行显示和隐藏
wx:if
、wx:elif
、wx:else
- hidden 用法
- 在标签上直接加入属性 hidden
hidden="{{true}}"
什么场景下用哪个
- 当标签不是频繁的切换显示 优先使用 wx:if,直接把标签从 页面结构给移除掉
- 当标签频繁的切换显示的时候 优先使用 hidden,通过添加样式的方式来切换显示
注意:hidden 属性 不要和样式 display一起使用!会被覆盖掉,因为hidden的原理就是增加display:none
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view wx:if="{{flase}}">1</view>
<view wx:elif="{{flase}}">2 </view>
<view wx:else> 3 </view>
<view hidden >hidden1</view>
<view hidden="{{false}}" >hidden2</view>
<view wx:if="{{false}}">wx:if</view>
<!-- 错误用法 :hidden无法被隐藏 -->
<view hidden style="display: flex;" >hidden</view>
</view>
打印结果:
事件绑定
例子:使得输入框输入的元素显示到页面元素,点击按钮实现加减操作
步骤分析:
- 需要给input标签绑定 input事件 ,绑定关键字 bindinput
- 获取输入框的值 ,通过事件源对象来获取
e.detail.value
- 把输入框的值 赋值到 data当中,注意不能直接赋值,与vue有所区别!通过this.setData进行赋值
- 点击按钮,需要加入一个点击事件bindtap,
- 注意:无法在小程序当中的 事件中直接传参 ,通过自定义属性的方式来传递参数,再通过事件源中获取自定义属性
wxml页面
<view>
{{num}}
</view>
输入:
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
js文件
Page({
data: {
num: 0
},
// 输入框的input事件的执行逻辑
handleInput(e) {
this.setData({
num: e.detail.value
})
},
// 加 减 按钮的事件
handletap(e) {
// 获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num: this.data.num + operation
})
}
})