微信小程序--icon引入外部图标

￡神魔★判官ぃ 2022-12-07 15:30 429阅读 0赞

本博客仅仅只是个意外。大佬请绕道。

第一步：搭建框架

  1. 首先你得有个微信小程序的开发工具，然后把小白架构搭建好。（不会去看[官网][Link 1]）。
  3. 简单的初步框架搭建完之后目录和界面是这个样子：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70

  1. 如果想加一个底部tab框，只需要在pages目录下新建个目录，然后在新建个pages就OK了。创建好之后再app.js里会自动加入此目录，但是不会显示底部tab框。这里就要看官网的tabBar如何说明的了，只需要改下app.js，代码：
  3. {
  4.   "pages": [
  5.     "pages/index/index",
  6.     "pages/logs/logs",
  7.     "pages/icon/icon"
  8.   ],
  9.   "window": {
  10.     "backgroundTextStyle": "light",
  11.     "navigationBarBackgroundColor": "#ccc",
  12.     "navigationBarTitleText": "微信小程序",
  13.     "navigationBarTextStyle": "black"
  14.   },
  15.   "tabBar": {
  16.     "list": [
  17.       {
  18.         "pagePath": "pages/index/index",
  19.         "text": "首页"
  20.       },
  21.       {
  22.         "pagePath": "pages/icon/icon",
  23.         "text": "图标"
  24.       }
  25.     ]
  26.   },
  27.   "style": "v2",
  28.   "sitemapLocation": "sitemap.json"
  29. }

编译并进入图标：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70 1

第二步：下载图标并引入

进入阿里icon，登录后选中你想要的图标加入到购物车，选完之后点击购物车，选择下载代码。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70 2

下载出来的是一个zip压缩包，解压之后就可以看到如下目录：

20200916211531312.png

这时，我们只需要iconfont.css文件就可以了，打开此文件，把所有代码复制到app.wcss文件中

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70 3

到这里就已经完成大部分工作了。

接下来就可以修改icon.wxml文件了，代码如下：

  1. <view>
  2.  <icon class="iconfont icon-add-cart"></icon>
  3.  <text>：这里是icon后面的文字</text>
  4. </view>

结果;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70 4

但是，这里图标有太小了，怎么办呢，那就从css下手，把app.wcss中iconfont类下的font-size从16px改成93rpx，在微信中大小一般用rpx，结果展示：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J0YV9iaA_size_16_color_FFFFFF_t_70 5

发表评论

表情：
评论列表 （有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读