当写完小程序部分功能,想在移动端试试效果,进行预览的时候,发现有错误的提示消息
发送错误是因为小程序对小程序的代码包体积有一定的要求, 要求不能大于 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;
}