微信小程序开发基础

标签

• 小程序的text标签和html里面的span类似，==就是文本，全部呈现不换行==
• 小程序的view标签和html里面的div类似，==文本可换行==

微信标签

1. text相当于以前web中的 span标签，行内元素，不会换行
2. view相当于以前web中的 div标签，块级元素，会换行
3. checkbox是以前的复选框

数据绑定

 <!-- js当中 -->
 Page({
 	data:{
 	msg:"hello mina",
 	num:10000,
 	isChecked:false
 	}
 })
 
 <!-- wxml中 -->
 <view>{{msg}}</view>	//字符串类型，还有数字、bool、object类型等。
 
 <!-- 在标签的属性中使用 -->
 <view data-num="{{num}}" >自定义属性</view>
 
 <!-- 使用bool类型充当属性checked
 		字符串和花括号之间一定不能有空格，否则会导致识别失败 -->
 <view>
 	<checkbox checked="{{isChecked}}"> </checkbox>
 </view>
 
 <!-- 三元表达式 -->
 <view>{{10%2===0 ? '偶数' : '奇数' }}</view> 

列表渲染

1. wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-idex="循环项的索引"
2. wx:key="唯一的值" 用来提高列表渲染的性能
   1. wx:key 绑定一个普通的字符串的时候，那么这个字符串的名称肯定是循环数组中的对象的唯一属性。
   2. wx:key ="* this" 就表示你的数组是一个普通的数组，*this表示是循环项。
3. 当出现数组的嵌套循环的时候，尤其要注意，以下绑定的名称不要重名
   1. wx:for-item="item" wx:for-index="index"
4. 默认情况下我们不写，当只有一个循环的时候
   1. wx:for-item="item" wx:for-index="index"
   2. 小程序也会把循环项的名称和索引的名称 item 和 index
   3. 只有一层循环的话（wx:for-item="item" wx:for-index="index"）可以省略

对象循环

1. wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2. 循环对象的时候，最好把item和index的名称都修改一下
   1. ==wx:for-item="value" wx:for-index="key"==

block

渲染一个包含多节点的结构块block最终不会变成真正的dom元素

==写循环的时候，如果不希望外面多套一层标签的话，可以使用标签来占位==

条件渲染

1. wx:if="{{true/false}}"
2. if , else , if else : wx:if/wx:elif/wx:else
3. hidden
   1. 在标签上直接加入属性hidden"{{true}}
4. 什么场景下用哪个
   1. 当标签不是频繁的切换显示 ， 优先使用wx:if
      1. ==直接把标签从页面结构给移除掉==
   2. 当标签频繁切换显示的时候 ，优先使用hidden
      1. ==通过添加样式的方式来切换显示==
      2. ==hidden 属性不要和样式display一起使用==

事件绑定

1. wxml里面创建样式

2. 事件绑定关键字为“bind”

3. this.setData来赋值

4. 无法在小程序当中的事件中直接传参

5. 通过自定义属性的方式来传递参数

6. 事件源中获取自定义属性