一、全局配置–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）手动指定索引和当前项的变量名
文章来源：https://www.toymoban.com/news/detail-827969.html
<!-- 手动指定索引和当前项的变量名 idx、itemName自己设的名-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
索引是：{{idx}},当前循环项（item项）是：{{itemName}}
</view>
（3）wx:key 的使用，不使用Mustache语法 {{}}
文章来源地址https://www.toymoban.com/news/detail-827969.html
<!-- 当没有id时,可以使用**索引**当key值 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
到了这里，关于微信小程序学习--基础篇（二）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
