前端【小程序】09-小程序基础篇【内置API】【网络请求】【界面交互【Loading、toast】】【本地存储】【API特征】【支持Promise风格的API】【练习】

内置API

　　内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

① 网络请求

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

　　调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下

// 调用API发起网络请求
wx.request({
  url: '',    // 请求接口地址
  method: '', // 请求方式
  data: '',   // 请求参数, 无论是get还是post请求都这里传参
  header: {}, // 请求的头信息，注意没有s，不是headers
  success: () => {}, // 请求成功的回调
  fail: () => {}, // 请求失败的回调
  complete: () => {}, // 请求完成的回调
})

发起网络请求的示例：

　　1、前提，请求的接口对应的域名，需要到微信公众号平台->开发->开发管理->开发设置中->服务器域名中添加对应的域名 (如果没有添加的域名直接请求会报错)

　　　　

 

　　2、添加完之后，在开发者工具中，点击右上角详情->项目配置->刷新按钮，把添加的域名刷新出来，会展示到域名信息的request合法域名列表中

　　3、index.wxml

<button class="button" size="mini" type="primary" bind:tap="getBooks">查询书单</button>
<view class="books">
  <view class="item">
    <text>序号</text>
    <text>名称</text>
    <text>作者</text>
    <text>出版社</text>
    <text>操作</text>
  </view>
  <view class="item" wx:for="{{books}}" wx:key="id">
    <text>{{index + 1}}</text>
    <text>{{item.bookname}}</text>
    <text>{{item.author}}</text>
    <text>{{item.publisher}}</text>
    <text>删除</text>
  </view>
</view>

　　4、index.js

Page({
  data: {
    books: []
  },
  // 调用数据接口的方法
  getBooks() {
    // 1、发起请求时，加载提示
    wx.showLoading({
      title: '疯狂加载中',
      mask: true
    })
    // 2、调用小程序的 API 发起请求
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan',
      },
      success: (result) => { // 使用箭头函数，这样内部的this就是指向当前页面实例，如果使用function () {} 这种方式内部的this指向的是success函数本身
        // 3、请求成功更新数据，渲染页面
        this.setData({ books: result.data.data })

        // 4、轻提示
        wx.showToast({
          icon:'success',
          title: '查询成功'
        })
      },
      complete() {
        wx.hideLoading() // 5、请求完成隐藏加载提示
      }
    })
  }
})

通过设置不校验域名合法性

　　

真机预览/调试

　　手机端如果出现白屏，需要开启开发模式才能正常预览。

　　　　

② 界面交互

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html​

• wx.showLoading 显示 loading 提示框
  • title 文字提示内容
  • mask 是否显示透明蒙层，防止触摸穿透
• wx.hideLoading 隐藏 loading 提示框
• wx.showToast 消息提示框（轻提示）
  • mask 是否显示透明蒙层，防止触摸穿透
  • duration 延迟时间（提示框显示多久）
  • icon 指定图标，none 不使用图标
• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showLoading 应与 wx.hideLoading 配对使用

Page({
  data: {
    books: []
  },
  // 调用数据接口的方法
  getBooks() {

    // 加载提示
    wx:wx.showLoading({
      title: '疯狂加载中',
      mask: true
    })
    // 调用小程序的 API 发起请求
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan',
      },
      success: (result) => {
        // 更新数据，渲染页面
        this.setData({ books: result.data.data })

        // 轻提示,消息提示框
        wx.showToast({
          icon:'success',
          title: '查询成功'
        })
      },   // 防止完成直接把showToast隐藏掉，这里的complete可以改成fail，请求失败的时候才隐藏，这样就只会在失败的时候隐藏showLoading的提示，不会隐藏showToast
      complete() { 
        wx.hideLoading() // 请求结束后关闭提示,  会隐藏showLoading 并且会隐藏showToast，这会导致查询成功的提示显示的时间很短
      }
    })
  }
})

③ 本地存储

​　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

• wx.setStorageSync 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
• wx.getStorageSync 读取一个数据，复杂类型数据不需要 JSON.parse 处理
• wx.removeStorageSync 删除一个数据
• wx.clearStorageSync 清空全部数据

