微信小程序开发实战 ⑩（网络请求设置）

@作者 : SYFStrive

 

@博客首页 : HomePage

📜： 微信小程序

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

📌：觉得文章不错可以点点关注 👉：专栏连接🔗

💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀

👉 微信小程序（🔥）

网络数据请求

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

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

👉 只能请求 HTTPS 类型的接口
👉 必须将接口的域名添加到信任列表中 如 👇

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

   2、 配置 request 合法域名

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

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

• 点注意事项如 👇
  1. 域名只支持 https 协议
  2. 域名不能使用 IP 地址或 Localhost
  3. 域名必须经过 ICP 备案
  4. 服务器域名一个月内最多可申请 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

<!-- 顶部轮播图 -->
<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() 事件

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家💪

 

                 相关专栏连接🔗

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