Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to implement Icon icon in Android Mini Program

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve the Icon icon in Android Mini Program". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the Icon icon in Android Mini Program".

The default value of Icon component attribute type provided by Mini Program natively indicates typestring

Is the type of icon. Valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizenumber/string23 No size colorstring of icon

No icon color. Same as the color of css, the length unit of the size attribute of the component is supported by default from px,2.4.0 (rpx/px).

PX numeric type, which is used by default. No unit is filled in, only one numerical value can be written.

RPX (Responsive Pixel) screen adaptive unit, he divides the screen into 750units, each of which is 1x750.

For example, the screen width of iphone6 is 350px, and each rpx is 0.5px. That is, if we set the value of size to 60rpx on the iphone6 machine, it will have the same effect as setting it to 30 or 30px.

The component color property is to change the color of all pixels of the icon FAQ. Can the icon and the text be on the same line?

Yes, the icon itself is born for better layout and easier to use. The code is as follows:

I am a line of text, I contain icons! Sometimes the Icon on the real machine is blank.

First of all, this problem is certainly not due to the font file link does not join Mini Program's secure domain name, WXSS load pictures and fonts allow Outland! If the icon is a custom implementation, to check the model and embedded font file type, may be caused by compatibility, in Mini Program recommended to use TTF and WOFF format fonts. If you are using these two fonts and the situation still exists, you can consider data embedding in SVG format.

How can the icons of icon components in the weui component library be taken out and saved locally?

