网络数据请求
1.小程序中网络数据请求的限制
出于
安全性
方面的考虑,小程序官方对数据接口的请求
做出了如下两个限制:
① 只能请求
HTTPS
类型的接口② 必须将
接口的域名
添加到信任列表
中微信小程序只能请求 https 类型的接口
且需要请求的域名必须提前进行设置后,才可以通过微信小程序访问该请求
https://www.escook.cn/配置方式: 登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名.
配置 request 合法域名
注意事项
- 域名只支持 https 协议
- 域名不能使用 IP 地址 或 localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月最多可申请 5 次修改
发起 GET 请求
JSONPlaceholder 是一个提供免费的在线 REST API 的网站,我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。
嘿嘿 重要的事情说三遍
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址
微信小程序中有个顶级对象是 wx
调用微信小程序提供的 wx.request()
方法, 可以发起 GET 数据请求,示例代码如下:
html
<!--pages/home/home.wxml-->
<text></text>
<view>作者: 王鑫</view>
支持商业活动相关合作
<view>电话: 15135151098</view>
<button bindtap="getInfor">发起GET</button>
要和data处于同一级
data 为发送到服务器的数据
js
xxx {
xxx
},
getInfor: function() {
wx.request({
url: 'https://example/api/get',
method: 'GET',
data: {
name: 'zs',
age: 20
},
success: (res) => {
console.log('请求成功'),
console.log(res.data)
},
fail(err) {
console.log('请求错误'),
console.error('Error',err);
},
complete(res) {
console.log("请求完成")
}
})
},
xxx {
xxx
},
py
method: 'POST'
请求方式
在页面刚加载时请求数据
在很多情况下,需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad
事件中调用获取数据的函数,示例代码如下:
当页面一加载,一开始,这个函数就会执行
js
/**
* 生命周期函数 -- 监听页面数据
*/
onLoad: function (options) {
this.getSwiperList()
this.getGridList()
this.getInfor()
},
// 获取轮播图的数据
getSwiperList() { ...
},
// 获取九宫格的数据
getGridList() { ...
}
}}
如果后端没有https接口,仅提供http请求,也可以进行测验
详情-> 本地设置->点击(不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS 证书 )
注意:
跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!
网络数据请求
关于 跨域
和 Ajax
的说明
跨域问题,只存在于 基于浏览器的 Web开发中。由于 小程序的宿主环境 不是浏览器,而是微信客户端
所以小程序不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的 XMLHttpRequest
这个对象,由于小程序的宿主环境是微信小程序,所以小程序中 不能叫做 "发起Ajax请求" , 而是叫做 "发起网络数据请求"。
案例实现:
首页效果以及实现
① 新建项目并梳理项目结构
② 配置导航栏效果
③ 配置tabBar效果
④ 实现轮播图效果
⑤ 实现九宫格效果
⑥ 实现图片布局
导航栏
app.json -> window
页面配置中常用的配置项
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色,如 #000000 |
navigationBarTextStyle | String | white | 当前页面导航栏标题颜色,仅支持 black/white |
navigationBarTitleText | String | Weixin | 当前页面导航栏标题文字内容 |
backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉 loading 的样式,仅支持 dark/light |
enablePullDownRefresh | Boolean | false | 是否 为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px |
配置tabBar
和window窗口平级
json
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "home"
// "iconPath": "iconpath", // 未选中时候的图标。 例如 /image/tabs/home.png
// "selectedIconPath": "selectIconpath" //选中时候的图标
},
{
"pagePath": "pages/contact/contact",
"text": "text"
// "iconPath": "iconpath",
// "selectedIconPath": "selectIconpath"
}
]
},
轮播图
想到一个好主意,免费撸CSDN的羊毛。
html
<swiper class="swiper-container" indicator-dots indicator-active-color="gray" indicator-active-color="black" autoplay interval="5000" circular>
<!-- 第1项 -->
<swiper-item>
<view class="item">石头</view>
</swiper-item>
<!-- 第2项 -->
<swiper-item>
<view class="item">剪刀</view>
</swiper-item>
<!-- 第3项 -->
<swiper-item>
<view class="item">布</view>
</swiper-item>
<swiper-item>
<image src="/images/1.png" mode="aspectFill"></image>
</swiper-item>
</swiper>
获取轮播图数据的方法
JS
js
data: {
swiperList: []
},
onLoad: function (option){
this.getSwiperList()
},
getSwiperList(){
wx.request() {
url: 'https://img-blog.csdnimg.cn/xxx',
method: 'GET',
success: (res) => {
console.log(res)
this.setData({
swiperList: res.data
})
}
}
}
wxml
html
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
wxss
css
swiper {
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
实现九宫格
https://www.escook.cn/categories
Also Need An List
js
data: {
// 存放九宫格的列表
gridList: []
},
onLoad: function (option){
this.getSwiperList()
this.getGridList()
},
// 定义一个新的函数
// 获取九宫格数据的方法
getGridList() {
wx.request({
url: 'https://www.escook.cn/categories',
method: 'GET',
success: (res) => {
console.log(res) //打印了一个对象,里面就是一个九宫格的列表
this.setData({
gridList: res.data
})
}
})
},
wxml
html
<view class="grid-list">
<view class="grid-item" wx:for="{{gridList}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
wxss
css
.grid-list {
display: flex;
flex-wrap: wrap;
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
}
.grid-item {
width: 33.33%;
height: 200rpx;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image {
width: 60rpx;
height: 60rpx;
}
.grid-item text {
font-size: 24rpx
margin-top: 10rpx;
}
实现图片布局
html
<view class="img=box">
<image src="/images/link-01.png" mod="widthFix"></image>
<image src="/images/link-02.png" mod="widthFix"></image>
</view>
css
.img-box{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image {
width: 45%;
}