微信小程序开发实战(网络请求设置)
@作者 : SYFStrive
@博客首页 : HomePage
📜: 微信小程序
📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗
📌:觉得文章不错可以点点关注 👉:专栏连接🔗
💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀
👉 微信小程序(🔥)
目录
全局配置 - 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 节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar 的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景色 | |
list | Array | 是 | tab 页签的列表,最少 2 个、最多 5 个 tab |
👨🦲每个 tab 项的配置选项
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当 postion 为 top 时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径;当 postion 为 top 时,不显示 icon |
👨🦲简单配置Tab栏
至少创建两个页面 👉 获取icon图标 👉 完成tab栏切换 如 👇
小程序的页面配置
-
页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
-
页面配置和全局配置的关系
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
-
页面配置中常用的配置项
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色,如 #000000 |
navigationBarTextStyle | String | white | 当前页面导航栏标题颜色,仅支持 black / white |
navigationBar TitleText | String | 当前页面导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px |
网络数据请求
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
相关文章
- Win64 驱动内核编程-16.WFP网络监控驱动(防火墙)
- UESTC 1143 数据传输 网络流 最大流 Dinic
- RT网络用语
- stm32+hal库+eOS移植(网络上大神写的rtos,适合学习)
- 基于遗传和虚拟力优化算法的WSN无线传感器网络节点二维/三维部署覆盖率问题matlab仿真
- 154 python网络编程 - TCP案例(模拟QQ聊天)
- 微信小程序 - 将 MP4 视频下载保存到用户手机相册(网络路径 / 临时路径)
- 微信小程序 - “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决
- 微信小程序 功能函数 openid本地和网络请求
- 《互联网产品设计》一1.4 本地应用程序作为网络产品
- 微信公众号 “网络出错,轻触屏幕重新加载” -1202
- IBM Connections 推出新功能 让企业社交网络如虎添翼
- 微信终端跨平台组件 Mars 在移动网络的探索和实践
- 一文入门人工智能的掌上明珠:生成对抗网络(GAN)
- RabbitMQ (五)主题(Topic) -摘自网络
- Extreme Networks证实了收购Avaya网络业务的消息