以学校为目标做网站策划书免费做试用的网站

小程序提供了一些用于界面交互的 API，例如 loading 提示框、消息提示框、模态对话框等 API；

loading 提示框常配合网络请求来使用，用于提高用户体验，对应的 API 有两个：

• wx.showLoading() 显示 loading 提示框；
• wx.hideLoading() 关闭 loading 提示框；

注意 loading 提示框显示之后不会自动关闭，必须主动调用 hideLoading 方法才能关闭 loading 提示框；

接下来我们使用这两个 API 来实现一个需求：
当用户点击按钮时，小程序会发送请求获取数据，在发送请求过程中需要显示 loading 提示框，同时给用户文字提示；当数据请求完成之后，关闭 loading 提示框；

下面打开微信开发者工具来实现这个需求：

在 pages/cate/cate.js 中添加下面代码：

Page({data: {list: []},getData(){// 显示 loading 提示框wx.showLoading({// title 用来显示提示的内容// 提示的内容不会自动换行，如果提示的内容比较多，超出行的内容会被隐藏title: '数据正在加载中...',// 是否展示透明蒙层，防止触摸穿透，true 表示隐藏mask: true})// 发起网络请求，需要使用 wx.request APIwx.request({// 接口地址url: 'https://gamll-prod.atguigu.cn/mall-api/index/findBanner',// 请求方式method: 'GET',// 请求参数data: {},// 请求头header: {},// API 调用成功以后，执行的回调success: (res) => {if(res.data.code === 200){this.setData({list: res.data.data})}},// API 调用失败以后，执行的回调fail: (err) => {console.log(err);},// API 不管调用成功还是失败，都会执行的回调complete: (res) => {// console.log(res)// 关掉 loading 提示框wx.hideLoading()}})}
})

在 pages/cate/cate.wxml 中添加下面代码：

<button type="warn" bind:tap="getData">获取数据</button>

编译运行， 点击按钮的时候，可以发现出现了 loading 提示框，如下：

参考视频：尚硅谷微信小程序开发教程