微信小程序学习笔记（7）

一、小程序API的3大分类

①事件监听API

特点：以on开头，用来监听某些事件的触发

举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

②同步API

特点1：以Sync结尾的API都是同步API

特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.setStorageSync(‘key’,’value’)向本地存储中写入内容

③异步API

特点：类似于JQuery中的$.ajax(options)函数，通过success,fall,complete接收调用的结果

举例：wx.request()发起网络数据请求，通过success回调函数接收数据

二、生命周期

允许程序员在特定时间点执行特定的操作，例如onload

应用生命周期：小程序启动->运行->销毁

页面生命周期：加载->渲染->销毁

//页面的.js文件
Page({
onload:function(options){},//监听页面加载，一个页面只调用1次
onShow:function(){},//监听页面显示
onReady:function(){},//监听页面初次渲染完成，一个页面只调用1次
onHide:function(){},//监听页面隐藏
onUnload:function(){}//监听页面卸载，一个页面只调用1次
})

三、发起网络数据请求

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

出于安全性方面的考虑，小程序官方对数据接口的请求有限制：

①只能请求HTTPS类型的接口

②必须将接口的域名添加到信任列表中

2、配置request合法域名

登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

域名只支持https协议

域名不能使用IP地址或localhost

域名必须经过ICP备案（后端）

服务器域名一个月内最多可申请5次修改

3、跳过request合法域名校验

若后端仅提供http协议接口，暂时没有提供https协议的接口

为了步耽误开发的进度，在微信开发者工具中，临时开启“不校验请求域名”

详情->本地设置->不校验合法域名

仅限在开发与调试阶段

4、关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以不存在跨域的问题

Ajax技术的核心是依赖浏览器中XMLHttpRequest对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做发起Ajax请求，而是发起网络数据请求

Ajax小贴士

Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。它的核心是利用了浏览器提供的 XMLHttpRequest 对象来异步地与服务器交换数据并更新部分网页内容。

XMLHttpRequest 对象是 JavaScript 的一个API，它允许客户端与服务器进行数据交换。通过这个对象，开发者可以在后台与服务器通信，获取数据，然后使用 JavaScript 来更新网页的部分内容，而不需要重新加载整个页面。

而小程序，比如微信小程序，它运行在微信客户端的环境中，而不是传统意义上的浏览器环境。因此，小程序并没有 XMLHttpRequest 对象。小程序提供了自己的网络请求接口，例如微信小程序中的 wx.request 方法，用于发起网络请求。

虽然小程序中的网络请求与 Ajax 请求在概念上是类似的，都是异步地与服务器进行数据交换，但由于运行环境的不同，它们在实现上有所区别：

1、环境不同：Ajax 运行在浏览器环境中，而小程序运行在微信客户端环境中。
2、API不同：浏览器使用 XMLHttpRequest 或 fetch API 发起请求，而小程序使用 wx.request 等特定的API。
3、权限和限制：小程序的网络请求受到微信平台的限制，比如请求的域名需要在小程序后台进行配置，而浏览器中的 Ajax 请求则没有这样的限制。

5、发起请求

①GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求

 //发起GET数据请求
  getInfo(){
    wx.request({
      url:'https://www.escook.cn/api/get',//请求的接口地址，必须基于https
     method:'GET',//请求的方式
     data:{//发送到服务器的数据
       name:'zs',
       age:20
     },
     success:(res)=>{//请求成功后的回调函数
       console.log(res)
     }
    })

②POST请求

调用微信小程序提供的wx.request()方法

//js
wx.request({
	ur1:'https://www.escook.cn/api/pos',//请求的接口地址，必须基于https协议
	method:'POST',//请求方式
	data:{//发送到服务器的数据
	namw:'zs',
	age:32
	}
	sucess:(res)=>{
	//请求成功之后的回调函数
	console.log(res)
	}
})

6、页面刚加载时请求数据

在很多情况下我们需要在页面刚加载的时候，自动请求一些初始化的数据，用onload事件中调用获取数据的函数

onload:function(options){
this.getSwiperList()
this.getGridList()
}
//获取轮播图的数据
getSwiperList(){
……}，
//获取九宫格的数据
getGridList(){
……}，