写在前面

wepy是从同事那儿听说的，但是一直未有实际上手，最近想写一个todo-list的小程序，所以选择用wepy来尝试。
wepy是腾讯系出的一款使小程序支持组件化开发的框架。它在写法和使用上参照的是Vue，所以不熟悉Vue的同学需要先去补习一下。

前端对资源的引用无非就是样式、图片、脚本。而在wepy里面组件、脚本、图片是我们需要引入的资源。对于这些资源的引用如何处理的呢？

1、编译文件内配置别名

在wepy.config.js内设置resolve的alias：

1
2
3
4
5
6
7
8
resolve: {
  alias: {
    '@': path.join(__dirname, 'src'),
    'components': path.join(__dirname, 'src/components'),
    'images': path.join(__dirname, 'src/images'),
    'utils': path.join(__dirname, 'src/utils')
  }
}

2、图片资源的引用

如上代码里面，我们的 images 是 src 目录的直接子级。在页面或者组件里面我们则这样引用：

1
<image src="/images/**.png" />

3、组件的引用

在page或者组件内引用组件，可以直接通过 import 导入，并且一定要在page或者组件的 components 上做映射：

1
2
3
4
5
6
7
8
9
10
import wepy from 'wepy';
import CustomA from 'components/customa';
import CustomB from 'components/customb';
export default Index extends wepy.page {
  components = {
    customA: CustomA,
    customA1: CustomA,
    customB: CustomB
  };
}

映射好了之后，我们在 template 里面就可以这样使用：

1
2
3
4
5
<view>
  <customA></customA>
  <customB></customB>
  <customA1></customA1>
</view>

正如上面代码里面你所看到的，我们的组件 CustomA 映射成了两个组件：customA和customA1。这样做好处在于：我们可以共用同一个组件，但数据却是互不影响的。

重要！！！ 组件名称如果有驼峰写法的，则在wxml中需按照驼峰方式使用组件，而非像Vue一样需要将驼峰转为 - 连字符：

1
2
3
4
5
6
7
<!-- index.wpy -->
<!-- template -->
<!-- 错误写法 -->
<task-item :list="list"></task-item>

<!-- 正确写法 -->
<taskItem :list="list"></taskItem>

1
2
3
4
5
6
7
8
9
// index.wpy
/** js */
import wepy from 'wepy';
import taskItem from '@/compnoents/task-item';
export default class Index extends wepy.page {
  components = {
    taskItem: taskItem
  };
}

4、公共js方法的引用

做项目的时候涉及到的公共或者可复用的方法，我们都会整理到 utils 下面，在需要用到的地方再 import 进来就好了。如第一部分的代码，我们设置了别名 utils，则我们可以在page或者组件内这样引用和使用：

1
2
3
4
5
6
7
import wepy from 'wepy';
import { customEvent } = 'utils';
export default Index extends wepy.page {
  onLoad () {
    customEvent();  // 使用公共方法(可以在任意地方调用自定义方法，这里只是栗子)
  }
}