全局配置 - tabBar

什么是 tabBar❓

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为：

1. 底部 tabBar
2. 顶部 tabBar

注意：

1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
2. 当渲染顶部 tabBar 时，不显示 icon，只显示文本

👨‍🦲tabBar 的 6 个组成部分

tabBar 的 6 个组成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：选中时的图片路径

③ borderStyle：tabBar 上边框的颜色

④ iconPath：未选中时的图片路径

⑤ selectedColor：tab 上的文字选中时的颜色

⑥ color：tab 上文字的默认（未选中）颜色

👨‍🦲tabBar 节点的配置项

👨‍🦲每个 tab 项的配置选项

👨‍🦲简单配置Tab栏

至少创建两个页面 👉 获取icon图标 👉 完成tab栏切换 如 👇

小程序的页面配置

页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

页面配置中常用的配置项

网络数据请求

1、 小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了两点限制 👇

👉 只能请求 HTTPS 类型的接口

👉 必须将接口的域名添加到信任列表中 如 👇

小程序开发工具查看配置的域名 如 👇

2、 配置 request 合法域名

例如：希望请求 https://XXX.XXXXXX.XXX/ 域名下的接口

配置步骤：登录微信小程序管理后台 👉 开发 👉 开发设置 👉 服务器域名 👉 修改 request 合法域名

点注意事项如 👇

域名只支持 https 协议

域名不能使用 IP 地址或 Localhost

域名必须经过 ICP 备案

服务器域名一个月内最多可申请 5 次修改

3、小程序的GET 与 POST请求

1. 调用微信小程序自带的 wx.request() 方法，可以发起 GET 数据请求
2. 调用微信小程序自带的 wx.request() 方法，可以发起 POST 数据请求

代码 👇

4、 在页面刚加载时请求数据函数

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。

此时需要在页面的 onLoad 事件中调用获取数据的函数，代码如 👇

5、 跳过 Request 合法域名校验

问题😶‍🌫️：如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 Request 合法域名的校验。

注意： 跳过 Request 合法域名校验的选项，仅限在开发与调试阶段使用！

6、 关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax(阿贾克斯) 请求”，而是叫做“发起网络数据请求”。

小案例练习 （首页）

• 实现项目步骤 如 👇

1. 新建项目并梳理项目结构
2. 配置导航栏效果
3. 配置 tabBar 效果
4. 实现轮播图效果
5. 实现九宫格效果
6. 实现图片布局

代码 👇

WXML

<!--顶部轮播图--><swiperindicator-dotsautoplay="true"interval="2000"><swiper-item><imagesrc="/Image/OIP-C.jpg"></image></swiper-item><swiper-item><imagesrc="/Image/OIP-C.jpg"></image></swiper-item><swiper-item><imagesrc="/Image/OIP-C.jpg"></image></swiper-item><swiper-item><imagesrc="/Image/OIP-C.jpg"></image></swiper-item></swiper><!--九宫格--><viewclass="list"><viewclass="item"wx:for="{{gridList}}"wx:key="id"><imagesrc="{{item.icon}}"></image><text>{{item.name}}</text></view></view><!--图片--><viewclass="box_img"><imagesrc="/Image/meitus.jpg"mode="widthFix"></image><imagesrc="/Image/meitus.jpg"mode="widthFix"></image></view>

WXSS

/*顶部轮播图*/swiper{
height: 150px;
}
swiperimage{
width: 100%;
height: 100%;
}
/*九宫格*//*1.nowrap项目不换行（这个是默认值）。2.wrap项目在超出容器时进行换行。3.wrap-reverse同wrap值，只是换成反序方向。*/.list{
display: flex;
flex-wrap: wrap;
border-top: 1pxsolidred;
border-left: 1pxsolidred;
}
/*row默认值。作为一行，水平地显示弹性项目。row-reverse等同行，但方向相反。column作为列，垂直地显示弹性项目。column-reverse等同列，但方向相反。initial将此属性设置为其默认值。参阅initial。inherit从其父元素继承此属性。参阅inherit。*/.item{
width:33.3%;
height: 200rpx;
display: flex;
flex-direction: column;
/*横向纵向居中*/align-items: center;
justify-content: center;
border-right: 1pxsolidred;
border-bottom: 1pxsolidred;
/*忽略边框大小*/box-sizing: border-box;
}
.itemimage{
width: 60rpx;
height: 60rpx;
}
.itemtext{
font-size: 24rpx;
margin-top: 10rpx;
}
/*图片*//*justify-content: space-between;  /*均匀排列每个元素*//*首个元素放置于起点，末尾元素放置于终点*//*justify-content: space-around;  /*均匀排列每个元素*//*每个元素周围分配相同的空间*//*justify-content: space-evenly;  /*均匀排列每个元素*//*每个元素之间的间隔相等*//*justify-content: stretch;       /*均匀排列每个元素*//*'auto'-sized的元素会被拉伸以适应容器的大小*/.box_img{
display: flex;
padding: 20rpx10rpx;
justify-content: space-around;
}
.box_imgimage{
width: 45%;
}

效果如 👇

小总结

掌握👉 wx:if、wx:elif、wx:else、hidden、wx:for、wx:key

掌握👉 rpx 尺寸单位、@import 样式导入、全局样式和局部样式

掌握👉 pages、window、tabBar、style

掌握👉 对单个页面进行个性化配置、就近原则

掌握👉 wx.request() 方法、onLoad() 事件

最后

下篇文章再见ヾ(￣▽￣)Bye_Bye