説明
コンポーネント サイズ属性の長さの単位はデフォルトで px になり、入力単位は 2.4.0## 以降でサポートされます。 # ( rpx/px)
- PX 数値タイプ。デフォルトで使用されます。単位は入力せず、数値のみを書き込みます。
- RPX (Responsive Pixel) 画面適応ユニットは画面を 750 のユニットに分割し、各ユニットは 1/750 です。 [関連する学習の推奨事項:
小さなプログラム開発チュートリアル ]
例: iPhone6 の画面幅は 350px、各 rpx つまり 0.5 ピクセルです。つまり、iPhone 6 マシンでサイズ値を 60rpx に設定すると、30 または 30px に設定したのと同じ効果になります。
コンポーネントの color プロパティは、アイコンのすべてのピクセルの色を変更します。
FAQ
アイコンとテキスト関数を同じ行に置きますか?
はい、アイコン自体は、レイアウトを改善し、使いやすくするために生まれました。コードは次のとおりです。 <view style="font-size: 17px;margin-top: 20px;">
我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>
実機ではアイコンが空白で表示される場合があります
まず第一に、この問題は、フォント ファイルのリンクが正しくないことが原因ではありません。ミニ プログラムの安全なドメイン名を追加し、WXSS で画像とフォントを読み込むと、外部ドメインが許可されます。アイコンがカスタム実装されている場合は、モデルと埋め込まれたフォント ファイルの種類を確認してください。互換性が原因である可能性があります。ミニ プログラムでは TTF および WOFF 形式のフォントを使用することをお勧めします。これら 2 つのフォントを使用していて状況が解決しない場合は、SVG 形式でのデータ埋め込みへの変更を検討できます。
weui コンポーネント ライブラリのアイコン コンポーネントのアイコンを取り出してローカルに保存するにはどうすればよいですか?
weui 公式 Web サイト (https://weui.io/) を直接開き、ブラウザーの開発者ツールでソース コードを表示し、リソース アドレスを見つけてダウンロードできます。または、WeChat の公式ドキュメント (https://developers.weixin.qq.com/miniprogram/design/#icon) からダウンロードします。
利点
箱から出してすぐに機能します。
欠点
success、success_no_circle、info、warn、waiting、cancel、download、search、clear タイプのみをサポートしており、開発ニーズを満たすには程遠いです。
カスタム実装アイコン
画像を直接使用
利点
シンプル粗雑ですが、各アイコンは画像に対応しています。
欠点
- 画像をテキスト内にレイアウトするのは不便です。色を変更するのは不便です。
- 画像は拡大または縮小できず、拡大するとぼやけてギザギザになります。
- 画像はローカルまたはネットワーク上に保存する必要があるため、大量の HTTP リクエストが発生し、ページの読み込みが遅くなります。
#これは、アイコンに 1 つの名前だけを使用するほど便利ではありません。 スプライトを使用する
スプライトとは、重複せず最小限に分散された方法で 1 つの画像に配置された一連の連続する画像です。使用するたびに、開始座標と縦横に表示される領域サイズを使用して、動的な切り替え効果を実現します。
使用例
スプライトによる爆発エフェクトを実現します。画像サイズは (650x650) ピクセルであるため、各小さなアイコンのサイズは (130x130) ピクセルです。これが、CSS スタイル設定の幅と高さが 130 ピクセルである理由であり、JS コードの移動ステップが 130 ピクセルである理由でもあります。 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)
},
})利点
ロード時にロードされるのは 1 回だけです。 HTTP リクエストの削減。 CSS スタイルを使用した描画
使用例<view>
<icon class="icon-close"></icon>
</view>errree
デメリット
各アイコンには CSS スタイルのコードを記述する必要があり、多大な労力を要します。 -
使用矢量字体 （推荐使用）
当浏览器渲染一个字符的时候，首先看font-family样式，确定使用字体名是哪一个。接着以此字符的Unicode在字体文件里查找对应的字符信息。
字体类型有两种，一种是点阵字体，一种是矢量字体。现在使用最广泛的是矢量字体。矢量字体大概分成三类：Adobe主导的Type1、Apple和Microsoft主导的TrueType、Adobe，Apple和Microsoft共同主导的开源字体OpenType。
在矢量字体里面每个Unicode只是每个字符的一个索引，每个字符描述信息是一个几何矢量绘图描述信息。以Type1为例，它使用三次贝塞尔曲线来绘制字形。TrueType则使用二次贝塞尔曲线描述字形。正是由于矢量字体是绘制出来的，所以它可以实时填充任何颜色，并且可以无极缩放而没有锯齿。
阿里巴巴的图标网站（https://iconfont.cn/），我们可以在此网站上搜索到任何图片在线编辑，并下载样式文件，在小程序里面使用。
字体源说明：
链接各种字体文件源可以兼容不同浏览器宿主环境。浏览器会选择自己支持的格式，从列表中的第一个开始尝试加载。一旦获得一个可以使用的，就不会再加载剩下的字体格式了。小程序里面建议使用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
更多编程相关知识，请访问：编程入门！！
|
