使用wepy开发小程序-2|快速开发之引入蘑菇街的UI组件库

简单的看了下，蘑菇街的UI发现封装的大部分都和我要做的项目需求吻合，加之wepy缺少对wx原生组件的支持，所以这次就打算为项目引入这套UI
【指路】https://github.com/jimmyrogue/wepy-X-minui
之前我们简单的介绍了一下wepy，所以这里我们选择在已有项目中使用minui。
【文档参考地址】
https://meili.github.io/min/docs/min-cli/third-project/tutorial/with-wepy.html

（一）如何引入组件库

其实仔细看，关于怎么在现有的项目中引入组件，官方其实写的没有很清楚，那么我们就先摸着石头过河吧。先从是用一个简单的对话框（wxc-dialog）开始吧。
我是怎么做的呢？
首先，在项目根目录下添加一个配置文件min.config.json

{
  "compilers": {
    "babel": {
      "sourceMaps": "inline",
      "presets": [
        "env"
      ],
      "plugins": [
        "syntax-export-extensions",
        "transform-class-properties",
        "transform-decorators-legacy",
        "transform-export-extensions"
      ]
    }
  }
}

这一点倒是没错，但是github中所说的：

min install @minui/wxc-loading

这一步却没法实现，毕竟我们没有安装过min的命令行
那么我们就先安装下min命令行吧

npm install -g @mindev/min-cli

安装完成之后，由于我们需要的是toast组件，所以还需要继续安装对应的组件，即：

min install @minui/wxc-toast 
//安装路径我是选择的默认的，好像必须要安装到dist

如果在安装过程中出现

npm WARN checkPermissions Missing write access
//如果上面的报错出现n个并且，你的min组件没有成功的生成js文件

试着按照我的方法做一下
如果你是使用的vs code先关了吧，然后删除项目目录下的node_modules
使用系统的命令行工具，就别使vs code的了

npm install //就别使用cnpm了

反正我是这样解决了……不知道啥原因折腾了一上午……

(如何使用组件)

一切准备工作都已经完成了，那么接下来我们就需要知道组件该如何使用

即使你在src目录下的index中写代码，编译后也是可以看到效果的。
那么我们就来看下代码是如何书写的吧(注：只是部分代码片段，使用时请放入适当位置)

<template>
  <view class="container">
    <wxc-toast
        class="J_toast"
        text="Hello World"></wxc-toast>
    <button bindtap="tap">调用 show() 方法显示</button>
  </view>
</template>
<script>
import Toast from 'wepy-com-toast'
config = {
      navigationBarTitleText: 'test',
      usingComponents: {
        'wxc-dialog': '../../packages/@minui/wxc-dialog/dist/index',
        'wxc-toast': '../../packages/@minui/wxc-toast/dist/index'
      }
    }
     tap (url) {
          let $toast = this.$wxpage.selectComponent('.J_toast')
        $toast && $toast.show()
      },  
</script>

调用蘑菇街组件.png

其实也不难，偏偏就在一个报错那儿卡了一上午。
报错解决方案：
1-删掉node_modules 重新使用npm install安装（之前我使用的是cnpm安装的）
2-如果不行的话，重复上面的步骤，去系统的命令行安装。