免费试用

跨平台小程序在线开发工具,用做网页的技术做小程序,兼容微信、支付宝、抖音、快手、百度等主流小程序平台!

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 的开发流程](https://raw.githubusercontent.com/jdf2e/nutui/master/doc/img/nutui.svg)

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

NutUI 在小程序中的


相关知识:
本地百度小程序开发运营
本地百度小程序是一种基于百度生态系统的轻量级应用,它可以在用户的手机或其他设备上运行。在本地百度小程序开发运营的过程中,首先要了解它的原理和详细介绍。我将为你详细介绍本地百度小程序的原理及其开发运营。一、原理介绍1. 本地百度小程序的定义:本地百度小程序是
2023-08-23
安庆超市电商小程序开发多少钱啊
电商小程序是近年来越来越受欢迎的一种电商平台形式。安庆超市作为一家实体超市,也需要跟上时代潮流,开发自己的电商小程序,以满足用户的购物需求。下面我们就来介绍一下安庆超市电商小程序开发的原理以及开发所需的费用情况。安庆超市电商小程序开发的原理:1. 程序架构
2023-08-09
uniapp 公众号小程序开发
Uniapp是由大名鼎鼎的DCloud公司开发的一款为多个平台生成应用的开发框架。它可以一次性编写代码,然后通过uniapp工具打包成为支持各种平台的应用,包括iOS、Android、H5、微信小程序和支付宝小程序 等多种平台。使用uniapp可以避免针对
2023-08-09
java开发微信小程序源代码怎么用
Java开发微信小程序需要用到微信小程序开发工具、微信开发者工具以及Java代码开发工具,下面我将分别介绍这三个工具的使用方式,并详细介绍Java开发微信小程序的原理。一、微信小程序开发工具微信小程序开发工具是用于开发微信小程序的官方工具,可以用于开发、调
2023-08-09
excel vba开发小程序
Excel VBA是Excel中嵌入的一种编程语言,它是一个强大的编程工具,拥有许多功能和特性,可以用来开发小程序或自定义功能,增强Excel的功能和使用效率。下面我们将详细介绍Excel VBA开发小程序的原理和步骤。一、VBA基础在使用VBA开发小程序
2023-08-09
cocos 开发头条小程序
Cocos开发头条小程序是利用Cocos Creator开发工具创建原生小程序项目,在其基础上使用JavaScript语言编写小程序业务代码和逻辑,最终生成一个小程序应用程序。Cocos Creator是Cocos官方开发的一款可视化开发工具,提供了多种游
2023-08-09
app开发小程序应用
随着移动互联网的迅猛发展,手机app已成为人们不可或缺的应用工具。而在近几年,小程序应用也开始崛起,受到了用户的广泛关注。那么,什么是小程序应用?小程序应用又是怎么开发的呢?小程序应用是一种轻量级的应用,可以在不需要下载和安装的情况下直接使用。这种应用提供
2023-08-09
java代码封装exe
Java代码封装成可执行EXE文件的原理和详细介绍Java编程语言是跨平台的,即一次编写,到处运行。这归功于Java虚拟机(JVM),它允许Java代码在不同的操作系统和设备上运行。然而,有时我们可能需要将Java应用程序封装成一个独立的可执行文件(例如E
2023-05-26
小程序开发工具字体放大快捷键
小程序开发者工具是微信团队针对小程序开发推出的一款集成化开发工具。在小程序开发过程中,开发者经常需要调整代码编辑器界面的字体大小,以适应自己的视觉需求。而小程序开发者工具通过提供快捷键来实现快速放大代码编辑器字体大小的功能,从而提高开发效率。小程序开发者工
2023-05-26
小程序开发工具像素多大
小程序开发工具是一款为小程序开发者提供开发、调试、模拟器等功能的软件,可以让开发者更加方便快捷地进行小程序开发。在使用该工具时,很多人可能会关注到一个问题:小程序开发工具的像素到底有多大?这个问题其实涉及到了几个方面的知识:一、设备像素与逻辑像素在回答小程
2023-05-26
微信小程序网盘开发工具
微信小程序网盘开发工具是一种基于微信小程序开发框架的云存储应用开发工具。它可以帮助开发者快速开发出具备云存储功能的微信小程序。 微信小程序网盘开发工具的原理主要是以微信小程序原生开发框架为基础,使用微信小程序提供的云开发平台,再结合云存储服务(如腾讯云、阿
2023-05-26
微信小程序开发工具缓存清空不掉
微信小程序开发工具是一个非常实用的工具,可以帮助开发者快速地进行小程序开发和调试。然而,在使用微信小程序开发工具的过程中,有些开发者可能会遇到一个问题,即无法清空开发工具的缓存。本文将向大家介绍这个问题的原理和详细解决方案。首先,让我们来了解一下开发工具的
2023-05-26