Page({
  data: {
    books: [],
    keyword:'',
    keywords:[]
  },
  // 调用数据接口的方法
  getBooks() {

    // 加载提示
    wx.showLoading({
      title: '疯狂加载中',
      mask: true
    })
    // 调用小程序的 API 发起请求
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan',
      },
      success: (result) => {
        // 更新数据，渲染页面
        this.setData({ books: result.data.data })

        // 轻提示
        wx.showToast({
          icon:'success',
          title: '查询成功'
        })
      },
      complete() {
        wx.hideLoading()
      }
    })
  },

  // 本地存储 - 存数据
  setStorageData() {
    // 🚨注意：小程序通过 this.data.xxx 获取 data 数据
    wx.setStorageSync('list', this.data.list)
    // 轻提示
    wx.showToast({ icon: 'success', title: '存储成功' })

    // 同步写法 - 推荐，书写简洁方便
    //    wx.setStorageSync('key', data)
    // 异步写法
    //    wx.setStorage({ key:'key', data: data, success(){} })

    // wx.setStorage({
    //   key: 'list',
    //   data: this.data.list,
    //   success: () => {
    //     wx.showToast({ icon: 'success', title: '存储成功' })
    //   }
    // })
  },

  // 本地存储 - 取数据，根据key获取指定的数据
  getStorageData() {
    const list = wx.getStorageSync('list')
    console.log(list);
    wx.showToast({ icon: 'none', title: '读取成功，看控制台' })

    // 异步写法
    // wx.getStorage({
    //   key: 'list',
    //   success: (res) => {
    //     console.log(res.data)
    //     wx.showToast({ icon: 'none', title: '读取成功，看控制台' })
    //   }
    // })
  },

  // 本地存储 - 删数据，根据key删除指定的数据
  removeStorageData() {
    wx.removeStorageSync('logs')
    wx.showToast({ icon: 'success', title: 'logs删除成功' })
  },

  // 本地存储 - 清数据 - 慎用，会将storage中的数据全部清空
  clearStorageData() {
    wx.clearStorageSync()
    wx.showToast({ icon: 'none', title: '清空了全部本地存储' })
  }
})

④ API 特征​

小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，但是这些 API 具有一些共有的特征：

• 异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
  • success API 调用成功时执行的回调
  • fail API 调用失败时执行的回调
  • complete API 调用结束时执行的回调（无论成功或失败）
• 同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾，如 wx.getStorageSync 等
• Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用

  setStorageData() {
    // 同步写法 - 推荐，书写简洁方便
    //    wx.setStorageSync('key', data)
    // 异步写法 - 很少用到
    //    wx.setStorage({ key:'key', data: data, success(){} })

    wx.setStorage({
      // 本地存储的key
      key: 'list',
      // 本地存储的数据
      data: this.data.list,
      // 调用成功的回调
      success: () => {
        wx.showToast({ icon: 'success', title: '存储成功' })
      }
    })
  }

 

⑤ 相册/拍照  Promise方式

　　Promise：部分 API 支持（查看文档）
　　　　• 配合 async/await
　　　　• wx.chooseMedia
　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html​
　　wx.chooseMedia 调起摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果：

<view class="preview" bind:tap="onChoose">
  <image src="{{ avatar }}" mode="aspectFill" />
</view>
-------------------------------------------------
Page({
  // 用于页面渲染的数据
  data: {
    avatar: '',
  },
  // 选择图片
  async onChoose() {
    // 推荐使用 async await 的写法，减少不必要的回调地狱
    const res = await wx.chooseMedia({
      mediaType: ['image'], // 只能拍摄图片或从相册选择图片
      count: 1,             // 指定最多可以选择的文件个数
    })
    this.setData({ // 等待选择完，将选择的内容赋值给avatar变量，展示到页面视图
      avatar: res.tempFiles[0].tempFilePath,
    })
  },
})

 

搜索小练习

index.wxml

<!-- 搜索历史 -->
<view class="history">
  <view class="search-bar">
    <input type="text" model:value="{{ keyword }}" />
    <text class="label" bind:tap="onSearch">搜索</text>
  </view>
  <view class="title" wx:if="{{ keywords.length }}">
    历史搜索 <text class="icon-delete" bind:tap="onClear">x</text>
  </view>
  <view class="keywords">
    <!-- wx:key="*this"  *this 表示当前这条数据本身 -->
    <navigator url="/pages/test/index" wx:for="{{ keywords }}" wx:key="*this">
      {{ item }}
    </navigator>
  </view>
</view>

index.js

Page({
  data: {
    keyword: '',
    keywords: []
  },

  onSearch () {
    const keyword = this.data.keyword.trim()

    // 非空判断
    if (keyword === '') {
      return wx.showToast({
        icon: 'none',
        title: '请输入搜索内容'
      })
    }

    const arr = [keyword, ...this.data.keywords]
    this.setData({
      keywords: Array.from(new Set(arr)),
      keyword: ''
    })
  }
})