在看之前，大家可能在想是不是标题党，博主负责任的告诉大家，不是！今天要分享的平台确实是博主亲自参与策划研发的千万级产品使用过的平台。
而此次分享作为我们微信商城小程序开发实战项目分享的第二篇内容，除开图床服务的分享以外，也会分享图床服务在我们项目中的使用，并实现商城系统的轮播图前后端功能开发。
什么是图床
图床服务简单来说就是提供图片在线存储管理、并且提供外链访问的服务，支持批量管理图片并优化加速等，而作为一个商城系统来讲，图片的使用、存储和管理是必不可少的。
今天要分享的免费图床服务，其本身并不仅仅是单一的图床服务功能，而是一个云储存平台，而它们正好也是支持图床功能的。
这两个平台分别是又拍云平台和七牛云平台。
又拍云和七牛云
这两个平台都是老资历了，各自都有非常多的合作平台，这里我简单的对两个平台做一个对比，大家可以根据自己的偏好选择。
| 类型 | 七牛云（www.qiniu.com/） | 又拍云（www.upyun.com/） |
|---|---|---|
| 免费额度 | 10G永久免费空间+10G/月的国内流量+10G/月的国外流量 | 10G免费空间+15G流量 |
| 功能特性 | 图片处理功能强大，支持自动生成任意分辨率图片、格式转换等。还具备图片分类、标签添加、版权设置等功能，适合对图片处理有较高要求的场景，如短视频、媒体、医疗影像等相关业务。 | 在短视频处理方面功能突出，提供转码、切片、剪辑、拼接、水印、截图等云端处理功能，适合电商买家卖家秀、户外旅游短视频记录等场景。 |
| 费用方面 | 整体价格相对较为亲民，对于超出免费额度的使用，收费标准也较为合理，适合预算有限的用户。 | 价格体系较为灵活，在免费额度内可满足部分基本需求，超出后根据实际使用量计费，性价比表现良好，特别是对于有短视频相关需求的用户，其功能与价格的匹配度较高。 |
| 稳定性与性能 | 具备较高的稳定性，CDN 节点分布广泛，能保证图片的快速加载。 | 拥有 300 多个全球 CDN 节点，覆盖范围广，能够为用户提供稳定、快速的图片存储和分发服务，在短视频的存储和播放方面表现出色。 |
适用场景总结：
七牛云：适合个人开发者、小型企业项目，尤其是对图片处理功能有需求，且希望在一定免费额度内使用的场景，如小型电商平台、个人博客网站等。
又拍云：适用于以短视频为主要内容的平台或应用，如短视频分享社区、电商短视频展示等，也可用于对图片存储和分发性能有较高要求的一般网站和应用。
在这里博主个人还是比较偏向七牛云，个人的几个小观点：
- 七牛云的SDK更加完善，文档更加清晰，整体使用门槛较低
- 图片处理API更加丰富，能够支持更多场景
- 整体价格更加亲民，对于流量并不是太大的平台更加友好。
七牛云使用
当前使用方式介绍基于微信商城系统实战项目进行，因此后文中对七牛云的使用主要是基于PHP进行的。
更多七牛云的使用，可以直接前往七牛云开发文档查看：developer.qiniu.com/
七牛云在项目中的使用流程
七牛云在项目中主要为项目提供文件云存储管理、访问链接相关功能，项目将文件上传至七牛云云存储空间，然后七牛云将存储key返回给项目端，项目端将key最终入库存储，最终在使用时根据key使用七牛云服务生成访问链接，供前后端项目使用。
SDK安装
在BuildAdmin项目的composer.json中的require节点中增加七牛php最新版本SDK集成：
json
"require": {
"php": ">=8.0.2",
"topthink/framework": "8.1.1",
"topthink/think-orm": "3.0.33",
"topthink/think-multi-app": "1.1.1",
"topthink/think-throttle": "2.0.2",
"topthink/think-migration": "3.1.1",
"symfony/http-foundation": "^5.4|^6.4|^7.1",
"phpmailer/phpmailer": "^6.8",
"guzzlehttp/guzzle": "^7.8.1",
"voku/anti-xss": "^4.1",
"nelexa/zip": "^4.0.0",
"ext-bcmath": "*",
"ext-iconv": "*",
"ext-json": "*",
"ext-gd": "*",
"qiniu/php-sdk": "^7.1.4" // 这里添加七牛云的sdk集成
},然后执行以下命令即可将sdk集成到项目中：
bash
compoer intall
# 或者
composer update文件上传
所有的七牛云操作都是需要对应的账户秘钥和空间信息的，这些信息在七牛云存储空间以及密钥管理页面均可以直接获取到。
php
/**
* 文件上传
*
* @param mixed $filePath 文件路径
*/
public function upload($filePath): string
{
if (empty($this->accessKey) || empty($this->secretKey) || empty($this->bucket)) {
return "请先配置七牛信息";
}
try {
$auth = new Auth($this->accessKey, $this->secretKey);
$token = $auth->uploadToken($this->bucket);
$uploadMgr = new UploadManager();
list($ret, $err) = $uploadMgr->putFile($token, null, $filePath);
if ($err !== null) {
return json_encode($err);
} else {
// 文件上传的key和hash值都在$ret中
return json_encode($ret);
}
} catch (\Exception $e) {
// 处理异常
return json_encode("文件上传异常");
}
}文件下载链接获取
这个其实用处不是特别大，因为我们有了文件名称后，直接就可以根据我们的域名拼接出一个支持访问下载的外链地址：
php
/**
* 手动生成私有空间下载链接 - 兼容低版本SDK
* @param string $key 文件名/路径
* @param int $expires 有效期(秒)，默认3600秒
* @return string
*/
public function getDownloadUrl($key, $expires = 3600)
{
if (empty($key)) {
throw new \Exception('文件key不能为空');
}
// 拼接基础URL
$baseUrl = $this->domain . '/' . ltrim($key, '/');
// 确保URL以http/https开头
if (stripos($baseUrl, 'http://') !== 0 && stripos($baseUrl, 'https://') !== 0) {
$baseUrl = 'http://' . $baseUrl;
}
// 计算过期时间
$deadline = time() + $expires;
// 对URL进行编码
$encodedUrl = rawurlencode($baseUrl);
// 生成待签名字符串
$signStr = "GET\n\n\n{$deadline}\n/{$this->bucket}/{$key}";
// 计算签名
$signature = hash_hmac('sha1', $signStr, $this->secretKey, true);
$encodedSignature = base64_encode($signature);
// 生成下载链接
$downloadUrl = "{$baseUrl}?e={$deadline}&token={$this->accessKey}:{$encodedSignature}";
return $downloadUrl;
}文件下载
使用这个功能可以直接将文件下载到你指定的目录中去，这个功能可以作为后续项目的文件下载使用：
php
/**
* 下载文件到本地
* @param string $key 七牛云文件key
* @param string $localPath 本地保存路径
* @return bool
*/
public function downloadToLocal($key, $localPath)
{
try {
$downloadUrl = $this->getDownloadUrl($key);
$ch = curl_init();
$fp = fopen($localPath, 'w');
curl_setopt($ch, CURLOPT_URL, $downloadUrl);
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_TIMEOUT, 300);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); // 允许重定向
$result = curl_exec($ch);
// 检查是否有错误
if(curl_errno($ch)) {
throw new \Exception('CURL错误: ' . curl_error($ch));
}
curl_close($ch);
fclose($fp);
return $result !== false;
} catch (\Exception $e) {
trace('七牛云文件下载失败: ' . $e->getMessage(), 'error');
return false;
}
}轮播图功能实现
对于小程序商城系统，轮播图功能是必不可少的一个功能，所以本次分享的实战部分主要是分享轮播图功能的开发与实现。
由于BuildAdmin框架提供了非常方便的可视化CRUD功能，所以我们的快速开发项目就使用这个功能进行实现。
如果你还不清楚BuildAdmin框架的使用，可点击下方链接直接查看了解：
mp.weixin.qq.com/s/Bx3djqRgk...
设计数据表
这里前期比较简单，在数据库中对banner数据表进行设计，当前设计如下：
一键生成Banner管理后台功能
这里直接使用CRUD功能生成banner模块的可视化后台管理功能，操作路径如下：
进入后台管理系统 》 点击左侧CRUD代码生成 》 点击选择数据表 》 选择数据库和banner数据表 》点击确认即可自动生成。
生成后就可以在左侧菜单列表中看到我们的banner管理选项，点进去就可以非常方便的管理我们的banner数据，就这样我们后台的管理功能就开发完成了，是不是非常的方便。
小程序接口实现
在BuildAdmin项目代码的Api模块下，我们创建对应的banner和Controller即可。
Model：
php
<?php
namespace app\api\model;
use think\Model;
class Banners extends Model{
}MiniBanner:
php
<?php
namespace app\api\controller;
use app\api\model\Banners;
use app\common\controller\Frontend;
use app\common\utils\QiniuUtil;
/**
* 商城主页轮播图相关接口
*/
class MiniBanner extends Frontend
{
protected array $noNeedLogin = ['getBanners'];
/**
* 获取轮播图列表
*
* @return void
*/
public function getBanners()
{
$banners = Banners::field('id, url, type') -> where("status", 1)->select();
if (!$banners || empty($banners) || count($banners) == 0){
$this->error('暂无数据', [], 404);
return;
}
$qiniu = new QiniuUtil();
foreach ($banners as $banner) {
$banner->url = $qiniu -> getDownloadUrl($banner->url);
}
$this->success('查询成功', $banners, 200);
}
}注：其中所用到的QiniuUtil类中的方法就是上文在七牛云使用章节提到的方法。
小程序轮播图展示
这里小程序依旧还是使用上一篇文章中提到的wxapp-mall这个免费开源可商用的项目，还不太了解的可以点击下方链接查看：
mp.weixin.qq.com/s/3J_Gx7Uca...
mp.weixin.qq.com/s/Ac83bDlRj...
page/component/index.js主页文件新增banner接口请求，获取最新的banner数据：
javascript
data: {
imgUrls: [{id: 1,url: "",type: 1}],
indicatorDots: false,
autoplay: false,
interval: 3000,
duration: 800,
},
onLoad(){
console.log("loding....")
var self = this
wx.request({
url: constants.URL_GET_BANNER,
method: 'GET',
success:(e)=>{
console.log('请求成功', e.data)
if(e.data.code == 200){
self.setData({
imgUrls: e.data.data
})
}else{
console.log(e.data.msg)
}
},
fail:(e)=>{
console.log('请求失败', e.errMsg)
}
})
}page/component/index.wxml页面端调整banner展示所用数据字段：
xml
<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item.url}}" class="slide-image" width="100%"/>
</swiper-item>
</block>
</swiper>效果展示：
至此，微信商城小程序实战开发项目第二次分享就到此结束了，关于图床服务的使用或者具体功能的实现，如果你有任何不清楚的，也欢迎评论、留言、私信交流沟通。
实例源码获取可点击下方链接： mp.weixin.qq.com/s/gU2JOCUbF...