@作者 : SYFStrive
@博客首页 : HomePage
📜: 微信小程序
📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗
📌:觉得文章不错可以点点关注 👉:专栏连接🔗
💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀
👉 微信小程序(🔥)
目录
网络数据请求
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