You can directly open the weui official website (https://weui.io/), and then check the source code through the browser developer tool, find the resource address and download it.

Advantages

It can be used out of the box.

Shortcoming

Only success, success_no_circle, info, warn, waiting, cancel, download, search, clear are supported, which is far from meeting the development needs.

Custom implementation icons directly use the advantages of pictures

Simple and rude, each icon corresponds to a picture.

Shortcoming

It is not convenient for pictures to be laid out in text. It is not convenient to change the color.

The picture cannot be zoomed up or down, it will become virtual and jagged when enlarged.

Images need to be stored locally or on the network, which leads to a large number of HTTP requests and slows down the page load.

It is not as easy to use as icons with only one name.

Use Sprite diagrams

Sprite, a continuous collection of pictures, arranged into a single picture in a non-overlapping manner with minimal distribution. Each use through the vertical and horizontal display of the starting coordinates and area size, in order to achieve the effect of dynamic switching.

Use the example

Achieve an explosion effect through a sprite diagram. The size of the picture is (650x650) px;, so the size of each small icon is (130x130) px;, which is why the width and height of the css style are set to 130px, and that is why the js code moves the step to be set to 130. Both left and top are negative in js because instead of showing the coordinates of the icon, it is the distance to the upper left of the background picture.

Note: only network pictures can be used in wxss, not local pictures!

The code is as follows:

/ * 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: 2000; transform: scale (2mae2)) } / / icon.jsPage (initial data of {/ * page * / data: {left:'0px', top:'0px',}, / * Life cycle function-- listen page load * / onLoad: function () {var that = this; var left = 0; var top = 0 Const step = 130; const stop = 650130; 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

When loading, it is loaded only once. Reduced HTTP requests.

Use examples of CSS style drawing. 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);} shortcomings

Each icon needs to write CSS style code, which requires a lot of labor.

This kind of icon is not a character, and each icon should unify a central point when drawing, otherwise it will be troublesome to use it to control the position.

Size and color are not easy to control. So this is not a good icon scheme.

Use vector fonts (recommended)

When a browser renders a character, first look at the font-family style to determine which font name to use. Then the Unicode of this character looks for the corresponding character information in the font file.

There are two font types, one is dot matrix font, the other is vector font. Vector fonts are now the most widely used. Vector fonts are roughly divided into three categories: Adobe-dominated Type1, Apple-dominated TrueType, Adobe,Apple and Microsoft-dominated open source font OpenType.

In vector fonts, each Unicode is only an index of each character, and each character description information is a geometric vector drawing description information. Take Type1, for example, which uses cubic Bezier curves to draw glyphs. TrueType uses quadratic Bezier curves to describe glyphs. It is precisely because the vector font is drawn that it can fill any color in real time and can be scaled infinitely without aliasing.

Alibaba's icon website (https://iconfont.cn/), where we can search for any picture online editing, and download style files for use in Mini Program.

Font source description:

EOT is an OpenType font type specific to Microsoft IE browser.

TTF is a TrueType font.

WOFF and WOFF2 are vector font formats dedicated to mobile developers. It is a re-encapsulation of three vector font formats.

Linking various font file sources is compatible with different browser hosting environments. The browser will choose the format it supports and try to load it from the first one in the list. Once you have one that can be used, the rest of the font format will not be loaded. TTF and WOFF are recommended in Mini Program. WOFF2 will have incompatibility issues on earlier versions of IOS devices.

Using SVG Vector Files

Many drawing software can export vector files in SVG format, such as Sketch, but there is no useful spam in the vector files exported in SVG format. You can go to Alibaba's icon website and download the vector file in SVG format after editing. It doesn't carry any spam. Then we take this file to find an Image2base64 tool to convert the contents of the file into a string of base64. Then you can use the string of this base64 as the image source in Mini Program to implement custom icons.

Example

1. Prepare SVG pictures

2. Use online Image2base64 to convert the image to:

Data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh7IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+

3. Write code

.svg-icon {display: block; width: 200px; height: 200px; background-repeat: no-repeat; background: url (_ "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjM2OTcwNTk4NjAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMzI2LjIgNDI5LjdMNzEwIDQyOCA1MjUuNCA4OTIuMXoiIGZpbGw9IiM4M0E0RkYiIHAtaWQ9IjI2MDEiPjwvcGF0aD48cGF0aCBkPSJNMzcwLjIgMjcxLjFsMjkyLjQgMi42IDUxLjcgMTEzLTM3OS41LTIuNnoiIGZpbGw9IiNGRjdFNzEiIHAtaWQ9IjI2MDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjEgMzgwLjdMNjQuOSAyODQuMWwxMjQuMi05Mi4zIDE0OC40IDc2Ljd6IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjAzIj48L3BhdGg+PHBhdGggZD0iTTY0LjkgMzMwLjVMMjg0IDQyOGwyMzUuNSA0NjAuNnpNNzU1LjYgNDI3LjFMOTYwLjkgMzIxIDUyOC44IDg4NnoiIGZpbGw9IiM1Qjc5RkIiIHAtaWQ9IjI2MDQiPjwvcGF0aD48cGF0aCBkPSJNNzUxLjMgMzc5LjhsLTU3LjgtMTE5IDEzMi03My40IDExMy44IDk1Ljh7IiBmaWxsPSIjQTRCRUZGIiBwLWlkPSIyNjA1Ij48L3BhdGg+PHBhdGggZD0iTTM2NS44IDIzMy40bC01MC0xMi45LTk0LTUyLjcgMTEwLjQtMzkuNmgzNjAuNmwxMDkuNSA0NS43LTEwNS4yIDUwLjktMzUuNCA4LjZ6IiBmaWxsPSIjQzdEOEZGIiBwLWlkPSIyNjA2Ij48L3BhdGg+PC9zdmc+");} description

This method still requires a picture to be processed once and then referenced on the page. Note: the values of the width and height attributes in the style file need to be consistent with the width and height of the downloaded SVG file (can be seen in the svg tag).

Drawing with Canvas SVG drawing

This kind of drawing can be used for animation, but it is a bit overqualified to make icons.

Thank you for your reading, the above is the content of "how to achieve Icon icon in Android Mini Program". After the study of this article, I believe you have a deeper understanding of how to achieve the Icon icon in Android Mini Program, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report