微信小程序开发实战(网络请求设置)
全局配置 - 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
<!-- 顶部轮播图 --> <swiper indicator-dots autoplay="true" interval="2000"> <swiper-item> <image src="/Image/OIP-C.jpg"></image> </swiper-item> <swiper-item> <image src="/Image/OIP-C.jpg"></image> </swiper-item> <swiper-item> <image src="/Image/OIP-C.jpg"></image> </swiper-item> <swiper-item> <image src="/Image/OIP-C.jpg"></image> </swiper-item> </swiper> <!-- 九宫格 --> <view class="list"> <view class="item" wx:for="{{gridList}}" wx:key="id"> <image src="{{item.icon}}"></image> <text>{{item.name}}</text> </view> </view> <!-- 图片 --> <view class="box_img"> <image src="/Image/meitus.jpg" mode="widthFix"></image> <image src="/Image/meitus.jpg" mode="widthFix"></image> </view>
WXSS
/* 顶部轮播图 */ swiper{ height: 150px; } swiper image{ width: 100%; height: 100%; } /* 九宫格 */ /* 1. nowrap 项目不换行(这个是默认值)。 2. wrap 项目在超出容器时进行换行。 3. wrap-reverse 同 wrap 值,只是换成反序方向。 */ .list{ display: flex; flex-wrap: wrap; border-top: 1px solid red; border-left: 1px solid red; } /* 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: 1px solid red; border-bottom: 1px solid red; /* 忽略边框大小 */ box-sizing: border-box; } .item image{ width: 60rpx; height: 60rpx; } .item text{ 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: 20rpx 10rpx; justify-content: space-around; } .box_img image{ width: 45%; }
效果如 👇
小总结
掌握👉 wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
掌握👉 rpx 尺寸单位、@import 样式导入、全局样式和局部样式
掌握👉 pages、window、tabBar、style
掌握👉 对单个页面进行个性化配置、就近原则
掌握👉 wx.request() 方法、onLoad() 事件
最后
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- Laravel和Vue.js,是什么让他们成为如此强大的一对
- 前端规划:我的 2021 前端技术战略
- 微服务,开源市场的下一个明星
- 亿级数据自助应用,京东物流基于Doris实现高性能秒级分析
- 2021年值得关注的15种软件测试趋势
- 教你五分钟开发一款桌面版应用
- 渐进式网页应用:可能被忽视了的阴暗面
- 你的Springboot应用到底启动了哪些bean?这两种方式可以帮你获取
- 一步为你的Springboot应用自定义Banner
- 2020年国内前端团队都做了些什么?
- 走进华为应用市场2020嘉年华 一起点亮精彩生活
- 阿里达摩院发布2021十大科技趋势
- 华为应用市场AppGallery Connect研习社·直播,助你高效开发应用,快速分发获量
- 实现SSO单点登录的思考
- 在生产环境中,你可以遵循的那些Kubernetes优秀实践
- 从0学ARM-汇编伪指令、LDS详解
- 这么好的微前端解决方案你顶得住?
- 你需要了解的几种微前端解决方案
- 并发编程之Phaser原理与应用
- 【Apps Up最佳应用奖】迷鹿吉他尤克里里 让每个人玩音乐像喝咖啡一样简单