小程序静态资源的处理

待我称王封你为后i 2023-03-13 03:43 275阅读 0赞

**当写完小程序部分功能，想在移动端试试效果，进行预览的时候，发现有错误的提示消息**

![在这里插入图片描述][20200510190203901.png_pic_center]

发送错误是因为小程序对小程序的代码包体积有一定的要求， 要求不能大于 2048kb (就是不能超过2M)  
但是项目的一些静态资源占用的空间是很大的，实际项目中图片资源都是通过服务器返回，而非本地资源，所以 2M 的大小可以满足大部分的需求

**咱们可以通过配置 project.config.json 文件**，可以忽略某些文件（如图片等）以减少预览发布资源所占空间的大小

"packOptions": { 
      "ignore": [
        { 
          "type": "folder",
          "value": "static"
        }
      ]
    }

所有为了实现真机预览，咱们应该把对应的静态资源上传到公司对应的开发的浏览器上去， 我这里把图片资源上传到我自己的github上(因为免费)

在wxss中也是不可以引入本地的图片或者字体等资源的，它会报错，因为小程序的wxss不支持本地资源路径，只支持网络路径（(http:// 或 https://）,或者base64路径。

**注意：在 app.json 中配置 tabBar 时所设置的图标只支持本地资源路径。（不能使用网络路径）**  
![在这里插入图片描述][20200510190614460.png_pic_center]

**base64图片资源**

base64是表示图片的一种编码形式，浏览器可以直接识别。  
base64的优缺点：

*  base64编码后的图片的体积会比原始的图片要大
 *  一般用于小图片，不合适大图片的转化
 *  优点： 不需要发送Ajax请求

**字体图标：**

在小程序中于平常网页一样可以使用字体图标，并且使用的方式基本上和网页上一样，但是需要注意的是**小程序引入的字体图标路径必须为网络路径，并且必须为https协议**

@font-face { 
      font-family: 'icomoon';
      /** 路径为网络路径，且需要为 https 协议 **/
      src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut');
      src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut#iefix') format('embedded-opentype'),
      url('https://static.botue.com/paradise/fonts/icomoon.ttf?lzaqut') format('truetype'),
      url('https://static.botue.com/paradise/fonts/icomoon.woff?lzaqut') format('woff'),
      url('https://static.botue.com/paradise/fonts/icomoon.svg?lzaqut#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

[20200510190203901.png_pic_center]: /images/20230312/2663098dc4fd4fe192a90ac9a0c934f2.png
[20200510190614460.png_pic_center]: /images/20230312/e60ecfa253344d6aaff1634717bc9cea.png