介绍

基本示例

这里有一个 WePY 组件的示例：

  1. <template>
  2.     <button v-on:click="count++">You clicked me {{ count }} times.</button>
  3. </template>
  5. <script>
  6.   import wepy from '@wepy/core'
  8.   wepy.component({
  9.     data: {
  10.       count: 0
  11.     }
  12.   })
  13. </script>

组件是可复用的 WePY component 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 wepy.page 创建的页面实例中，把这个组件作为自定义元素来使用：

  1. <config>
  2. {
  3.   "usingComponents": {
  4.     "button-counter": "../components/button-counter"
  5.   }
  6. }
  7. </config>
  9. <template>
  10.   <div class="page-a">
  11.     <div>{{ text }}</div>
  12.     <button-counter></button-counter>
  13.   </div>
  14. </template>
  16. <script>
  17.   import wepy from '@wepy/core'
  19.   wepy.page({
  20.     text: 'hello'
  21.   })
  22. </script>

使用组件

与 WePY 1.7.x 版本不同的是，2.0.x 版本后使用已注册的组件前，首先要在页面的 config 中的 usingComponents 字段进行引用声明，这里使用方式与原生小程序组件使用自定义组件方式相仿。

路径规则

  • 如果路径是绝对路径 (例如 /components/button-counter)，会原样保留

  • 如果路径以.开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

  • 如果路径以~开头。如果你在编译配置文件中配置了 alias，这将变得很有用。所有 @wepy/cli 创建的项目都默认配置了将 @ 指向 /src。

  1. <config>
  2. {
  3.   "usingComponents": {
  4.     "button-counter": "~@/components/button-counter"
  5.   }
  6. }
  7. </config>
  • 如果路径以 module: 开头。将会被看作模块依赖。这意味着你可以用该特性来引入第三方 NPM 组件：
  1. <config>
  2. {
  3.   "usingComponents": {
  4.     "some-3rd-party-component": "module:some-3rd-party-component"
  5.   }
  6. }
  7. </config>
  • 如果路径以 plugins: 开头。将会被看作小程序插件提供的自定义组件模块依赖。这意味着你可以使用该特性来引入小程序插件中的自定义组件：
  1. <config>
  2. {
  3.   "usingComponents": {
  4.     "3rd-plugin-component": "plugins://appid/3rd-plugin-component"
  5.   }
  6. }
  7. </config>