开发小程序的过程是离不开image组件的,如果图片比较少,我们可以直接把图片存储在本地,加入代码包一起上传,但在图片数量多、体积大的时候,将图片存储在本地可能会超过代码包的限制,显然不是一个好的选择。常用的存储方式是将图片传到服务器上,但并不是每个开发者都有自己的服务器,本文将介绍微信云开发中的云存储功能,可以方便快捷、可视化地管理小程序的文件。
打开微信开发者工具,点击左上角的云开发,打开云开发控制台,点击存储进入云存储界面。
在存储管理界面,我们可以点击上传文件、上传文件夹的方式来上传文件,也可以直接从电脑上拖取文件上传,这里我在test文件夹中上传了一张图片,点击文件就可以看到图片的详细信息,例如ETag,下载地址和File ID等。
回到小程序,在.wxml中使用image组件,设置参数src为图片的下载地址和File ID都可以显示图片,往往我们还会设置mode="widthFix"来让图片自适应宽度比例显示,代码如下:
<!--index.wxml-->
<image src="图片的下载地址 形式为https://..."></image>
<image src="图片的File ID 形式为cloud://..." mode="widthFix"></image>
显示效果如下图,第二张图片的比例更接近原图:
当然,云存储的强大之处可不只是上传图片,你可以配合云函数来实现小程序内的上传、下载和删除文件,还可以根据文件ID换取临时文件网络链接,详细使用方法请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
学到了云存储的功能,对入门的很友好,赞!
延迟太高了。、、、、
<image src="图片的File ID 形式为cloud://..." mode="widthFix"></image> 这种使用方式有问题。会报错[渲染层网络层错误] Failed to load local image resource /pages/XXXXX/cloud://XXXXXX。 自动加上了当前路径“/pages/XXXXX/”导致无法渲染
https://developers.weixin.qq.com/community/develop/doc/0002660cc78bf03b0157714ca5fc00?highLine=image%2520%25E4%25BA%2591%25E6%2596%2587%25E4%25BB%25B6id
1打开开发工具,云存储下载次数就一直在增长,大家可以观察下,是否有遇到这样的问题。
https://developers.weixin.qq.com/community/develop/doc/000ecad6f6c558cf7e4dcb6805c000
有遇到的,可以去回复下,让官方引起重视,不然这次数花去的可是钱啊!
我之前是直接用链接,现在看到这个觉得也不错