如何在 uniapp 中使用微信小程序原生 UI 库，比如 ant-design-mini/weui?

转自 https://ask.dcloud.net.cn/question/206730

如何在 uniapp 中使用微信小程序原生 UI 库，比如 ant-design-mini/weui?

原生UI 库是指只适配原生小程序写法的 UI 库，在 uniapp 中需要做简单调整， ant design 组件库提供的 使用说明

这里举例 uni-app如何接入 weui：

1. 在 uniapp 中创建 wxcmoponents 文件夹，表示内部为原生组件
2. cd wxcomponets && npm init -y && npm i weui-miniprogram 安装 UI 库，在微信小程序工具里 “工具”菜单 --> “构建 npm”
3. 复制 weui-miniprogram/weui-wxss/dist/style/weui.wxss 到项目 style 目录，并改名为 weui.css，在 app.vue 或者 main.js 中导入，这个是 weui 全局样式
4. 在使用 weui 组件库的页面引入，参考下面 pages.json，下面代码表示在微信里引入了 ant-button 和 mp-dialog

 "pages": [{  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "uni-app",  
        "usingComponents": {  
          // #ifdef MP-WEIXIN  
          "ant-button": "/wxcomponents/miniprogram_npm/antd-mini/Button/index",  
          "mp-dialog": "/wxcomponents/miniprogram_npm/weui-miniprogram/dialog/dialog"  
          // #endif  
        }  
      }  
    },

1. 在页面中就可以正常使用 ant-design/weui 组件了

<template>  
  <view>  
    <view>123</view>  
   <ant-button type="default" danger icon="ForbidFill">带图标按钮</ant-button>  

    <mp-dialog title="test" :show="true" @buttontap="tapDialogButton" :buttons="buttons">  
        <view>test content</view>  
    </mp-dialog>  
  </view>  
</template>  

<script>  
  export default{  
    data(){  
      return {  
         buttons: [{text: '取消'}, {text: '确认'}]  
      }  
    },  
    methods:{  
      tapDialogButton(){  
        console.log('tap');  
      }  
    }  
  }  
</script>

效果图如下：

参考 weui 使用说明