微信小程序官方组件目录结构

组件：page/component/index

视图容器：view

1. view横向布局/纵向布局：
   packageComponent/pages/view/view/view

2. scroll-view横向滚动/纵向滚动：
   packageComponent/pages/view/scroll-view/scroll-view

3. swiper广告Bannaer：
   packageComponent/pages/view/swiper/swiper

4. packageComponent/pages/view/movable-view/movable-view

5. packageComponent/pages/view/cover-view/cover-view

基础内容：content

1. packageComponent/pages/content/text/text
2. 微信ICON图标库
   packageComponent/pages/content/icon/icon
3. packageComponent/pages/content/progress/progress
4. 渲染HTML
   packageComponent/pages/content/rich-text/rich-text

表单组件：form

1. 按钮组件：
   packageComponent/pages/form/button/button

2. 多选/选中/未选中列表：
   packageComponent/pages/form/checkbox/checkbox

3. form/提交表单：
   packageComponent/pages/form/form/form

4. packageComponent/pages/form/input/input

5. 单选/多选：
   packageComponent/pages/form/label/label

6. 地区/时间/日期选择器：
   packageComponent/pages/form/picker/picker

7. 白天/昼夜选择器：
   packageComponent/pages/form/picker-view/picker-view

8. 单选列表：
   packageComponent/pages/form/radio/radio

9. 滑动进度条/最大值最小值
   packageComponent/pages/form/slider/slider

10. 开关组件/开启关闭：
    packageComponent/pages/form/switch/switch

11. 文本输入：
    packageComponent/pages/form/textarea/textarea

12. 富媒体编辑器（适用于发博文的组件）
    packageComponent/pages/form/editor/editor

导航：nav

1. 跳转新页面/打开小程序
   packageComponent/pages/nav/navigator/navigator

媒体组件：media

2. 图片显示：
   packageComponent/pages/media/image/image

3. 视频/弹幕/自动旋转/小窗模式
   packageComponent/pages/media/video/video

4. 相机组件：
   packageComponent/pages/media/camera/camera

5. 直播组件：
   packageComponent/pages/media/live-pusher/live-pusher

6. packageComponent/pages/media/live-player/live-player

地图：map

1. packageComponent/pages/map/map/map
2. 跳转腾讯位置服务示例中心小程序

画布：canvas

1. packageComponent/pages/canvas/canvas-2d/canvas-2d
2. packageComponent/pages/canvas/webgl/webgl

开放能力：open

1. AD广告：
   packageComponent/pages/open/ad/ad

2. 获取用户头像性别基础信息：
   packageComponent/pages/open/open-data/open-data

3. 嵌入网站页面：（需在微信公众平台添加安全域名）
   packageComponent/pages/open/web-view/web-view

无障碍访问：open

1. packageComponent/pages/obstacle-free/aria-component/aria-component

小程序开发者站长必备CSS，让您的小程序更加出色！

1. 背景引入图片

background-image: url('图片URL地址或本地目录');
1

2. 万能圆角化

border-radius: 10px;
1

3. 登录组件：

<view class="page-body-info">
  <block wx:if="{{hasUserInfo === false}}">
    <image src="/static/Login.png" class="userinfo-avatar">image>
    <text wx:if="{{canIUseGetUserProfile}}" type="primary" size="mini" bindtap="handleGetUserProfile" class="userinfo-nickname">点击登录text>
    
  block>
  <block wx:if="{{hasUserInfo === true}}">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}">image>
    <text class="userinfo-nickname">{{userInfo.nickName}}text>
    
  block>
view>
1
2
3
4
5
6
7
8
9
10
11
12
13