微信小程序-API

API

小程序的API分三种

• 异步API
• 同步API
• 事件监听API

---

网络请求API

发起网络请求，微信小程序提供了wx.request()，这就是一个异步的API

wx.request请求的域名必须在微信公众平台进行配置

wx.request(Object object) 接受一个配置对象作为参数，其中包含以下常用属性：

• url (String): 必填。 开发者服务器接口地址。

• method (String): 请求方法，默认为 'GET'。可选值有 'GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'。

• data (Object/String/ArrayBuffer):请求的参数。

  • 对于 GET 请求，data 会自动拼接在 url 后面作为查询参数。
  • 对于 POST 请求，data 会放在请求体中。
  • 如果 header 中 Content-Type 为 application/json，data 会自动转换为 JSON 字符串。

• header (Object):设置请求的`header``

  • ``header中不能设置 Referer`

  • 常用设置：'Content-Type': 'application/json' 或 'Content-Type': 'application/x-www-form-urlencoded'。

  • 也可以设置 Authorization 等认证信息。

• success (Function):接口调用成功的回调函数。

  • 回调参数res

    对象包含：

    • res.data: 服务器返回的数据。
    • res.statusCode: HTTP 状态码（如 200, 404, 500）。
    • res.header: 服务器返回的 header。

• fail (Function):接口调用失败的回调函数（通常是网络问题、超时、域名不合法等）。

  • 回调参数 err 对象包含错误信息。

• complete (Function): 接口调用结束的回调函数（无论成功或失败都会调用）。常用于隐藏加载提示。

• timeout (Number): 超时时间，单位毫秒。默认为 60000ms (60秒)。

---

界面交互-loading提示框

小程序提供了wx.showLoading()和wx.hideLoading()来开启/关闭加载提示框

配合wx.request可以实现在发送请求时显示提示框

• title (String): 必填。 提示的内容，例如 '加载中...'。
• mask (Boolean): 可选。是否显示透明蒙层，防止触摸穿透。默认为 false。建议设置为 true，以防止用户在加载时误触页面元素。

配合wx.request的 complete回调方法，在其中实现关闭提示框即可

---

界面交互-模态对话框和消息提示框

wx.showModal()：模态对话框，常用与询问用户是否执行一些操作

wx.showToast()：消息提示框，根据用户的操作来告知操作的结果

---

本地存储

小程序的本地存储有同步存储和异步存储两种方式

小程序中的同步/异步存储（wx.setStorageSync/wx.setStorage 等相当于浏览器中的本地存储（localStorage/sessionStorage）。

---

编程式路由

除了使用navigator属性进行声明式路由外，可以使用编程式路由API进行跳转

---

上拉加载

在json文件中配置上拉加载高度

"onReachBottomDistance": 100

将数据更改和推送的逻辑写在onReachBottom方法中，通过vx:for来实现页面的实时变更

Page({
  data:{
    numList: [1,2,3]
  },
  onReachBottom(){
    const lastNum = this.data.numList[this.data.numList.length-1]
    const newArr = [lastNum+1, lastNum+2,lastNum+3]
    this.setData({
      numList: [...this.data.numList , ...newArr]
    });
  }
})

---

下拉刷新

在json中配置允许下拉刷新

"enablePullDownRefresh": true

将重新获取数据的逻辑写在方法中

onPullDownRefresh(){
  this.setData({
    // 重新获取数据
  })
}

---

Scroll-view组件

使用scroll-view组件实现下拉加载更多

<scroll-view 
scroll-y 
class="scroll-y" 

lower-threshold="100"
bindscrolltolower="getMore"> 

getMore(){
  const lastNum = this.data.numList[this.data.numList.length-1]
  const newArr = [lastNum+1, lastNum+2,lastNum+3]
  this.setData({
    numList: [...this.data.numList , ...newArr]
  });
},

组件中提供enable-back-to-top属性，可以点击标题返回至顶部

组件中提供refresher-enabled属性，可以配置下拉刷新

通过refresher-*来配置下拉刷新的样式refresher-enabled=

通过bindrefresherrefresh属性配置下拉刷新要执行的逻辑

refresher-triggered属性配置下拉刷新的状态

---