10.网络数据请求-(Get和Post和Ajax)
(1).小程序中网络数据请求的两大限制
处于安全方面的考虑，小程序官方对数据接口的请求做出了两个限制。
- 只能请求
HTTPS类型的接口。 - 必须将
接口的域名添加到信任列表中。
(2).配置request合法域名
https://applet-base-api-t.itheima.net
配置步骤: 登入微信->微信小程序 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意事项:
- 域名只支持https协议。
- 域名不能使用IP地址或Localhost。
- 域名必须经过ICP备案。
- 服务器域名一个月内最多可以申请5次修改。
(3).发起GET请求
调用威胁你小程序提供的wx.request()方法，可以发起Get数据请求。
<!--pages/home/home.wxml-->
<text>首页</text>
<button type="primary" bindtap="getInfo">发起Get请求</button>
getInfo(){
wx.request({
url: 'https://www.escook.cn/api/get', // 1.路径
method:'GET', // 2.请求方式
data:{ // 3.发送到服务器的数据
name:'zs',
age:20
},
success:(resp)=>{ // 4.成功之后的结果数据
console.log(resp)
}
})
},
(4).发起Post请求
wxml
<button type="primary" bindtap="postInfo">发起Post请求</button>
js
postInfo(){
wx.request({
url: 'https://www.escook.cn/api/post',
method:'POST',
data:{
name:'jsxs',
age:33
},
success:(resp)=>{
console.log(resp)
}
})
},
(5).在页面刚加载时请求数据
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数。
(6).跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口。
此时为了不能耽误开发的进度，我们可以在微信开发者工具中，临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书，选项，跳过request合法域名的校验。
注意:
跳过request合法域名校验的选项，仅限在开发与调试阶段使用。
(7).关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序不存在跨域的问题。
Ajax技术的核心时依赖于浏览器的XMLHttpRequest这个对象，由于小程序的宿主环境时微信客户端而不是电脑，所以小程序中不能叫做 “发起Ajax请求”，而是叫做 “发起网络数据请求”
11.本地生活-案列
(1).实现步骤
- 新建项目并梳理项目结果
- 配置导航栏效果 (Window)
- 配置tabBar效果 (tarBar)
- 实现轮播图 (swiper)
- 实现九宫格 ()
(2).新建项目并梳理 (app.json)
1.关闭调试窗口的热重载警告
2.在app.json新建三个文件页面 (app.json)
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(3).配置导航栏 (app.json)
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window":{
"backgroundTextStyle":"dark", // 下拉的圆点样式
"navigationBarBackgroundColor": "#2b4b6b", //导航栏的颜色
"navigationBarTitleText": "本地生活", // 导航栏的文字
"navigationBarTextStyle":"white", //导航栏文字的颜色
"backgroundColor": "#efefef", // 下拉的背景色
"enablePullDownRefresh": true //是否下拉
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}(4).配置底部tabBar (app.json)
先将我们的icon图片复制到项目中，然后编写tabBar
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "本地生活",
"navigationBarTextStyle":"white",
"backgroundColor": "#efefef",
"enablePullDownRefresh": true
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/index-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/mail.png",
"selectedIconPath": "images/mail-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系",
"iconPath": "images/phone.png",
"selectedIconPath": "images/phone-active.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(5).实现轮播图获取后端地址值
- 获取轮播图接口的地址
// GET
https://applet-base-api-t.itheima.net/slides
home.js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
// 存放轮播图的数组
swiperList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 1. 挂载请求轮播图的图片
this.getSwiperList()
},
// 获取轮播图数据的方法
getSwiperList(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method:'GET',
success:(resp)=>{
console.log(resp)
this.setData({
swiperList:resp.data
})
}
})
},
})
