小程序静态资源的处理

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

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

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

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

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

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

注意：在 app.json 中配置 tabBar 时所设置的图标只支持本地资源路径。（不能使用网络路径）

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;
}