原生小程序基础知识3

一、常用的内置API

1. 界面交互

1.1 加载提示

加载提示框常配合网络请求来使用，用于增加用户体验，对应的 API 有两个，分别为：

• wx.showLoading 显示加载提示框
• wx.hideLoading 隐藏加载提示框

// 显示加载提示
wx.showLoading({
  title: '正在加载...',
  mask: true,
})
// 隐藏加载提示
wx.hideLoading()

在调用 wx.showLoading 时可以传入以下参数：

• title 指定显示的文字提示内容（不能省略）
• mask 提供一个透明层阻止对页面其它内容进行操作
• success 显示加载提示框成功后的回调（很少用到）
• fail 显示加载提示框失败后的回调（很少用到）
• complete 显示加载提示框完成后的回调（包括成功和失败两种情况）

1.2 信息反馈

信息反馈是指根据用户的某些操作来告知操作的结果，如用户点击加入购物车，提示用户添加成功，用户提交表单提示用户表单验证的结果等，对应的 API 是 wx.showToast

wx.showToast({
  title: '姓名只能为汉字!',
  duration: 2000,
  mask: true,
  icon: 'success'
})

2. 本地存储

• wx.setStorageSync 在本地存入一个数据
• wx.getStorageSync 读取本地的一个数据
• wx.removeStorageSync 删除本地存储的一个数据
• wx.clearStorageSync 清空本地存储的数据

// pages/storage/index.js
Page({
  // 存入本地数据
  setStorage() {
    wx.setStorageSync('name', '小明')
    // 可以直接存入对象，无需 JSON.stringify 处理
    wx.setStorageSync('user', { name: '小明', age: 18 })
  },

  // 读取本地数据
  getStorage() {
    const name = wx.getStorageSync('name')
    // 对象类型的数据不必 JSON.parse 处理
    const user = wx.getStorageSync('user')
  },

  // 删除数据
  removeStorage() {
    wx.removeStorageSync('name')
  },
  // 清空数据
  clearStorage() {
    wx.clearStorageSync()
  },
})

注意：注意在小程序中本地存储可以直接存入对象或数组类型的数据，无需要 JSON.stringify 进行处理。

2.1 除了上述的4个 API 外，还有4个与之对应的异步版本的API：

• wx.setStorage 在本地存入一个数据
• wx.getStorage 读取本地的一个数据
• wx.removeStorage 删除本地存储的一个数据
• wx.clearStorage 清空本地存储的数据

Page({
  setStorage() {
    wx.setStorage({
      key: 'name',
      data: '小明'
    })
    // 等同于
    wx.setStorage('name', '小明')
  }
})

3. 头像昵称获取

3.1 用户头像

获取用户头像必须用到 button 组件，且用户必须要主动点击 button 按钮，以下是 button 的使用细节：

• 设置 button 的属性 open-type 值为 chooseAvatar
• 监听 button 的 chooseavatar 事件

示例：

  <button
      open-type="chooseAvatar"
      bind:chooseavatar="getUserAvatar"
    >
      <image src="{{profile.avatarUrl}}"></image>
  </button>

  // 获取用户头像
  getUserAvatar(ev) {
    // 获取头像对应的地址
    // console.log(ev.detail.avatarUrl)
    // 'profile.avatarUrl' 这是小程序特别支持更新数据的用法，相当于
     //data: {
     //   profile: {
     //     avatarUrl: '/static/images/avatar.png',
     //     nickName: '微信用户',
     //   },
     // },
    this.setData({
      'profile.avatarUrl': ev.detail.avatarUrl,
    })

此时得到的头像地址是临时地址，只能在小程序内部使用，要实现永久存储需要将这个图片上传给自已的服务端，文件上传会用到 wx.uploadFile。

// pages/profile/index.js
Page({
  // 省略部分代码...
  getUserAvatar(ev) {
    this.setData({
      'profile.avatarUrl': ev.detail.avatarUrl,
    });

    // 上传临时文件
    wx.uploadFile({
      url: 'http://ajax-api.itheima.net/api/file',
      filePath: ev.detail.avatarUrl,
      name: 'avatar',
      success: (res) => {
        console.log(res);
      },
    });
  },
})

3.2 用户昵称

获取用户头像必须用到 input 组件，当 input 获得焦点后小程序会自动展示用户的昵称 以下是 input 的使用细节：

• 设置 input 的 type 属性值为 nickname
• 监听 input 组件的 input 、blur 、change 等事件获取表单中的值

   <input
      type="nickname"
      bind:change="getUserNickName"
      value="{{profile.nickName}}"
    />

  getUserNickName(ev) {
    // 获取用户设置的昵称
    this.setData({
      'profile.nickName': ev.detail.value,
    })
  },

4. 路由

• wx.navigateTo 跳转到一个新的页面，会新增一种历史记录

•  wx.switchTab 跳转到 tabBar 页面

• wx.redirectTo 跳转到一个新的页面，不会新增一种历史记录，替换掉当前页面。
• wx.navigateBack 返回页面，参数 delta 可以指定返回前几个页面。