微信小程序学习--基础篇（二）

一、全局配置–tabBar

1、tabBar底部导航栏

（1）list [] 数组中至少有2项，最多5项，在app.json文件中配置。
（2）在tabBar中添加"selectcolor"：“#ccc”, 可修改选中后字体的颜色。

tab页签，对应的页面必须放到最前面

二、小程序-API

1、api的3大分类

（1）通过api，开发者可以方便的调用微信提供的能力，如：获取用户信息，本地存储，支付功能。
（2）api的3大分类：

三、WXML模板语法

1、数据绑定

1.数据绑定的基本原
（1）在data中定义数据
在页面对应的 .js 文件中，把数据定义到data对象中即可；

（2）在WXML中使用数据；
把data中的数据绑定到页面中渲染，使用Mustache语法 {{}}，将变量包起来。

1）绑定内容，绑定属性，三元运算

2）算数运算

关键代码： 在.js文件中：
// 生成一个带两位小数随机数，如：0.34
randomNum2:Math.random().toFixed(2)

2、事件绑定

（1）事件是渲染层（页面）到逻辑层（.js文件）的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
（2）小程序中常用的事件

（3）事件对象的属性列表

（4）target和currentTarget的区别
一般常用target

（5）bindtap的语法，定义按钮的事件处置函数,事件event可以简写为e

（6）在事件处理函数中为data中的数据赋值

关键代码：// +1按钮的点击事件处理函数,this.setData 赋新值函数，this.data. 旧值函数
CountChange(e) {
this.setData({
count: this.data.count + 1
})
},

（7）事件传参



（8）bindinput的语法格式

（9）实现文本框和data之间的数据同步
1）定义数据
关键代码： .js文件

 page({
		data:{
			msg:'你好，'
	}
})

2）渲染结构
关键代码： wxml文件

<input value="{{msg}}" bindinput="iptHandler"></input>

3）美化样式
关键代码： wxss文件

input {
//添加边框
	border: 1px solid #eee;
	padding:5px;
	margin:5px;
//添加圆角
	border-radius:3px;
}

4）绑定input事件处理函数
关键代码：

// 文本框内容改变事件
iptHandler(e) {
	this.setData({
	//通过 e.detail.value 获取到文本最新的值
	msg:e.detail.value
	})
}

3、条件渲染

（1）wx:if
在小程序中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块：

（2）结合 block使用wx:if ,可以避免在也面上渲染出不必要的元素，提高页面渲染性能。

（3）hidden

（4）wx:if 与hidden对比
1）运行方式不同

• wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式（display:none/block），控制元素的显示与隐藏
  注：hidden本身就为隐藏，!flag 为显示元素 在wx:if的布尔值为true时会显示元素

<!-- hidden隐藏 -->
<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>

<!--hidden本身就为隐藏，!flag 为显示元素 在wx:if的布尔值为true时会显示元素 -->
<view wx:if="{{flag}}">这是使用wx:if控制的元素</view>

2）使用建议

• 频繁切换时使用 hidden
• 控制条件比较复杂时，使用wx:if 、wx:elif、wx:else进行展示与隐藏的切换

4、列表渲染

（1）wx:for
通过wx:for可以根据指定的数组，循环渲染重复的结构组件，默认情况下，当前循环项的索引用index表示，当前循环项用item表示

<!-- 列表渲染 -->
<!-- arr1 数组名称 -->
<view wx:for="{{arr1}}">
  索引是：{{index}},当前循环项（item项）是：{{item}}
</view>

（2）手动指定索引和当前项的变量名

<!-- 手动指定索引和当前项的变量名   idx、itemName自己设的名-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}},当前循环项（item项）是：{{itemName}}
</view>

（3）wx:key 的使用，不使用Mustache语法 {{}}

<!-- 当没有id时,可以使用**索引**当key值 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>