项目组件概览

概述

在阅读本文档前，请对 微信小程序 组件的开发与使用有一定了解， 官方文档 (opens new window)。

由于大部分组件为展示类，无太多技术点，所以本文档只选择几个较为复杂的组件进行解构说明。

目录结构

└─ components               # 组件文件夹
  ├─ actor                  # 影人列表 
  │  ├─ actor-item          # 
  │  └─ actor-row           #
  ├─ movie                  # 影视列表
  │  ├─ movie-card          # 影视信息卡片
  │  ├─ movie-item          #
  │  └─ movie-row           #
  ├─ role                   # 角色列表
  │  ├─ role-item           #
  │  └─ role-row            #
  ├─ review                 # 影评列表
  │  └─ review-item         #
  ├─ article                # 文章列表
  │  └─ article-item        #
  ├─ video                  # 视频列表
  │  ├─ video-item          #
  │  └─ video-row           #
  ├─ photo                  # 照片
  │  └─ photo-group         # 照片组
  ├─ header                 # 页头
  │  ├─ header-bar          # 通用页头
  │  └─ header-scroll-bar   # 滚动时变化页头
  ├─ c-icon                 # 字体图标组件
  ├─ player                 # 视频播放器
  ├─ comment-page           # 评论页
  │  ├─ components          # 
  │  │  ├─ comment-bar      # 评论栏
  │  │  ├─ comment-edit     # 评论编辑框
  │  │  ├─ comment-item     # 评论单条内容
  │  │  └─ comment-tool     # 评论底部工具类
  │  └─ index               # 评论页
  ├─ half-page              # 半屏子页面
  ├─ image-group            # 影视系列封面图片组
  ├─ report                 # 举报类型弹窗
  ├─ tab-switch             # 类型切换标签栏
  ├─ tool                   # 底部工具栏组件
  │  ├─ tool-bar            # 通用底部工具栏
  │  ├─ user-collection     # 用户收藏
  │  └─ user-like           # 用户点赞
  ├─ app                    #
  │  └─ footer-info         # 页底app信息
  ├─ m-panel                # 信息卡
  └─ no-data                # 无数据

组件注册

注册全局组件

在 app.json 中注册组件

"usingComponents": {
  "half-page": "components/half-page/index",
  "header-bar": "components/header/header-bar/index"
  // 其它组件
}

注册内部组件

在页面的如 index.json 中注册组件

{
  "usingComponents": {
    "header-bar": "./components/home-header",
    "home-menu": "./components/home-menu",
  }
}