分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

Flag: 坚持为社区贡献高颜值原生自定义组件！🎉🎉🎉

Motive: 在遇到问题的时候得到过很多朋友的耐心回答和讲解，所以也希望能为社区做点贡献！🌈🌈🌈

Introduce: 非常高兴和大家在这里相遇，喜欢写代码，非常欢迎社区的朋友与我交流！🚀🚀🚀

今日自定义组件：预定义样式《色彩》

在进行后续开发之前还是要先完善色彩的定义，因为其他组件需要依赖一些公共分类的色彩定义

先来看效果，需要的小伙伴可以滚动至文章末尾获取组件。

这里先列出具体的色彩值(Hex Color)：

page {
    --gu-primary: #2f67ff;
    --gu-primary-dark: #254fc0;
    --gu-primary-disabled: #b6caff;
    --gu-primary-light: #e8eeff;
    --gu-success: #19be6b;
    --gu-success-dark: #17a05b;
    --gu-success-disabled: #b6ffdb;
    --gu-success-light: #e7fff2;
    --gu-warning: #ffa939;
    --gu-warning-dark: #ff9100;
    --gu-warning-disabled: #ffebb3;
    --gu-warning-light: #fff4e8;
    --gu-error: #ff3737;
    --gu-error-dark: #eb2222;
    --gu-error-disabled: #ffadad;
    --gu-error-light: #ffeaea;
    --gu-info: #aaaaaa;
    --gu-info-dark: #8e8e8e;
    --gu-info-disabled: #dddddd;
    --gu-info-light: #f3f3f3;
    
    --gu-red: #e02020;
    --gu-orange: #fa6400;
    --gu-yellow: #f7b500;
    --gu-green: #6dd400;
    --gu-cyan: #44d7b6;
    --gu-blue: #0091ff;
    --gu-azure: #32c5ff;
    --gu-lotus: #6236ff;
    --gu-purple: #b620e0;
    --gu-black: #303133;
}

基本使用

色彩定义不同于其他自定义组件，在引入 g-ui 的基本样式文件后，可以直接使用 css变量 来访问对应的色彩，例如以下css代码用来将class为container的元素背景颜色设置为 “殷红”

.container{
  background-color: var(--gu-red);
}

其他所有色彩定义用法均相同，关于g-ui基本样式文件的引入参见文章末尾 【引用】 部分

下载

一、Github: https://github.com/lianggaoqiang/g-ui

Git拉取到的默认是项目源码，其中ts文件未编译，若使用typescript开发则可以直接引用，js开发则不能直接使用，这种情况有三种解决方案（本节色彩定义不受typscript限制，但要使用其他组件则受此限制）：

1. 修改项目根目录下的project.config.json文件内的setting.useCompilerPlugins为["typescript"]并重启项目，具体可查看文档：Typescript支持
2. 使用tsc指令编译项目内所有ts文件
3. 使用下方的npm方式下载g-ui

二、npm: https://www.npmjs.com/package/@cellent/g-ui

npm install @cellent/g-ui

1. 对下载下来的g-ui包进行构建，此步骤若不明白，可以查看文档：npm支持：构建npm
2. 在需要使用的页面引入该组件

引用

通过以上两种方式下载完成后，公共样式文件路径如下：

git下载：g-ui/libs/styles/index.ttss
npm下载：miniprogram_npm/@cellent/g-ui/libs/styles/index.ttss

在项目根目录下的 app.ttss 文件顶部写入如下代码即可完成引用：

@import "g-ui/libs/styles/index.ttss"; /* git */
@import "miniprogram_npm/@cellent/g-ui/libs/styles/index.ttss"; /* npm */