今早还在和设计部的同事调侃 我要不去学学搞设计 感觉做开发美感不能体现在客户面前呀

以前才进入开发岗位做iOS的时候 看到设计部的设计🦁们 经常会为了个按钮圆角像素该用多少掰扯很久 那时候作为新手 还蛮不理解 不就是个按钮吗 能用就不就ok?~

这几年一直自己接单做开发 和设计对接的时间也越来越多 渐渐发现小程序提供的原生组件有些是真的不好看 如果设计那边出的UI稍微个性些 风格需要统一 原生组件一上 就大概率整个风格垮掉

前两年没有完全用各种第三方组件库的时候 还有过一段时间是让设计把按钮或者其他有个性的组件直接截图 然后组件的位置就放上设计给的jpg图片 后来发现也有弊端

一方面是调整起来极其痛苦 因为适配起来 jpg做的组件各种尺寸问题 有的时候要出个5-8稿才ok 设计也头疼 开发这边也老火

另外一方面就是网速慢的时候 客户看得的界面就是 各种...空白 因为jpg组件需要时间加载 然后就被甲方骂不专业 之前开发这边还挺不在意 一个小组件jpg 最多也就几十k 是有多差的网速 加载不出来 直到一次团建 我们到山里去露营 客户给信息过来说程序有问题 自己开了甲方的客户端 然后...

嗯 使用场景多了 就能体会各种预想不到的情况了

铺垫结束了 接下来说说今天的重点 企鹅官方出的 企业设计体系

只说微信小程序的开发资源哈 😓 因为其他的我们基本也没用...

1.官方网站：

https://tdesign.tencent.com/

进入之后往下找

进来之后是这样的

2.先给自己的项目安装 我的习惯是直接开终端[windows系统的开命令行就ok] 然后cd进项目根目录

根目录文件大概是这样哈

3.然后命令行里输入 npm init 之后会跳出许多需要你输入的信息 没什么需要特别改动的一直回车就ok 流程显示大概是这样

4.然后输入

npm i tdesign-miniprogram -S --production

就会自动安装了 一般都很快 这个看自己的网速 如果卡主不动 可以换下npm的源 也可以在上一步之前先换淘宝的npm源

npm config set registry

https://registry.npm.taobao.org

5.安装完成之后 先在小程序的项目文件里 app.json这个文件 删除这两行代码

6.然后开发工具的右上行 详情里的 本地设置 将JS编译成ES5 打上勾

7.最后在开发工具的顶部菜单里 找工具 点击 构建npm 安装就完成了

使用组件库的话 如果整个项目都需要使用这个组件 就在app.json里先引入下[如果只是某个模块使用 就在那个模块下的.json文件里引入] 引入的时候记得关注一下路径 路径不对的话程序会报错~

这里引入了一个上传组件和一个按钮组件 "z-btn"和"z-upload"可以设置成自己喜欢的 统一下前缀就ok

然后在需要使用组件的页面 加入组件代码 就可以了 [组件代码的名称需要按照引入时候自己修改的填写 否则组件会使用失败] 我引入的时候 修改的是z-btn 在页面中使用的时候 需要写成<z-btn></z-btn>

效果是这样的

每个TDesign的组件都有很多设置项和响应事件 需要花时间熟悉和学习 才能熟练使用组件哈~

简单的使用方法就大概这样

🐧🐧的设计一直都是天花板级别 有空多在程序里引入使用试试 程序的观感和使用流畅度相信都会有提升

保持好奇 不断进步 下期见~