今天来给大家分享一下 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
文章来源：https://www.toymoban.com/news/detail-845518.html
2. 在页面里使用文章来源地址https://www.toymoban.com/news/detail-845518.html
<ant-button type="default" @tap="handleTap">次要按钮</ant-button>到了这里，关于Ant Design Mini 在小程序中的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
