nutui-uniapp-components

基于NutUI二次封装的跨平台组件库，支持H5和原生小程序。

安装

方法一：通过npm安装

npm install nutui-uniapp-components --save

方法二：本地引入（开发调试用）

1. 将组件库项目复制到您的小程序项目同级目录

2. 在小程序项目的package.json中添加以下依赖：

{
  "dependencies": {
    "nutui-uniapp-components": "file:../nutui-uniapp-simple-demo-main"
  }
}

3. 运行安装命令：

npm install

发布指南

如果您是项目维护者，想要发布新版本到npm，请按照以下步骤操作：

1. 确保您已经登录npm账号：

npm login

2. 更新package.json中的版本号（遵循语义化版本规范）：

{
  "version": "1.0.0" // 更新为新的版本号
}

3. 构建组件库：

npm run build:lib

4. 发布组件库：

npm publish

注意：首次发布需要确保包名在npm上未被占用。如果发布失败，可能需要修改package.json中的name字段。

引入组件

H5环境引入

全局引入

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import NutUIComponents from 'nutui-uniapp-components';
import 'nutui-uniapp/styles/index.scss';
import 'nutui-uniapp-components/lib/style.css';

const app = createApp(App);
app.use(NutUIComponents);
app.mount('#app');

局部引入

<template>
  <MyButton type="primary">按钮</MyButton>
</template>

<script setup>
import { MyButton } from 'nutui-uniapp-components';
</script>

原生微信小程序引入

以下是在原生微信小程序中引入组件库的完整指南：

安装依赖

npm install nutui-uniapp-components --save

全局引入（推荐）

1. 在小程序的根目录创建components文件夹，并创建index.js文件：

// components/index.js
const { MyButton } = require('nutui-uniapp-components/miniprogram');

module.exports = {
  MyButton
};

2. 在app.js中引入组件：

// app.js
App({
  // ...其他配置
  globalData: {
    // ...
  },
  onLaunch: function() {
    // ...
  }
});

3. 在需要使用组件的页面的JSON配置中引入：

// pages/index/index.json
{
  "usingComponents": {
    "my-button": "nutui-uniapp-components/miniprogram/index#MyButton"
  }
}

局部引入

在需要使用组件的页面中直接引入：

1. 页面JSON配置：

// pages/index/index.json
{
  "usingComponents": {
    "my-button": "nutui-uniapp-components/miniprogram/index#MyButton"
  }
}

2. 页面WXML使用：

<!-- pages/index/index.wxml -->
<my-button type="primary" bind:click="handleClick">点击按钮</my-button>

3. 页面JS事件处理：

// pages/index/index.js
Page({
  data: {
    // ...
  },
  handleClick: function() {
    wx.showToast({
      title: '按钮被点击',
      icon: 'success'
    })
  }
})

注意事项

1. 原生微信小程序不直接支持Vue组件，上述方式是通过小程序的自定义组件机制实现的。
2. 部分复杂组件可能需要额外的适配工作。
3. 推荐使用uni-app框架来开发跨平台应用，以获得更好的开发体验和兼容性。
4. 组件的属性和事件与H5版本保持一致，详情请参考组件文档。

uni-app项目中使用

如果您使用uni-app框架开发，可以按照以下方式引入：

全局引入

在main.js中引入组件库：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import NutUIComponents from 'nutui-uniapp-components';
import 'nutui-uniapp/styles/index.scss';
import 'nutui-uniapp-components/lib/style.css';

const app = createApp(App);
app.use(NutUIComponents);
app.mount('#app');

局部引入

在需要使用组件的页面中引入：

<template>
  <MyButton type="primary" @click="handleClick">按钮</MyButton>
</template>

<script setup>
import { MyButton } from 'nutui-uniapp-components';

function handleClick() {
  console.log('按钮被点击了');
}
</script>

组件列表

MyButton

扩展自NutUI的Button组件，增加了自定义属性和事件。

属性

| 名称 | 类型 | 默认值 | 说明 | |------|------|--------|------| | text | string | '按钮' | 按钮文本 | | type | string | 'default' | 按钮类型：primary, success, warning, danger, info, default | | size | string | 'medium' | 按钮大小：large, medium, small, mini | | disabled | boolean | false | 是否禁用 | | loading | boolean | false | 是否显示加载状态 |

事件

| 名称 | 说明 | 回调参数 | |------|------|----------| | click | 点击事件 | event: Event |

示例

<template>
  <MyButton
    type="primary"
    size="large"
    :loading="loading"
    @click="handleClick"
  >
    点击按钮
  </MyButton>
</template>

<script setup>
import { ref } from 'vue';
import { MyButton } from 'nutui-uniapp-components';

const loading = ref(false);

function handleClick() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
}
</script>

兼容性

支持以下平台：

• H5
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序

注意事项

1. 确保已安装nutui-uniapp依赖
2. 使用前请参考NutUI官方文档了解基础组件的使用方法
3. 小程序环境下可能需要额外配置

开发

# 安装依赖
pnpm install

# 运行示例
pnpm run dev:h5

# 打包组件库
pnpm run build:lib

发布

npm publish