微信小程序第二天学习总结界面交互加载提示信息反馈信息反馈是指根据用户的某些操作来告知操作的结果，如用户点击加入购物

界面交互

加载提示

- 加载提示框常配合网络请求来使用，用于增加用户体验，对应的API有2个
    - wx.showLoading：显示加载提示框
    - wx.hideLoading：隐藏加载提示框

// pages/index/index.js
Page({
  // ...省略前面小节代码
  // 获取学生表表
  getStudentList() {
    // 显示提示框
    wx.showLoading({
      title: '正在加载...',
      mask: true,
    })

    // 发起请求
    wx.request({
      url: 'https://mock.boxuegu.com/mock/3293/students',
      method: 'GET',
      // 这里注意因为 this 的原因，推荐使用箭头函数
      success: (res) => {
        this.setData({
          // 更新 students 数组
          students: res.data.result,
        })
      },
      complete() {
        // 隐藏提示框
        wx.hideLoading()
      },
    })
  },
})

信息反馈

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

<!-- pages/index/index.wxml -->
<!-- 省略了部分代码 -->
<input type="text" model:value="{{username}}" placeholder="请填写您的姓名" />
<button type="primary" bind:tap="submitForm">提交</button>

// 调用 Page 函数
// pages/index/index
Page({
  data: {
    msg: '大家好，这是我的第一个小程序！',
    number: 1,
    seen: true,
    isLogin: true,
    username: '',
    students: [],
  },

  // 省略部分代码...
  submitForm() {
    console.log(this.data.username);
    // 验证姓名只能为汉字
    const reg = /^[\u4e00-\u9fa5]{2,5}$/;
    // 验证结果
    const valid = reg.test(this.data.username.trim());
    // 提示验证结果
    if (!valid) {
      return wx.showToast({
        title: '姓名只能为2到5位汉字!',
        icon: 'none',
      });
    }
  },
});

为了更好的用户体验，wx.showToast在调用的时候能传入7个参数：

title 指定显示的文字提示内容（不能省略）
mask 提供一个透明层阻止对页面其它内容进行操作
icon 指定图标类型
duration 指定信息反馈的显示时长
success 信息反馈成功后的回调（很少用到）
fail 信息反馈失败后的回调（很少用到）
complete 信息反馈完成后的回调（包括成功和失败两种情况）

但是在项目开发的时候，我们经常用到的是title（指定显示的文字提示内容）和mask（提供一个透明层阻止对页面其它内容进行操作）以及icon图标类型。

本地存储

同步存储

小程序也提供了用于在本地存一些临时性的数据，比如包括登录状态的token。其包含4个注意api：

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 })
  },
})

要注意的是：在小程序中 Sync 结尾的 API 指的是同步方式执行，同步方式执行的 API 在使用时简洁比较好，但缺点是同步会阻塞程序执行，执行效率上相较异步版本要差一些。

异步存储

异步存储对应的API包括：

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

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

npm支持

默认构建
小程序不能直接使用在 npm 下载的模块包，必须经过小程序开发者工具进行构建后才可以使用。
- 打开小程序终端执行npm init -y 然后安装对应的模块：npm install miniprogram-computed
- 但是下载的模块无法直接导入到小程序中，需要构建npm
- 构建 npm 的结果会创建一个新的目录 miniprogram_npm 把构建后的 npm 模块放到了这个目录之下，此时在小程序中便可以成功导入 npm 的模块包了。

自定义构建：

默认情况下项目目录的最外层是小程序的根目录，通过 project.config.json 可以指定小程序的根目录，这样做的好处是能够优化目录结构，更好的管理项目的代码

{
  "setting": {
    ...
    "packNpmManually": true,                      // 启用 npm 构建手动配置
    "packNpmRelationList": [       
      {
        "packageJsonPath": "./package.json",     //packNpmRelationList` 手动构建 npm 配置详情
        "miniprogramNpmDistDir": "./miniprogram" //miniprogramRoot` 自定义小程序的根目录
      }
    ],
    ...
  },
  "libVersion": "2.19.4",
  "miniprogramRoot": "miniprogram/",
  "appid": "wx3eb80995b7e84924",
  "projectname": "mpdemo",
}

自定义组件

小程序中自定义组件的结构和页面是一致的，包含4部分：
- .wxml：组件的布局结构
- .js组件的处理逻辑
- .json 组件的配置文件
- .wxss 组件的布局样式

创建组件

我们将组件放在独立的目录components当中，这个目录需要我们手动创建。

注册组件

页面注册页面注册是在使用组件的页面配置中通过usigComponents进行注册，只能在当前页面中使用注册的组件，如下代码所示：

{
  "usingComponents": {
    "authorization": "/components/authorization/index"
  }
}

//双标签
<authorization></authorization>

// 单标签
<authorization />

全局注册全局注册是在app.json中通过usingComponents对自定义组件进行注册，注册的组件可以在任意的页面中使用：

{
  "pages": [...],
  "window": {...},
  "usingComponents": {
    "authorization": "/components/authorization/index"
  },
  "sitemapLocation": "sitemap.json"
}

组件进阶

数据与属性

组件的属性由两部分构成

data：组件本身内部定义的数据
properties：通过组件属性从外部传入组件内部的数据

// components/authorization/index
Component({
  // 初始组件内部数据
  data: {
    message: '组件中初始的数据'
  },
  // 定义组件的属性，接收外部传入的数据
  properties: {
    isLogin: {
      type: Boolean,
      value: true,
    },
    tips: String,
  },
})

生命周期和方法

小程序的生命周期函数，通过lifetimes来定义，主要的生命周期函数有：

created：组件实例刚刚被创建，created生命周期被触发，但是该生命周期无法调用setData，这个方法一般为组件添加一些自定义属性字段。
attached：在组件完全初始化完毕、进入页面节点树后，attached 生命周期被触发。

// components/authorization/index.js
Component({
  data: {
    message: '组件中初始的数据',
  },
  properties: {
    isLogin: {
      type: Boolean,
      value: true,
    },
    tips: String,
  },

  // 组件生命周期
  lifetimes: {
    created() {
      // this.setData({message: '此时不能调用 setData'})
      // 为当前组件实例自定义属性 author
      this.author = 'itcast';
    },
    attached() {
      // 没有什么限制了，可以执行任意的操作
      this.setData({ message: '组件进入到页面节点了...' });
    },
  },
});

组件模板

小程序的组件模板其实就是插槽功能，通过在组件内部定义插槽位置,在组件内定义slot插槽，其实插槽就是个占位符号。下面对插槽做个使用说明：

    // 子组件
    <view class="container">
      <slot wx:if="{{isLogin}}"></slot>
      <text wx:else>{{message}}</text>
    </view>
    
    // 父组件里面进行占位
    <authorization is-login="{{true}}" tips="用户未登录">
      <view>这里的内容会填充到 slot 插槽的位置</view>
      <view>这里内容也会填充到 slot 插槽的位置</view>
    </authorization>

默认情况下，小程序在一个组件中只支持一个插槽，我们可以通过在组件中Component中的options属性里面的multipleSlots设置为true。在使用多插槽的时候我们可以通过name为插槽。

Vant组件在小程序里面的使用

    // 安装
    npm i @vant/weapp -S -production
    
    // 确保package.json文件的存在
    
    // 在app.json中全局引入Vant组件，在使用Vant组件的时候需要将小程序全局配置中的style去掉；
    {
      "usingComponents": {
        "van-button": "@vant/weapp/button/index"
      }
    }
    
    //

微信小程序第二天学习总结