微信小程序入门与实战之初识小程序的自定义组件

文章列表顶部轮播图跳转

为每个轮播图设置点击响应函数，为其设置参数为文章的id

小程序tabBar选项卡配置基础

我们在app.json配置tabBar选项卡：

  "tabBar": {
    "list": [
      {
        "text": "阅读",
        "pagePath": "pages/posts/posts"
      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies"
      }
    ]
  }

能在底部实现tabbar并显示文字，但没有图标，但点击选项能进行相应的页面的跳转。

小程序tabBar的其他配置选项

使用iconPath配置tabBar的未选中图标，使用selectedIconPath设置选中图标，同时我们文字也可以修改选中和未选中的颜色：

 "tabBar": {
    "selectedColor": "#000000",
    "color": "#999999",
    "list": [
      {
        "text": "阅读",
        "pagePath": "pages/posts/posts",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  }

实现效果：

更多tabBar参数参考微信小程序官方文档。

跳转到带有选项卡的页面需要使用switchTab

设置完上述的tabBar后，我们回到欢迎页，点击”开启小程序之旅“，会发现并不能实现跳转，这是因为我们之前设置的跳转函数为：

  onTap(params)
  {
    //跳转页面
    wx.navigateTo({
      url: '/pages/posts/posts',
    })
  }

而要跳转到带有tabBar的页面的函数需要使用switchTab，修改为switchTab就可以正常进行跳转。

初识自定义组件

新建第一个自定义组件

我们在根目录新建一个components的文件夹，这时候我们再新建一个post文件夹表示文章相关的自定义组件，然后选中post文件夹,新建component
对于自定义组件，我们最好将其命名为index

创建自定义组件的属性

在所需要使用自定义组件的json文件下进行引入：

就可以开始使用我们的自定义组件
我们在自定义组件的js文件下可以设置组件的属性：

自定义组件属性的简化定义

但是不能自己设置默认值，只能用原本默认的。
定义在 properties也可以用作数据绑定。

自定义属性可以接受一个Object对象

我们想用自定义组件代替以下代码：

我们先把所有的代码剪切到我们自定义组件的wxml中：

再将所有样式代码剪切到自定义组件的wxss中：

下面掩饰怎么通过自定义属性传递Object对象
首先原本页面的js文件中获取的data:

在自定义组件的js中定义属性：

在页面中使用自定义组件传递数据：

自定义组件的wxml直接使用data测试一下:

显示效果：

分离文章到单独的自定义组件中

属性中的data改为res（最好不要使用data）
原本页面中：

自定义组件中引用res：

实现的效果和之前实战的效果一样，我们封装了自己的组件库，如果之后需要使用相同的组件，开发就大大简化了。

自定义组件的嵌套引用

实现效果：

我们定义两个自定义组件，一个为movie一个为movielist，movielist引入movie:

<view class="container">
  <view>
  <text>正在热映</text>
  <text>更多</text>
  </view>
  <movie></movie>
</view>

具体的页面引用movielist,形成自定义组件的嵌套引用。