微信小程序基本用法3(四)

一、自定义组件

类似 vue 或者 react 中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面

一.1 创建自定义组件

创建 :

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
1.在 app.json 中新建页面
2.在 和 pages 同级目录下 创建 components 文件夹
3.在 commponents 里面 创建 Tabs 文件夹
4.创建 Tabs 文件解构,点击 文件夹 Tabs,然后右键,点击新建 Commponent,会弹出一个输入框,输入 Tabs 点击回车,就会自动生成 Tabs.js、Tabs.json、Tabs.wxml、Tabs.wxss 文件

在 Tabs.json 中的代码 :

{
   
  "component": true,     // 表示当前的组件是一个组件
  "usingComponents": {
   }     // 在里面可以继续引入其它的组件
}

在 Tabs.js 中的代码

// components/Tabs/Tabs.js
// 组件是 Component,而不是 pages 了
Component({
   
  /**
   * 组件的属性列表
   */
  // 接收父向子传递的数据
  properties: {
   

  },

  /**
   * 组件的初始数据
   */
  // 自己的数据
  data: {
   
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
   

  }
})

一.2 声明引入自定义组件

声明 :

打开我们新建的页面,点击 xxx.json,会看到里面有一段代码,我们想要声明组件,就需要在这里面配置 标签名字 和 组件相对路径,注意最后文件的后缀名可以不用添加

{
   
  "usingComponents": {
   
    "Tabs":"../../commponents/Tabs/Tabs"
  }
}

一.3 页面使用自定义组件

打开新建页面的 xxx.wxml, 直接把刚才在 xxx,json 中配置过的 标签名字,当做标签写上,就可以在小程序中看到引入的 Tabs 组件

<!--pages/work14/work14.wxml-->
<Tabs></Tabs>

一.4 编辑组件, tabs 样式优化

在 tabs.wxml 中编辑 :

<!--commponents/Tabs/Tabs.wxml
<Tabs></Tabs> -->

<view class="tabs">
  <view class="tabs_title">
    <!-- 不能用写死的数据,应该在 组件 tabs.js 的 data 中存数据,然后遍历数据到 页面的wxml 文件上 -->
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->

    <view
      wx:for="{
   {tabs}}"
      wx:key="id"
      class="title_item {
   {item.isActive?'active':''}}"
    >
      {
   {
   item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

<Tabs></Tabs>

在 tabs.wxss 中编辑 :

/* commponents/Tabs/Tabs.wxss */
.tabs {
   }

.tabs_title {
   
  display: flex;
  padding: 10rpx 0;
}

.title_item {
   
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
   
  color: red;
  border-bottom: 5rpx sol