更新记录

0.0.3（2024-01-02）

新增

0.0.2（2023-12-27）

2

0.0.1（2023-12-27）

1

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

# First Extension For HBuilderX

如果想定制属于自己的开发习惯，请联系作者

文档使用说明：

如果想定制属于自己的开发习惯，请联系作者 第一步在项目根目录新建common.css文件，然后在app.vue中引入，接着启动项目即可(注意： 如果不会自动更新，请重新启动项目 )

缺点：

1. 为了方便用户开发习惯，跟HBuilder用了相同保存快捷键Ctrl+s，
2. Ctrl+s保存的时候会弹出提示3个选择，请选择allacss保存
3. 只支持display: flex布局
4. [会把所有css放在，common.css文件（如果想在当前页面生成css,）] ( https://ext.dcloud.net.cn/plugin?id=16031 )
   <如果想在当前页面生成css,点这里>

以下为固定class类：

2. dflex -> {display: flex;}

3. flex-c -> {display: flex;align-items: center;}

4. flex-ju-c -> {display: flex;align-items: center;justify-content: center;}

5. flex-ju-b -> {display: flex;align-items: center;justify-content: space-between;}

6. flex-ju-a -> {display: flex;align-items: center;justify-content: space-around;}

7. flex-col -> {flex-direction: column;}

8. flex-row -> {flex-direction: row-reverse;}

9. flex-wrap -> {flex-wrap: wrap;}

10. flex1 -> {flex:1;}

11. center -> {text-align: center;}

12. text-right -> {text-align: right;}

13. text-left -> {text-align: left;}

14. one -> {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-align: start;-webkit-box-orient: vertical;-webkit-line-clamp:1;} 超出一行显示...，记得要给宽度

15. two -> {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-align: start;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} 超出二行显示...，记得要给高度

16. posire -> {z-index: 1;position: relative;}

17. posiab -> {position: absolute;}

18. posifi -> {position: fixed;}

19. bold -> {font-weight: bold;}

20. image -> {width: 100%;height: 5px;} 用于<image>标签mode="widthFix"出现图片默认高度240，css样式太多的情况，可能导致样式生效较慢(小程序比较明显)，出现 “闪一下” 的情况，此时设置 image，可优化此问题

21. hidden -> {overflow: hidden;}

22. status-bar -> {height: var(--status-bar-height);width: 100%;} 系统状态栏高度,在 App 里为手机实际状态栏高度

以下为动态class类：

类名后面可添加想要的数据，颜色，大小， 单位默认rpx，如果想要其他单位直接可在后面加上，看实列 下面例子数字都是动态，可变的，根据自己项目情况，如果不写数字将不生效 后面加上_i表示权限，列：colorred_i(.colorred_i.colorred_i{color:red;}) bgred_i class都是以前面关键字母开头

0. minw30 -> {min-width:30rpx;}
   minh30px -> {min-height:30px;}

   maxh30 -> {max-height:30rpx;}
   maxw30vw -> {max-width:30vw;}

1. con -> {width:92%;margin: auto;} 用于2边空隙，默认92% con95 -> {width:95%;margin: auto;} 用于2边空隙

2. mg13 -> {margin:13rpx}
   mg13px -> {margin:13px}
   mg13% -> {margin:13%}
   mg13vw -> {margin:13vw}

   mr15 -> {margin-right：15rpx} (ml,mt,mb,表示其他边距，其中15(动态)是想要的边距)
   mr20px -> {margin-right：20px}
   mr25vw -> {margin-right：25vw} (可在后面加想要的单位)

   mr-20 -> {margin-right：-20rpx} (在这里中横杠表示负数的意思)
   mr-20px -> {margin-right：-20px} (可在后面加想要的单位)

3. pg19 -> {padding:19rpx}
   pg19 -> {padding:13px
   pg20% -> {padding:20%}
   pg19vw -> {padding:19vw}

   pr10 -> {padding-right:10rpx} 跟mr上面一样的写法

4. z-index60 -> {z-index:60}

5. opct05 -> {opacity:0.5}
   opct1 -> {opacity:1}

6. size12 -> {font-size：12rpx}

7. colorred -> {color:red;}
   color1CD66C -> {color:#1CD66C;} (color后面带上色号，或者英文，注意不要加#，加_i是权限，)

8. bgred -> {background:red;}
   bg1CD66C -> {background:#1CD66C;} (color后面带上色号，或者英文，注意不要加#，加_i是权限，)

9. bgred_i -> {background:red;} bg1CD66C -> {background:#1CD66C;} (加_i是权限， )

   (背景颜色rgba加透明度)
   bgrgba255-255-255-01 -> {background:rgba(255,255,255,0.1);}

10. (背景渐变颜色)

11. ibg1BA035-558B94 -> {background-image: linear-gradient(#1BA035,#558B94);} (上到下渐变)
    ibg1BA035-558B94-to -> {background-image: linear-gradient(to right,#1BA035,#558B94);}(左到右渐变)

15. borderFFD96A -> {border:1px solid #FFD96A} (border后面带上色号,默认都是1px solid，)

16. border-tFFD96A -> {border-top:1px solid #FFD96A} (border后面带上色号,默认都是1px solid，后面加上_i表示权限) border-bFFD96A -> {border-bottom:1px solid #FFD96A} (border后面带上色号,默认都是1px solid，后面加上_i表示权限) border-lFFD96A -> {border-left:1px solid #FFD96A} (border后面带上色号,默认都是1px solid，后面加上_i表示权限) border-rFFD96A -> {border-right:1px solid #FFD96A} (border后面带上色号,默认都是1px solid，后面加上_i表示权限)

17. radius20 -> {border-radius:20px}（这里固定px）

18. border-tr10 -> {border-top-right-radius:10px}（这里固定px）
    border-tl10 -> {border-top-right-radius:10px}（这里固定px）
    border-bl10 -> {border-bottom-left-radius:10px}（这里固定px）
    border-br10 -> {border-bottom-right-radius:10px}（这里固定px）

19. width11 -> width:11rpx width11px -> width:11px

20. width-11 -> width-11rpx width-11px -> width:-11px (负数下面都一样写法)
    height11 -> height:11rpx height11px -> height:11px
    top11 -> top11:rpx top11px -> top:11px
    bottom11 -> bottom:11rpx bottom11px -> bottom:11px
    left11 -> left:11rpx left11px -> left:11px
    right11 -> right:11rpx right11px -> right:11px

列表布局

每行3个布局 父类box3, 子类a3box ：列:

<view class="box3 "><view v-for="(item,index) in 5" :key="index" class="a3box height100">66666</view></view>

每行4个布局 父类box4, 子类a4box ：列:

<view class="box4"><view v-for="(item,index) in 6" :key="index" class="a4box height100">8888</view></view>