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 }) } }) }, })
