使用wepy开发小程序-3|写个组件吧

由于不能公开高保真设计稿的原因，我就口述下，我们产品中涉及到很多个列表，都需要用到上滑加载更多，只不过是样式同，我们先写个暂时看看，可不可以组成一个根据不同的参数加载不同的样式。

书写组件涉及到的问题

1. 样式：组件之间的嵌套问题。即：一个组件如何引入一个子组件
2. 数据：组件之间的数据传递的问题。即：一个组件如何向子组件传递数据

说明

我们会写一个组件，这个组件会引用到蘑菇街的头像avator组件，并且这个组件会被首页引用

那么我们解决问题的顺序是什么样的呢？
先简单的写个组件样式，然后首页引入这个组件，再去添加子组件，这样才能看出来引用子组件是否是正确的。

在compents目录下创建itemRestaurant.wxp文件，文件很简单，如下：

compents/itemRestaurant.wpy

接下来的问题就比较重要了。

我们该如何引用这个组件呢？

首页index.wpy
需要注意三个地方

1. 组件尽量使用驼峰式的命名方式
2. script里需要import也需要放到componts里

3. template里记得调用
   关于index.wpy的内容大致如下。

   
   index.wpy

最后我们就在首页看到了这串乱打的内容了

组件结果.png

上面我们完成的是如何自定义一个组件及页面如何引入一个自定义组件。
接下来我们就要考虑，自定义组件如何引入其他的组件

自定义组件之间的相互引用

我们希望实现的是，在我们自己的组件中引用蘑菇街的avator组件。
那么我们先安装这个组件

sudo min install @minui/wxc-avatar

安装完了之后，我们就可以好好整理一下思路。
刚刚我们在首页引入我们自定义的组件的时候，都做了些什么？

1. import 引入
2. components属性中添加一下
3. template使用

使用minUI里的组件是有它他自己的方法的。
按照minUI里手册说的，要想在.wpy文件中使用他的组件，需要配置config里的usingComponents。那我们来实践一下吧。

首先我们来看，当我们直接在index.wpy中引入avatar组件的时候是什么样子的。
template中

  <wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>

script中的config的usingComponents新增

 'wxc-avatar': '../../packages/@minui/wxc-avatar/dist/index'

我们在官方代码sh中看到的样子如下：

示例中的样子

嗯美美的。
再看我的……

组件是否引入成功？

不仔细看也很难看出，组件是否引入成功。
不管怎么样吧，反正也算是成功了吧。

那好我们再看，如果把avatar组件放到刚刚我们写的那个自定义的组件里会不会得到同样的效果？
修改后的itemRestaurant文件为

<style lang="stylus">

</style>
<template>
  <view class="item-restaurant">
    qery
    <wxc-avatar class="avatar" count="7" src="https://s11.mogucdn.com/p2/170413/upload_86dkh4e886991g9lji7a6g5c530ji_400x400.jpg"></wxc-avatar>
  </view>
</template>
<script>
  import wepy from 'wepy'
  export default class itemRestaurant extends wepy.component {
  }
</script>

怎么没有usingComponents？
usingComponents在page的.wps文件里，放在组件里是没有效果的。
现在再想这样一个问题，为什么图片没有显示出来？

我们把图片拿出来，放到轮播图里发现也是可以显示的，那么问题出在哪儿了呢？
审查代码可以发现，原来minUI的avatar组件是把头像图片当做背景处理了。
所以你给.avator加个样式就可以显示出来了。

.avatar{
  display block
  width 120rpx
  height 120rpx
  background yellow
}

结果如下.png

那么总结一下，要引入minUI组件需要在页面pages里的usingComponent里定义路径。

那好了，现在我们至少解决了自定义组件的基本问题，假设现在我们把这个头像换到首页列表上，又该怎么做呢？

一开始我以为多少会涉及到组件通信或是传值，但是后来才发现，想多了，完全没有那么复杂。

来看下我们的实现吧。
template部分

 <repeat for="{{banner}}" key="rst-list" item="item" index="index">
    <itemRestaurant :item="item"></itemRestaurant>
</repeat>

itemRestaurant组件里直接饮用即可

<template>
    <view class="item-restaurant">
      <view style="height:100rpx">{{item.img}}</view>
      <wxc-avatar class="avatar" count="7" src="{{item.img}}"></wxc-avatar>
    </view>
</template>

image.png

最后运行结果如下：

repeat循环.png

我们调整一下样式。

列表样式大致如此.png

现在我们要做的就是，点击这个列表项跳转到相应的页面

我们先不说在组件中怎么跳转到另一个页面
先说说，

wepy如何实现页面跳转

先把index.wepy换个名字比如说叫Order.wepy。
在页面的tap事件中加入：

 this.$navigate('./order')

应该就可以看到跳转的效果。

现在想一下，如果我们想在上面列表项里完成点击跳转又该如何操作呢？