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

@作者 : 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

  


















{{item.name}}

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