• 本博文由热爱分享热爱技术的半颗心脏原创，非官方人员、非组织名义编写，博文如有不对或侵犯您的权益，请及时留言，第一时间纠正！

【微信小程序控制硬件①】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！
【微信小程序控制硬件②】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！
【微信小程序控制硬件③】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
【微信小程序控制硬件④】 深度剖析微信公众号配网 Airkiss 原理与过程，esp8266如何自定义回调参数给微信，实现绑定设备第一步！
【微信小程序控制硬件⑤ 进阶篇 】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，在微信小程序多页面同时接收到设备推送事件！
【微信小程序控制硬件⑥ 进阶篇 】服务器如何集成七牛云存储SDK，把用户自定义设备图片存储在第三方服务器！

一、前言；

        近几乎一个月没有更新博客了，最近在弄自己的服务器，集成微信公众号配网、绑定设备，提供微信小程序获取用户个人设备的接口，现阶段已经把微信公众号全部搞掂了，哈哈！

     在开发过程中，我用了tp5框架做了一个简单的微信公众号配网的demo，大家直接拿去用吧！效果如下，还是蛮好看的！欢迎 star ！点我访问仓库！

• 针对 access_token 失效增加了自动刷新机制；
• WeChatDeveloper 已历经数个线上项目考验。
• FrozenUI 是一套基于移动端的UI库，轻量、精美、遵从手机 QQ 设计规范。
• 运行环境要求PHP5.4以上，不需要数据库。

二、认识第三方存储；

    说到存储，大家都相信只是放一个图片或者视频存储，我们存到数据库的时候，只是放着此文件的对外链接，压根就不会在数据库中存储此文件。

    我的这个 csdn 博客很多都是阿里oss对象存储的，现在的阿里oss对象存储都是按照流量收费了，不像之前的，按照文件收费。

    考虑到以后用户在修改个人头像、设备图片，或者是产品图片编辑 的时候需要用到图片，我在设计这个系统的时候，也就考虑到了七牛云存储，很多人在用，也就集成进去了，期间遇到一些坑，这里做下笔记。

2.1 先在七牛云注册账号，实名认证；

     这里我贴下官方链接：https://www.qiniu.com ，其实个人认证的免费额度还是够用的了，而且认证只需要一天就可以了。10G免费存储，api请求次数达到10万次。

2.2 对象存储新建一个bucket，绑定私有域名；

     总的来说，就是对象存储，因为我们存储的是图片；地域等选项根据自己的情况而定，创建成功之后，尤其要注意的是：七牛云会分配一个30天有效期的域名给你，您上传的图片资源的链接就是这个，当然了，一个bucket可以绑定自己的域名；一般地，我们都是用自己备案成功后的域名，我这就用泛解析；

     因为绑定自己的域名之后，就不用担心分配的域名会失效导致图片需要整理了；

2.3 私有域名解析；

     绑定域名需要一点时间来审核，成功之后大家可以看到下面的界面了；最重要的：拿到七牛给我们这个bucket分配的解析值。之后，我们在自己的域名购买处解析到这个记录就可以了。比如我的是阿里云的！

     我在阿里云买的域名，添加记录，之后解析如下设置：

三、SDK 集成过程；

     七牛云提供的 SDK 开发资源包很全很多，我这里是使用 php 开发，所以下载 php 版本就可以了；这里我还是贴下链接吧：https://developer.qiniu.com/sdk#official-sdk ， 大家可以仔细看看集成文档，我这里就不使用 Composer 安装，而是源码安装了；

     好了；集成的准备材料是务必把当前的账号的四个数值拿到：AccessKey、SecretKey、bucket名字以及该bucket的域名；其中，AccessKey和SecretKey在个人中心的密钥管理拿到！

     因为我的是 tp5框架编写的，所以，需要放在 vendor 或者 extend 文件夹，我把整个源码需要放在 vendor文件夹；注意我的不是 Composer 安装 ！！

     这个是我的项目的配置信息：

   //七牛云配置，根据自己的项目而定
    'qiniu' => [
        'Access_Key' => 'Be-4OjiQxwxZslPVvv_xxxxxxxxxxxx',
        'Secret_Key' => 'ZC6SRYCwvN0YJRxmlr5tnE_xxxxxxxxxx',
        'Bucket_Name' => 'smarthome',
        'image_url' => 'http://qiniu.domain.com',
    ]
1
2
3
4
5
6
7

     然后就可以写代码了，我这里写了个封装静态方法：

uploadToken($config['Bucket_Name']);
        // 上传到七牛后保存的文件名，越长越好
        $key  = date('Y')."/".date('m')."/".substr(md5($file), 0, 5).date('YmdHis').rand(0, 9999).'.'.$ext;

        //初始UploadManager类
        $uploadMgr = new UploadManager();
        list($ret, $err) = $uploadMgr->putFile($token, $key, $file);

        if($err !== null) {
            return null;
        } else {
            return $key;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

     使用起来非常方便：

public function upload()
    {
        try {
            $image = QiniuLoad::image();
        }catch (Exception $e) {
            return json(['status' => 0, 'message' => $e->getMessage()]);
        }
       //下面都是返回给客户端的业务，data是指存储在七牛的图片的url地址
        if($image) {
            $data = [
                'status' => 1,
                'message' => 'OK',
                'data' => config('qiniu.image_url').'/'.$image,
            ];
            return json($data);exit;
        }else {
            return json(['status' => 0, 'message' => '上传失败']);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

四、其他；

• 整个过程非常简单，但是中间踩坑了不少；重要的是学习到了如何集成第三方sdk在tp5框架；图片存储之后的 url 很小，不到100个字节 ，可以存储在数据库；这样就减少我们的 服务器的资源访问 io 压力了；如果配合 uploadimgfy插件，更好看！哈哈！