nutui小程序开发教程

NutUI 是一套基于 Vue.js 的小程序 UI 库，由有赞团队打造。它提供了一些常用的 UI 组件，例如按钮、表单、模态框等等，简化了开发者在小程序中搭建界面的时间和难度。NutUI 的使用非常灵活，支持按需引入，使得项目的冗余代码减小了很多。

NutUI 的基本使用

1. 安装 NutUI

可以通过 npm 安装 NutUI，具体步骤如下:

```

npm install nutui --save

```

2. 引入 NutUI 样式文件

将 NutUI 的样式文件 `nutui.css` 导入到项目的 app.wxss 中。

```css

/* app.wxss */

@import "path/to/nutui.min.css";

```

3. 引入 NutUI 组件

在需要使用 NutUI 的页面中，通过 `usingComponents` 属性导入需要使用的组件。

```json

/* page.json */

{

"usingComponents": {

"n-button": "nutui/dist/button/index"

}

}

```

4. 使用 NutUI 组件

在页面中引用 NutUI 的组件，并使用组件提供的属性和事件来实现需求。

```html

```

NutUI 的组件与属性

NutUI 组件分类:

1. 基础组件

Button、Icon、Image、Layout、Cell 等。

`Button` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| ------ | ------- | ------ | ------------ |

| type | String | default | 按钮类型 |

| size | String | normal | 按钮大小 |

| plain | Boolean | false | 是否显示边框 |

```html

```

`Icon` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| ------ | ------- | ------ | -------- |

| name | String | - | 图标名称 |

| size | String | 12px | 图标大小 |

```html

```

`Image` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| ---------- | ------- | ------ | -------- |

| src | String | - | 图片链接 |

| mode | String | aspectFit | 图片裁剪、缩放的模式 |

| lazy-load | Boolean | false | 图片懒加载 |

| show-menu | Boolean | false | 长按图片是否显示菜单 |

| error-src | String | - | 加载失败时显示的图片地址 |

| default-src| String | - | 默认的图片地址 |

```html

```

2. 表单组件

Radio、Checkbox、Input、Switch、Picker、Uploader 等。

`Input` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| --------- | ------- | ------ | ------------ |

| type | String | text | input 的类型 |

| value | String | - | 输入框的值 |

| placeholder | String | - | 输入框的提示 |

| disabled | Boolean | false | 是否禁用 |

| maxlength| Number | 140 | 最大输入长度 |

| focus | Boolean | false | 是否聚焦 |

| password | Boolean | false | 是否是密码框 |

```html

```

`Picker` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| --------- | ---------------- | ------ | -------- |

| value | Array | - | 当前选择的值 |

| range | Array/Object | [] | 可选项 |

| range-key | String | - | 用于渲染每一列的 Key 值 |

| title | String | - | 选择器标题 |

| disabled | Boolean | false | 是否禁用 |

| confirm-text | String | 确定 | 确认按钮文本 |

| cancel-text | String | 取消 | 取消按钮文本 |

| show-toolbar | Boolean | true | 是否展示工具栏 |

| accordion | Boolean | false | 保持只展开一个子级 |

| prop-name | Object(String) | null | 高亮显示的项的属性名称 |

```html

```

3. 操作反馈组件

Toast、Dialog、Modal、ActionSheet 等。

`Toast` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| --------- | ------- | ------ | --------- |

| show | Boolean | false | 是否显示 |

| message | String | - | 提示内容 |

| type | String | default | 提示类型 |

| duration | Number | 2000 | 持续时间，单位为毫秒 |

```html

```

`Modal` 组件属性:

| 属性名 | 类型 | 默认值 | 说明 |

| ----------- | ------- | ------ | -------------- |

| show | Boolean | false | 是否显示 |

| title | String | - | 弹框标题 |

| message | String | - | 提示内容 |

| show-cancel | Boolean | true | 是否显示取消按钮 |

| cancel-text | String | 取消 | 取消按钮文本 |

| show-confirm| Boolean | true | 是否显示确认按钮 |

| confirm-text| String | 确认 | 确认按钮文本 |

```html

```

NutUI 的开发原理

NutUI 是一款基于 Vue.js 的小程序 UI 库，它的大部分组件都是由 Vue 组件构建实现的。

在小程序中使用 Vue，需要使用 `mpvue` 进行编译打包，`mpvue` 是一个支持小程序开发的 Vue.js 框架，它支持大部分的 Vue.js 语法，例如组件、指令、组合式 API 等等，开发者可以基于 `mpvue` 和 NutUI 快速地搭建一套小程序 UI 界面。

NutUI 整体的开发思路是先开发 UI 组件库，然后再将 UI 组件库拓展到小程序平台。这种开发思路保证了组件库的独立性和高复用性，同时也可以使拓展到小程序平台时开发的速度和效率更高。如图所示，NutUI 的开发流程如下:


在 NutUI 的组件库开发阶段，主要是基于 Vue.js 的开发，开发者对组件的样式、逻辑和交互进行优化，结合常见的场景需求进行功能的开发。在 NutUI 将组件库拓展到小程序平台后，主要是与小程序的生命周期和事件进行对接，例如重写生命周期函数和监听事件等等。最终实现一套在小程序中流畅使用和易于扩展的 UI 组件库。

NutUI 在小程序中的