小程序使用 component 组件重构

发表于 |

世界上没有一蹴而就的事情，任何事情，都有起源，发展和未来。如果你跟他就关，那就适应它，而不要抱怨它的变化，或者抱怨他为什么不一开始就这么做。

小记

小程序后来出了 component, 看了看自己的代码，还是最初的 template + class,心里好难受。 于是花了2天时间重构了。这段时间没有产品排期，也就是说我是拿别的项目的时间去重构的。时间略紧张，不过还是一点点的完成了。

component 相当于一个完整的组件，你可以对这个组件定义不同的内容。有自己的事件和 data, 这个倒是跟 vue 很像。

但是注意 component 中的 css 除了继承属性（h1,em）等以外，其他的样子必须都写入 component 中。如果你不想做这件事，就把 app.wxss 引入到 component 中吧。（虽然我也很不情愿）

用法

用 Component({})声明。内部可以有自己的 data, methods, behaviors,还有类似于 vue 的 attach, ready 等函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import rechargeItem from 'behaviors/jump-to-order'

Component({
  behaviors: [rechargeItem],

  properties: {
     recommendList: {
      type: Array,
      value: []
     }
  },

  methods: {
     bindClickEvent() {

     }
  }
})

behaviors 可以理解为 mixins, 多个组件都可能用到同样的内容，就把它抽离为 behaviors 吧。 比如上面，调到订单页可以从很多 component 过来，比如 推荐，搜索。那么就抽离成一个 behavior, 用到的时候引入进来即可。

注意任何一个 component 都需要声明它是一个 component, 我猜测是要语义更好吧，免得跟 page 搞混了(但是 component 和 page 声明就不一样，其实没必要单独再在 json 中声明下？)。component 不需要再在 app.json 里面声明，因为它不是一个 page。

1
2
3
{
  "component": true
}

然后需要引入这个组件的地方，这样引入：

1
2
3
4
5
{
  "usingComponents": {
    "recommend": "../page_component/recommend/recommend",
  }
}

使用的时候，直接引入即可：

1
<recommend recommendList="{{recommendList}}"></recommend>

这里的 recommendList 类似于 vue 的 props, 可以用于从父组件（page）传递内容到子组件。

然后就再原先的 properties 中接受即可。也可以用 this.data访问到。

总结

其实是不想写这个文章的的，因为文章本身没有啥太大的意义，这些好好学习官网都可以知道的。但是不写的话总觉得自己这两天没干啥。但实际上，我觉得我自己做的事情有意义，因为代码更好了呀。而且可读性也更强了，是 component 的，template的，page的，api modules 的，都清清楚楚了。开心。

估计随后的一段时间都不会再碰小程序了，下次讲讲学习到的 vue 源码的内容吧。