之前提过企鹅官方的组件库TDesign 控件不好看？试试TDesign
其实项目里我们还有一个常用的库 很早之前一位优秀老师的团队开发的 组件库的官网是这个
早先用习惯了 一直沿用到现在 项目里大部分是2个组件库交叉用
今天拿使用频率比较高的图标组件说一下用法
1.浏览器访问域名
https://doc.mini.talelin.com/start/
2.进入微信小程序项目的根目录
3.终端[或者命令行] 在根目录的位置下 输入命令
npm init
会需要输入一些大致信息 按照自己的需求填写一下就可以 填完信息 输入yes 根目录会生成一个package.json的文件 然后还是建议修改一下npm的源 之后安装速度会快很多
npm config set registry
https://registry.npm.taobao.org
4.之后输入下面的命令 就可以开始安装Lin UI了
npm install lin-ui
5.安装完成之后 在开发工具顶部的菜单栏里 依次点击 工具->构建npm 执行完成后 程序目录里 会多一个文件夹
看到这个 就完成了
再记录下组件使用 和TDesign一样 如果要全程序使用 就在app.json里声明组件 如果只是单模块使用 只需要在模块下的.json文件里声明就OK 和昨天说的使用iconfont 图标不好找？试试iconfont 联动一下
Lin也有自己的图标库 声明之后就可以直接使用 我们一般是自定义使用 然后用Lin的图标 自定义为iconfont使用 记录下使用方法
1.在app.json声明一下Lin的icon组件 记得需要自己更改Lin组件所在的目录路径哈
"usingComponents": { "z-icon": "/miniprogram_npm/lin-ui/icon/index",},
2.z-icon是自己命名的 在页面上使用的时候的时候需要写成
<z-icon name="home" l-class='iconfont' color="#1e1e1e" size="60" />
自定义的时候 l-class='iconfont' 需要记得单独声明 这是Lin UI icon组件的自定义使用方法
3.在app.wxss文件里 需要把图标文件的unicode定义一下 上面使用的是home 定义的时候需要写成
.l-icon-home:before { content: "\e7a7";}
这里的unicode 对应的是自己在iconfont图标库里选择的图标文件unicode 包括app.wxss里的iconfont 引入 需要全部完成 不记得步骤的可以回看一下 图标不好找？试试iconfont
之后就可以在页面上看到引入图标的效果了
Lin UI的icon组件可以在组件代码上用 size控制图标尺寸 比较方便 单位是rpx
<z-icon name="home" size="30"/>
还可以修改图标的颜色
<z-icon name="home" size="30" color="#34BFA3"/>
好了 这一期的记录和分享就这样
保持好奇 不断进步 下期见~
微信扫一扫,分享到朋友圈
