重要提醒

在 Min 的使用过程中有一些要注意的点，本节将这些点总结如下：

1、微信开发者工具

min 环境中微信开发者工具的版本和基础库版本要求：

  • 微信开发者工具版本要求： v1.01.1711020 及以上
  • 基础库版本要求： 1.6.3 及以上
  • 微信版本要求：6.5.16及以上2、es6 转 es5

Wepy 要求在开发者工具中关闭es6 => es5 功能，而 min 编译出来的文件默认为 es6 代码，这就导致在 wepy 项目中无法使用 min 组件。Min cli 在 1.0.4 版本后集成了babel 插件，可编译出 es5 代码，在 wepy 项目中使用。只需在 min.config.json 增加 babel 的配置，具体配置如下所示：

  1. {
  2.   "compilers": {
  3.     "babel": {
  4.       "sourceMaps": "inline",
  5.       "presets": [
  6.         "env"
  7.       ],
  8.       "plugins": [
  9.         "syntax-export-extensions",
  10.         "transform-class-properties",
  11.         "transform-decorators-legacy",
  12.         "transform-export-extensions"
  13.       ]
  14.     }
  15.   }
  16. }

关于 wepy 与 min 的结合使用请参考 使用场景 的 结合 wepy

3、项目浏览目录

Min 工具生成的项目，编译时会根据 min.config.json 文件中的 dest 字段创建编译文件的存放目录，创建项目时默认编译之后的文件是在根目录的 dist文件夹下，如果在创建项目时使用了自定义的文件夹，则编译后的文件夹是存放在该目录下的。在微信开发者工具中浏览项目时应选择编译后的文件存放目录。

4、wepy 中调用 selectComponent 方法

MinUI 组件库中诸如 toast, loading, dialog等组件，都有对外暴露组件方法，在页面中可通过调用 this.selectComponent 来获取组件的实例，从而调用组件方法。wepy 项目中的 Page 对象并非原生的，而是经过 wepy 封装过后的对象，并没有 selectComponent 方法，解决办法是通过调用 this.$wxpage 获取原生的 Page 对象，用该对象调用 selectComponent 方法来获取组件实例：

  1. /* 以toast 组件为例*/
  2. const $toast = this.$wxpage.selectComponent('.J_toast') // .J_toast 为toast组件的类选择器
  3. $toast.show()

5、组件路径问题

经常会有开发者搞不清组件的路径问题，在此针对不同的项目作一个组件路径分析。

  • Min 工具生成的项目。使用 Min 生成的项目，不管是微信小程序项目还是微信组件库项目，在使用 minui 库的组件时，都可以将组件的路径设置为 @minui/wxc-component（wxc-component 表示一个组件名）。以 wxc-toast 组件为例，示例如下:
  1. <!-- index.wxp 或者 index.wxc 文件中使用 wxc-toast组件-->
  2. <template>
  3.   <view>
  4.     <wxc-toast
  5.             class="J_toast"
  6.             text="Hello World"></wxc-toast>
  7.     <button bindtap="showToast">调用 show() 方法显示</button>
  8.   </view>
  9. </template>
  11. <script>
  12. export default {
  13.   config: {
  14.     navigationBarTitleText: 'demo页面',
  15.     usingComponents: {
  16.       'wxc-toast': '@minui/wxc-toast'
  17.     }
  18.   },
  19.   data: {},
  20.   showToast() {
  21.     let $toast = this.selectComponent(".J_toast")
  22.     $toast && $toast.show()
  23.   }
  24. }
  25. </script>

上述示例中，wxc-toast 组件的路径为 @minui/wxc-toast 。

  • wepy 项目。Wepy 项目是需要编译打包的，打包之后的文件是在根目录的dist文件夹下，dist 文件夹是微信开发者工具指定的目录。安装 minui 的组件时，min 会将组件安装在开发者设置的安装路径下。

wepy 项目中，minui 组件的安装路径应该设置在 dist 文件下，因为最终在微信开发者工具中打开的目录是 dist 文件夹，如果将组件的安装路径设置在 dist 目录外，并且在页面中使用了组件，则在微信开发者工具中会报错，因为没有该路径。

在页面中使用 minui 组件时，dist 目录下页面文件相对于组件文件的路径即为组件的路径。

为方便理解，用一个示例说明一下。首先来看一个安装了 wxc-toast 组件并且经过 wepy 编译过后的工程目录结构：

  1. |—— dist                            编译后的文件目录，微信开发者工具中指定的目录
  2. |    |—— components
  3. |    |—— packages                    minui 组件的安装路径
  4. |    |    |—— @minui
  5. |    |    |    |—— wxc-icon
  6. |    |    |    |—— wxc-toast
  7. |    |    |    |    |—— dist
  8. |    |    |    |    |    |—— index.js
  9. |    |    |    |    |    |—— index.json
  10. |    |    |    |    |    |—— index.wxml
  11. |    |    |    |    |    |—— index.wxss
  12. |    |—— pages                        编译后的页面，index页面的路径是 pages/index/index
  13. |    |    |—— index
  14. |    |    |    |—— index.js
  15. |    |    |    |—— index.json
  16. |    |    |    |—— index.wxml
  17. |    |    |    |—— index.wxss
  18. |—— node_modules
  19. |—— src                                项目源码目录
  20. |    |—— components
  21. |    |—— pages
  22. |    |    |——index
  23. |    |    |    |——index.wpy
  24. |    |—— app.wpy
  25. |—— package.json
  26. └── min.config.json

在这个工程中，pages/index/index.wepy 页面中使用 wxc-toast 组件时的路径应该是：

  1. usingComponents: {
  2.   'wxc-toast': '../../packages/@minui/wxc-toast/dist/index'
  3. }

是 dist/pages/index/index.js 文件相对于 dist/packages/@minui/wxc-toast/dist/index.js 文件的相对路径。

  • 已有的原生小程序项目。已有的原生小程序项目使用 minui 组件，组件的路径就是页面文件相对于组件文件的相对路径。