全局配置 - tabBar
什么是 tabBar❓
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。
小程序中通常将其分为：
- 底部 tabBar
- 顶部 tabBar
注意：
- tabBar中只能配置最少 2 个、最多 5 个 tab 页签
- 当渲染顶部 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请求
- 调用微信小程序自带的 wx.request() 方法，可以发起 GET 数据请求
- 调用微信小程序自带的 wx.request() 方法，可以发起 POST 数据请求
代码 👇
4、 在页面刚加载时请求数据函数
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。
此时需要在页面的 onLoad 事件中调用获取数据的函数，代码如 👇
5、 跳过 Request 合法域名校验
问题😶🌫️：如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 Request 合法域名的校验。
注意： 跳过 Request 合法域名校验的选项，仅限在开发与调试阶段使用！
6、 关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax(阿贾克斯) 请求”，而是叫做“发起网络数据请求”。
小案例练习 （首页）
- 实现项目步骤 如 👇
- 新建项目并梳理项目结构
- 配置导航栏效果
- 配置 tabBar 效果
- 实现轮播图效果
- 实现九宫格效果
- 实现图片布局
代码 👇
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() 事件
最后
下篇文章再见ヾ(￣▽￣)ByeBye
