八、微信小程序-快速回顾 ( 通过最基础的用法快速回忆常用 Api )

微信小程序提供了很多 API，可以提高我们的开发效率，实际开发前建议阅读 微信小程序 - API，本文用几个简单的进行回顾，
找找感觉，文中的所有 Api 都是最基础的使用方式，目的是快速回顾，实际使用时一定要阅读文档

一、路由

1.1. wx.navigateTo

该 Api 用来页面跳转，使用 wx.navigateTo 跳转时要注意两个地方：

1. 跳转后，原页面组件不会被销毁，而是被存入 <页面跳转历史栈> 中， wx.redirectTo 则是销毁原页面组件
2. 当项目中使用了微信小程序提供的 tabbar 导航栏时，wx.navigateTo 不能跳转到 tabbar 使用的页面
   
   

示例：页面跳转

(1) 先创建两个页面

(2) Form 页面

在页面逻辑文件中，创建事件处理函数，并在函数内进行页面跳转

Page({
  // 事件处理函数
  handleTap() {
    // 页面跳转
    wx.navigateTo({
      url: '../to/index',
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">跳转</button>

(3) To 页面

在页面布局文件中，随便加点内容

<view>这是跳转后的页面</view>

(4) 运行效果

1.2. wx.navigateBack

该 Api 用来回退页面，使用 wx.navigateBack 跳转时要保证 <页面跳转历史栈> 中有页面组件，页面回退后，触发
回退的页面组件会被销毁

示例：回退页面

(1) 先创建两个页面

(2) Form 页面

在页面逻辑文件中，创建事件处理函数，并在函数内进行页面跳转

Page({
  // 事件处理函数
  handleTap() {
    // 页面跳转
    wx.navigateTo({
      url: '../to/index',
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">跳转</button>

(3) To 页面

在页面逻辑文件中，创建事件处理函数，并在函数内进行页面回退，delta 代表回退的页数

Page({
  // 事件处理函数
  handleTap() {
    // 页面回退
    wx.navigateBack({
      delta: 1,
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">返回</button>

(4) 运行效果

二、弹窗

2.1. wx.showModal

该 Api 是一个确认框，让用户选择 <确认> 和 <取消>，然后我们可以获取用户的选择

示例：确认框

在页面逻辑文件中，创建事件处理函数，并在函数内弹出确认框

Page({
  // 事件处理函数
  handleTap() {
    // 确认框
    wx.showModal({
      // 确认框内第一行文字
      title: '提示',
      // 确认框内第二行文字
      content: '这是一个模态弹窗',
      // 成功的回调
      success(res) {
        // 判断用户点击
        if (res.confirm) {
          // 点击了确认
          console.log('用户点击确定')
        } else if (res.cancel) {
          // 点击了取消
          console.log('用户点击取消')
        }
      }
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">弹出确认框</button>

效果：

2.2. wx.showToast

该 Api 是一个提示框，提示一会就消失

示例：提示框

在页面逻辑文件中，创建事件处理函数，并在函数内弹出提示框

Page({
  // 事件处理函数
  handleTap() {
    // 提示框
    wx.showToast({
      // 提示框文字
      title: '成功',
      // 提示框图标，有成功、失败、警告等多种，详细请参考文档
      icon: 'success',
      // 弹出事件，毫秒单位
      duration: 1000
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">弹出提示框</button>

效果：

2.3. wx.showLoading 和 wx.hideLoading

wx.showLoading 会弹出一个加载中的状态框，它不会自动消失，需要我们调用 wx.hideLoading 才能将其关闭

示例：加载中状态框

在页面逻辑文件中，创建事件处理函数，并在函数内弹出加载中状态框，然后在一秒后将其关闭

Page({
  // 事件处理函数
  handleTap() {
    // 加载中状态框
    wx.showLoading({
      title: '加载中',
    })
    // 一秒后关闭 加载中状态框
    setTimeout(() => {
      wx.hideLoading()
    }, 1000)
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">弹出加载中状态框</button>

效果：

三、缓存

3.1. wx.setStorageSync

该 Api 用来将数据存到缓存中，缓存具有隔离性，不同用户或不同小程序间不能互相读写，每个小程序的每个用户
在其终端内都会有最多 10MB 的存储空间，单个 key 存储不能超过 1MB，缓存数据不会自动清除，除非用户主动删
除或因存储空间原因被系统清理

示例：存入缓存

在页面逻辑文件中，创建事件处理函数，并在函数内 指定一个 Key 然后将数据存入缓存中

Page({
  // 事件处理函数
  handleTap() {
    // 将数据存入缓存
    wx.setStorageSync('user',{name:'ares5k', age:28})
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">存入缓存</button>

效果，通过控制台的 Storage 窗口可以看到缓存中的数据：

3.2. wx.getStorageSync

通过 Key 来获取缓存中的数据

示例：获取缓存数据

在页面逻辑文件中，创建事件处理函数，并在函数内通过 Key 获取缓存数据

Page({
  // 事件处理函数
  handleTap() {
    // 通过Key获取缓存数据
    const user = wx.getStorageSync('user')
    console.log(user)
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">获取缓存数据</button>

效果，控制台中可以看到我们获取的缓存数据：

四、网络请求

wx.request

该 Api 用来发送网络请求，本例不会讨论如何让服务器地址成为微信小程序项目的合法地址，只是单纯的展示如何
发送网络请求

示例：Get 请求的最基础使用方式

在页面逻辑文件中，创建事件处理函数，并在函数内发送网络请求

Page({
  // 事件处理函数
  handleTap() {
    // 用最基础的方式发送 GET 请求
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      success:function(res){
        // 请求成功的回调
        console.log(res.data)
      }
    })
  }
})

在页面布局文件中，创建一个按钮，并绑定事件处理函数

<button bind:tap="handleTap">发送网络请求</button>

运行效果，控制台中成功打印了我们从服务器获取的数据：