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

秒速五厘米 2024-04-01 15:05 140阅读 0赞

### **组件：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** ###

1.  图片显示：  
    `packageComponent/pages/media/image/image`
2.  视频/弹幕/自动旋转/小窗模式  
    `packageComponent/pages/media/video/video`
3.  相机组件：  
    `packageComponent/pages/media/camera/camera`
4.  直播组件：  
    `packageComponent/pages/media/live-pusher/live-pusher`
5.  `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.  万能圆角化

border-radius: 10px;

1.  登录组件：

<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>