微信小程序笔记（五）

小徐今天学习了吗
304 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章微信小程序笔记（四）中，我们学习了微信小程序的相关知识点，包括事件捕获、事件对象与参数传递、setData方法等相关知识点。在本篇文章中，我们将学习小程序的相关API，包括网络请求、界面弹窗、编程式路由、本地缓存，小程序的生命周期等相关知识点。

小程序 API

小程序 API 提供了很多功能，如：路由导航、显示弹框等、网络请求、文件操作、设备信息、地理定位、本地存储等等。

小程序 API 都放在全局对象 wx 中，并分同步和异步两种：

  1. 方法名以 Sync 结尾的是同步 API
  2. 其他均为异步 AP

网络请求

使用wx.request可以发起网络请求。

注意：

  • 在调用一个域名上的接口时，要先在小程序管理后台中配置域名白名单，即允许小程序调用该域名下的接口, 然后关闭项目, 重新启动
  • 在本地开发时，也可在开发者工具中设置不检查域名(临时)

image.png

Page({
  data: {
    hot: []
  },

  getHotMovies() {
    wx.request({
      url: 'https://wx.maoyan.com/mmdb/movie/v2/list/hot.json',
      method: 'GET',
      data: {
        limit: 12,
        offset: 0,
        ct: '上海'
      },
      // 成功的回调(箭头函数解决this问题)
      success: (res) => {
        console.log(res);
        this.setData({
          hot: res.data.data.hot
        })
      },
      fail: (err) => {
        console.log(err);
      },
      complete: () => {
        console.log('请求结束了');
      }
    })
  }
})

<button bind:tap="getHotMovies">获取热门电影</button>

<view wx:for="{{hot}}" wx:key="id">{{item.nm}}</view>

界面弹窗

在项目中，我们经常会使用到弹窗来进行交互。

使用：

  1. wx.showLoading / wx.hideLoading：显示/隐藏加载框
  2. wx.showModal：显示确认框
  3. wx.showToast：显示提示框

编程式路由

经常使用的路由跳转的api有wx.navigateTo、wx.redirectTo、wx.switchTab。

它们有什么区别呢？

  • wx.navigateTo：跳转到应用内的某个页面，不能跳到 tabbar 页面 （push）
  • wx.redirectTo：重定向的方式跳转到应用内的某个页面，不能跳到 tabbar 页面（replace）
  • wx.switchTab：跳转到 tabBar 页面

本地缓存

缓存 API 提供了同步和异步版本。在实际开发中的使用原则是：

  • 如果一次缓存的数据量较大时，推荐使用异步 API
  • 否则推荐使用同步 API

API：

  • setStorage / setStorageSync：设置一个缓存数据

  • getStorage / getStorageSync：获取一个缓存数据

  • removeStorage / removeStorageSync：删除一个缓存数据

  • clearStorage / clearStorageSync：清空所有缓存数据

  • getStorageInfo / getStorageInfoSync：获取缓存状态信息

生命周期

生命周期是框架代码在运行的过程中会经历的某些特定时间节点。生命周期钩子函数 是框架代码运行到特定生命周期时会调用的函数，也就是特定时间节点会执行的函数。

以小程序为例，小程序框架会按某种特定的流程执行，并允许开发人员编写在特定阶段才会执行的代码，当小程序框架代码运行到这些阶段时，开发人员的代码被随之执行。

小程序中有两种生命周期，分别是应用生命周期和页面生命周期。

avatar
文章
阅读
粉丝