免费试用

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

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 在小程序中的


相关知识:
web前端开发和小程序开发的区别和联系
Web前端开发和小程序开发是互联网领域中两个不同的开发方向,在未来的发展中都将具有广泛的应用前景。本文将从理论上详细介绍这两种开发的区别和联系。一、基本概念Web前端开发:Web前端开发是构建Web页面或应用程序的过程,一般包括HTML、CSS、JavaS
2023-08-09
ui开发微信小程序
微信小程序是一种基于微信生态的应用,它能够在微信内直接使用,而无需下载安装。UI开发是微信小程序开发中的重要环节,下面来详细介绍一下。一、小程序组成微信小程序由三个部分组成:1.视图(View):微信小程序的界面使用 WXML 和 WXSS 两种语言进行开
2023-08-09
qq小程序什么语言开发
QQ小程序是腾讯推出的一项轻应用功能,类似于微信小程序,可以在QQ中直接运行,不需要下载安装。那么,QQ小程序采用什么语言开发呢?QQ小程序采用的是Web技术开发,具体来说,它使用的是H5、CSS3、JavaScript等前端技术。QQ小程序提供了一套基础
2023-08-09
php开发微信小程序公司
微信小程序是腾讯公司开发的一种全新的应用程序,它可以在微信内部直接运行,不需要下载安装。作为一种轻量级应用,小程序开发迅速成为了近年来的一个热门话题,同时,也成为了开发者的新宠。php是一种非常流行的编程语言,融合了许多语言的特点,并且非常容易上手。许多p
2023-08-09
bmob后端云开发小程序
Bmob后端云是一种基于云的移动应用后端服务平台,提供了数据存储、消息推送、用户管理、文件存储、云函数等丰富的功能,帮助开发者快速构建高质量的应用。同时,Bmob还支持多种语言的SDK,适用于多种开发场景;其中,小程序是近年来非常流行的应用之一。下面将对如
2023-08-09
flash如何打包exe
在本教程中,我们将学习如何将Flash项目打包成一个独立的EXE可执行文件,以便在没有安装Adobe Flash Player的计算机上播放。我们将介绍两种方法:使用Adobe Animate/Flash Professional和第三方工具。方法一:使用
2023-05-26
浙江教育类小程序开发工具
浙江教育类小程序开发工具,是由浙江省教育厅推出的一种小程序开发工具,主要用于教育领域的应用开发和推广。该工具的优点在于简单易用、多功能、免费开放等。下面我将从工具原理和详细介绍两个方面来对该工具进行分析和描述。工具原理:浙江教育类小程序开发工具是一种基于微
2023-05-26
微信小程序用什么开发工具开发的
微信小程序是一种轻量级的应用程序开发框架,小程序的开发工具基于JavaScript、WXML和WXSS语言编写。微信小程序开发工具是由微信官方推出的一款开发工具,使用微信小程序开发工具可以进行小程序的开发和调试,它的主要功能如下:1. 代码编辑器:用于编辑
2023-05-26
微信小程序开发工具插件
微信小程序是一种新型的应用程序,有着快速小巧、运行稳定等特点。它的开发使用的是WXML,WXSS,JSON和JavaScript。而微信小程序开发工具插件则是扩展微信小程序开发工具功能的一种方式。那么,微信小程序开发工具插件是什么?它是一种可以扩展微信小程
2023-05-26
微信小程序开发工具及例子介绍
微信小程序是一个轻量级的应用程序,仅占用少量的手机空间,易于下载和使用。小程序不需要下载安装即可打开,同时也不需要在桌面上占用位子。微信小程序拥有与APP类似的交互体验和UI展示能力,但是却不需要占用用户很多空间,运营商流量和存储资源,适合用于快速、简单、
2023-05-26
微信小程序官方开发工具winx版本p下载
微信小程序是近年来出现的一种全新的移动应用程序,在开发过程中广受欢迎。微信小程序为开发者提供了一个独立的平台和完整的开发生态系统,开发者能够在微信中开发并发布应用,可以从微信生态系统中获得大量的用户。本文主要介绍微信小程序官方开发工具winx版本p的下载,
2023-05-26
小程序axios
小程序是一种轻量级的应用程序,它在微信、支付宝等社交平台上运行。小程序的开发语言是JavaScript,因此很多前端框架都可以用于小程序的开发。其中,axios是一个非常流行的网络请求库,它提供了简单易用的API,可以方便地发送HTTP请求。本文将介绍小程
2023-04-06