重要提醒

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

1、微信开发者工具

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

2、es6 转 es5

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

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

关于 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 方法来获取组件实例:

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

5、组件路径问题

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

使用 Min 生成的项目,不管是微信小程序项目还是微信组件库项目,在使用 minui 库的组件时,都可以将组件的路径设置为 @minui/wxc-componentwxc-component 表示一个组件名)。以 wxc-toast 组件为例,示例如下:

<!-- index.wxp 或者 index.wxc 文件中使用 wxc-toast组件-->
<template>
  <view>
    <wxc-toast
            class="J_toast"
            text="Hello World"></wxc-toast>
    <button bindtap="showToast">调用 show() 方法显示</button>
  </view>
</template>

<script>
export default {
  config: {
    navigationBarTitleText: 'demo页面',
    usingComponents: {
      'wxc-toast': '@minui/wxc-toast'
    }
  },
  data: {},
  showToast() {
    let $toast = this.selectComponent(".J_toast")
    $toast && $toast.show()
  }
}
</script>

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

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

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

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

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

|—— dist                            编译后的文件目录,微信开发者工具中指定的目录
|    |—— components
|    |—— packages                    minui 组件的安装路径
|    |    |—— @minui
|    |    |    |—— wxc-icon
|    |    |    |—— wxc-toast
|    |    |    |    |—— dist
|    |    |    |    |    |—— index.js
|    |    |    |    |    |—— index.json
|    |    |    |    |    |—— index.wxml
|    |    |    |    |    |—— index.wxss
|    |—— pages                        编译后的页面,index页面的路径是 pages/index/index
|    |    |—— index
|    |    |    |—— index.js
|    |    |    |—— index.json
|    |    |    |—— index.wxml
|    |    |    |—— index.wxss
|—— node_modules
|—— src                                项目源码目录
|    |—— components
|    |—— pages
|    |    |——index
|    |    |    |——index.wpy
|    |—— app.wpy
|—— package.json
└── min.config.json

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

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

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

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