Ant Design Mini 在小程序中的使用

今天来给大家分享一下 Ant Design Mini 在原生小程序中或者uniapp中的使用

目录

在原生微信小程序中使用

在 uni-app 中使用

在支付宝小程序中引用

在微信小程序中引用

在原生微信小程序中使用

1. 安装依赖

npm i antd-mini --save

2. 构建 npm

安装好依赖以后，点击开发者工具中的菜单栏：工具 --> 构建 npm

3. 在项目中引用组件

修改页面配置的 usingComponents 字段, 使用 antd-mini 的组件。

配置时需要注意路径大小写和实际组件一致，否则可能引发报错。

{ 
    "usingComponents": { 
        "ant-button": "antd-mini/Button/index" 
    } 
}

4. 在页面中使用即可

<div> <ant-button type="primary" bind:tap="handleTap"> 主要按钮 </ant-button> </div>

在 uni-app 中使用

在支付宝小程序中引用

在项目路径下新建路径 mycomponents（必须是这个名称，不可修改），并在此目录下安装 antd-mini 依赖

参考命令：

mkdir mycomponents

cd mycomponents

安装依赖

npm init -y

npm i antd-mini --save

操作完成后，项目结构应该是类似这样的：

依赖安装完成以后，可以修改 page.json，在 page.style 配置下新增 usingComponents。 配置时需要注意路径大小写和实际组件一致，否则可能引发报错。

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "uni-app",
        // #ifdef MP-ALIPAY
        "usingComponents": {
            "ant-button": "/mycomponents/node_modules/antd-mini/es/Button/index"
        }
        // #endif
    }
}

在微信小程序中引用

在项目路径下新建路径 wxcomponents（必须是这个名称，不可修改），并在此目录下安装 antd-mini 依赖

参考命令：

mkdir wxcomponents

cd wxcomponents

安装依赖

npm init -y

npm i antd-mini --save

操作完成后，项目结构应该是类似这样的：

依赖安装完成后，在 uni-app 里点击 运行 > 运行到小程序模拟器 > 微信小程序开发者工具。 将项目编译为微信小程序

使用微信小程序开发者工具打开 uni-app 编译的微信小程序。 然后在微信小程序开发者工具中，点击 工具 > 构建 npm

修改 page.json，在 page.style 配置下新增 usingComponents。引用 wxcomponents/miniprogram_npm 下面的组件。 配置时需要注意路径大小写和实际组件一致，否则可能引发报错。

// #ifdef MP-WEIXIN
"usingComponents": {
    "ant-button": "/wxcomponents/miniprogram_npm/antd-mini/Button/index"
},
// #endif

2. 在页面里使用

<ant-button type="default" @tap="handleTap">次要按钮</ant-button>