미니 프로그램에서 아이콘 아이콘을 구현하는 방법에 대한 간략한 분석은 무엇입니까?
- 青灯夜游앞으로
- 2021-11-18 19:31:102819검색
미니 프로그램에서 아이콘 아이콘을 구현하는 방법은 무엇입니까? 다음 기사에서는 미니 프로그램 아이콘에 대한 몇 가지 구현 솔루션을 공유할 것입니다. 도움이 되기를 바랍니다.
아이콘 구성 요소
property
| property | type | 기본값 | 필수 | Description |
|---|---|---|---|---|
| type | string | |
는 | 아이콘 유형입니다. 유효한 값은 성공, 성공_no_circle, 정보, 경고, 대기, 취소, 다운로드, 검색, 클리어 |
| size | 번호/문자열 | 23 | 아니요 | 아이콘 크기 |
| color | string | No | 아이콘 색상, CSS 색상과 동일 |
설명
컴포넌트 크기 속성의 길이 단위는 기본적으로 px입니다. 2.4.0 수신 단위(rpx/px)를 지원합니다.
PX 숫자 유형, 기본적으로 사용되며 단위는 없습니다. 입력하고 값만 쓰면 됩니다
RPX(반응형 픽셀) 화면 적응 단위로 화면을 750개 단위로 나누고 각 단위는 1/750입니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]
예: iPhone 6의 화면 너비는 350px이고 각 rpx는 0.5px입니다. 즉, iPhone 6 시스템에서 크기 값을 60rpx로 설정하면 30 또는 30px로 설정한 것과 동일한 효과를 갖게 됩니다.
컴포넌트의 색상 속성은 아이콘의 모든 픽셀 색상을 변경하는 것입니다.
FAQ
아이콘과 텍스트를 같은 줄에 배치할 수 있나요?
네, 아이콘 자체는 더 나은 레이아웃과 더 쉬운 사용을 위해 탄생했습니다. 코드는 다음과 같습니다.
<view style="font-size: 17px;margin-top: 20px;">
我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>실제 컴퓨터에서 아이콘이 공백으로 표시되는 경우가 있습니다
우선, 이 문제는 확실히 WXSS 로딩의 안전한 도메인 이름을 추가하지 않은 글꼴 파일 링크 때문이 아닙니다. 이미지와 글꼴은 외부 도메인을 허용합니다! 아이콘이 맞춤 구현된 경우 모델 및 내장된 글꼴 파일 유형을 확인하세요. 호환성으로 인해 발생할 수 있습니다. 미니 프로그램에서는 TTF 및 WOFF 형식의 글꼴을 사용하는 것이 좋습니다. 이 두 글꼴을 사용하고 있는데 상황이 여전히 지속된다면 SVG 형식의 데이터 임베딩으로 변경하는 것을 고려해 볼 수 있습니다.
weui 컴포넌트 라이브러리에서 아이콘 컴포넌트의 아이콘을 꺼내어 로컬에 저장하는 방법은 무엇인가요?
weui 공식 홈페이지(https://weui.io/)에 직접 접속하신 후, 브라우저 개발자 도구를 통해 소스코드를 확인하시고, 리소스 주소를 찾아 다운로드 받으실 수 있습니다. 또는 WeChat 공식 문서(https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87)에서 다운로드하세요.
장점
상자에서 꺼내 바로 사용할 수 있습니다.
단점
성공, 성공_no_circle, 정보, 경고, 대기, 취소, 다운로드, 검색, 지우기 유형만 지원하므로 개발 요구 사항을 충족시키지 못합니다.
아이콘 맞춤 구현
그림을 직접 사용
장점
간단하고 투박하며 각 아이콘은 그림에 해당합니다.
단점
사진은 텍스트로 배치하기가 불편합니다. 색상을 수정하는 것이 불편합니다.
사진의 크기를 확대하거나 축소할 수 없으며, 확대하면 흐릿하고 들쭉날쭉해집니다.
사진은 로컬이나 네트워크에 저장해야 하며, 이로 인해 많은 수의 HTTP 요청이 발생하고 페이지 로딩 속도가 느려집니다.
아이콘 이름을 하나만 사용하는 것만큼 사용하기 편리하지는 않습니다.
스프라이트 사용
연속적인 그림 세트인 스프라이트는 겹치지 않고 최소한의 배포 방식으로 하나의 그림으로 배열됩니다. 사용할 때마다 수직 및 수평으로 표시되는 시작 좌표와 영역 크기를 사용하여 동적 전환 효과를 얻습니다.
사용예
스프라이트를 통해 폭발 효과를 구현해보세요. 이미지 크기는 (650x650)픽셀이므로 각 작은 아이콘의 크기는 (130x130)픽셀입니다. 이것이 CSS 스타일 설정의 너비와 높이가 130픽셀인 이유이자 JS 코드 이동 단계가 다음과 같은 이유이기도 합니다. 130으로 설정합니다. js의 left와 top은 모두 음수입니다. 이는 여기에 표시되는 아이콘의 좌표가 아니라 배경 이미지가 왼쪽 상단으로 이동해야 하는 거리이기 때문입니다.
참고: wxss에서는 네트워크 이미지만 사용할 수 있으며 로컬 이미지는 사용할 수 없습니다!
코드는 다음과 같습니다.
<!--icon.wxml-->
<view>
<icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
</view>/* icon.wxss */
.sprite{
display: block;
width: 130px;
height: 130px;
background: url("https://i.loli.net/2021/11/15/7BH5gdkbLynrfM3.png") no-repeat;
}
.scale{
transform-origin: 0 0 0;
transform: scale(2,2);
}// icon.js
Page({
/**
* 页面的初始数据
*/
data: {
left:'0px',
top:'0px',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
var left = 0;
var top = 0;
const step = 130;
const stop = (650-130);
var i = setInterval(function() {
if (left >= stop && top >=stop) {
clearInterval(i)
} else {
left += step;
if(left >= 650){
left = 0;
top += step;
}
that.setData({
left: '-' + left +'px',
top: '-' + top +'px'
})
}
}, 100)
},
})Advantages
로드시 한 번만로드됩니다. HTTP 요청이 감소했습니다.
CSS 스타일을 사용하여 그리기
사용 예
<view>
<icon class="icon-close"></icon>
</view>.icon-close{
display: inline-block;
width: 17px;
height: 2px;
background: red;
transform: rotate(45deg);
}
.icon-close::after {
content: '';
display: block;
width: 17px;
height: 2px;
background: red;
transform: rotate(-90deg);
}단점
각 아이콘에는 CSS 스타일 코드를 작성해야 하는데, 이는 많은 노력이 필요합니다.
이런 종류의 아이콘은 캐릭터가 아닙니다. 각 아이콘은 그릴 때 통일된 중심점이 있어야 합니다. 그렇지 않으면 위치를 제어하는 것이 더 번거로워집니다.
사이즈나 색상도 조절이 어렵네요. 따라서 이것은 좋은 아이콘 구성표가 아닙니다.
使用矢量字体 （推荐使用）
当浏览器渲染一个字符的时候，首先看font-family样式，确定使用字体名是哪一个。接着以此字符的Unicode在字体文件里查找对应的字符信息。
字体类型有两种，一种是点阵字体，一种是矢量字体。现在使用最广泛的是矢量字体。矢量字体大概分成三类：Adobe主导的Type1、Apple和Microsoft主导的TrueType、Adobe，Apple和Microsoft共同主导的开源字体OpenType。
在矢量字体里面每个Unicode只是每个字符的一个索引，每个字符描述信息是一个几何矢量绘图描述信息。以Type1为例，它使用三次贝塞尔曲线来绘制字形。TrueType则使用二次贝塞尔曲线描述字形。正是由于矢量字体是绘制出来的，所以它可以实时填充任何颜色，并且可以无极缩放而没有锯齿。
阿里巴巴的图标网站（https://iconfont.cn/），我们可以在此网站上搜索到任何图片在线编辑，并下载样式文件，在小程序里面使用。
字体源说明：
EOT是微软IE浏览器专用的OpenType字体类型。
TTF是TrueType字体。
WOFF与WOFF2是移动开发专用的矢量字体格式。是对三种矢量字体格式的再封装。
链接各种字体文件源可以兼容不同浏览器宿主环境。浏览器会选择自己支持的格式，从列表中的第一个开始尝试加载。一旦获得一个可以使用的，就不会再加载剩下的字体格式了。小程序里面建议使用TTF和WOFF这两个格式。WOFF2在低版本的IOS设备上会有不兼容的问题。
使用示例可以参考此文章
https://www.jianshu.com/p/25db60f77531
使用SVG矢量文件
很多作图软件都可以导出SVG格式的矢量文件，比方说 Sketch，但是它导出的SVG格式的矢量文件有没有用的垃圾信息。可以到 阿里巴巴的图标网站 编辑好之后下载SVG格式的矢量文件，它不带什么垃圾信息。然后我们拿这个文件找一个Image2base64工具，将文件内容转化为base64的字符串。然后就可以在小程序里使用这个base64的字符串作为图片源，实现自定义图标了。
示例
1、准备SVG图片
2、使用线上Image2base64转换图片为：
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+
3、编写代码
.svg-icon{
display: block;
width: 200px;
height: 200px;
background-repeat: no-repeat;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+");
}<view>
<icon class="svg-icon"></icon>
</view>说明
此种方法仍旧需要一张图片处理一次，然后在页面中引用。注意：样式文件中的width和height属性的值需要和下载的SVG文件的width和height保持一致的（在svg标签中可以看到）。
使用Canvas绘制SVG绘制
这种绘制用于制作动画还是可以的，但是用来做图标有点大材小用了。
腾讯的将SVG绘制成图像的 Cax 引擎
https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013
更多编程相关知识，请访问：编程入门！！
위 내용은 미니 프로그램에서 아이콘 아이콘을 구현하는 방법에 대한 간략한 분석은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!