Min 结合 Wepy

本节介绍在 wepy 项目中使用 Min，即在 wepy 项目中使用 minui 组件。准备工作如下：

1、安装 Min

$ npm install -g @mindev/min-cli

如已安装 Min，则用 min -v 命令查看 min 的版本号，Min 结合 wepy 使用要求 min 的版本在 1.0.4 及以上。

2、安装 wepy

$ npm install wepy-cli -g

3、创建 wepy 项目myproject

$ wepy new myproject

wepy的官方文档请?这里：wepy 官方文档

4、了解 MinUI 组件库

安装 MinUI 组件

下面开始介绍在 wepy 项目中使用 Min，主要是在 wepy 项目中使用 MinUI 组件，此处以 MinUI 组件库的 wxc-toast 组件为例。

1、新建 min.config.json配置文件

Min 的执行依赖于配置文件，在项目的根目录下新建 min.config.json 文件。由于 wepy 要求在微信开发者工具中关闭 es6=>es5 功能，因此在 min.config.json 中需配置 babel，用于在 min 编译组件之后生成 es5 代码。babel 的配置如下所示：

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

2、安装 wxc-toast 组件：

$ min install @minui/wxc-toast

执行命令后，会提示 请设置安装路径 (dist/packages)，默认的路径为 dist/packages，可输入路径也可直接回车使用默认路径。

wepy 项目编译后的文件保存在 dist 目录下，minui 组件的安装路径应该也设置在 dist 目录的某个路径下，如果设置在 dist 以外的路径中，在微信开发者工具中会访问不到组件。

安装 wxc-toast 组件后，在 min.config.json 文件中会生成组件编译后的保存路径，如下所示：

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

npm.dest 即为组件编译后的保存路径。打开 dist/packages 文件夹查看编译后的 wxc-toast 组件，可发现编译后的组件为 es5 代码。至此，min.config.json 文件配置完毕。

3、在 wpy 文件中使用 wxc-toast

在 config 字段中配置 usingComponents 字段，wxc-toast 组件的路径是 dist 目录下 pages/index/index.js 相对于 wxc-toast 组件的路径。

使用wxc-toast组件的示例如下：

<!-- index.wpy -->
<style lang="less">
</style>
<template>
  <view class="container">
    <wxc-toast
        class="J_toast"
        text="Hello World"></wxc-toast>
    <button bindtap="showToast">调用 show() 方法显示</button>
  </view>
</template>
<script>
  import wepy from 'wepy'
  import testMixin from '../mixins/test'
  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'test',
      usingComponents: {
        'wxc-toast': '../../packages/@minui/wxc-toast/dist/index'
      }
    }
    components = {}
    mixins = [testMixin]
    data = {}
    computed = {}
    methods = {
      showToast() {
        let $toast = this.$wxpage.selectComponent('.J_toast')
        $toast && $toast.show()
      }
    }
    events = {}
    onLoad() {}
  }
</script>

该示例中，调用了 wxc-toast 组件的 show() 方法。值得注意的是，我们不能直接用 this.selectComponent 来获取 toast 的实例，因为 wepy 的 Page 是内部封装过的，没有 selectComponent 方法，用 this.$wxpage 可获取页面的真实 Page 对象实例，该实例中有selectComponent方法。对于暴露出组件方法的一些组件，比如 loading, dialog等组件，在 wepy 中都应通过这种方法来获取组件实例。