微信小程序之快速接入七牛云

小程序为什么要接入云？

目前，开发者在开发小程序过程中，主要遇到以下几个问题：

小程序发布大小超限

微信官方限制小程序的发布代码不能超过 1MB，而在实际开发过程中，一般的小程序难免会有图片等富媒体文件，而这些富媒体文件会占用大量的存储空间，最终导致整个上传的程序包超过限制。因此，开发者需要将代码端自带的富媒体数据上传到云端进行存储，让小程序做到真正的「小」。

存储空间不足

对于支持 UGC 的小程序，用户每天都会产生大量的交互数据，自有存储服务器容量不足，因此产生了存储海量数据的需求。

文件加载速度慢

对于含有大量富媒体数据的小程序，客户端使用起来图片等文件加载速度慢，用户抱怨小程序使用体验差，因此产生了数据网络加速的需求。

自微信小程序发布内测以来，七牛云密切关注小程序发展及应用。本文将告诉你如何将小程序快速接入七牛。

七牛云小程序上传 SDK

小程序上云首先需要实现轻松上传，针对富媒体数据上传的需求，七牛云提供小程序上传 SDK，开发者可以省去适配微信上传接口的开发工作，只需要添加已封装好的代码便可以轻松上云。根据微信小程序 SDK 指南，只需要以下两步便可以实现接入。

第一步，基础准备

一个可以接入小程序的公众号
注册七牛云账户，创建空间
七牛微信小程序 SDK

第二步，小程序官网配置域名信息

登录微信公众平台，前往设置-开发设置，点击服务器配置下的修改链接
修改 uploadFile 合法域名（如华北 https 上传地址为：https://up-z1.qbox.com，详细地址信息请参见官方文档）
如果要下载文件，需要同时设置 downloadFile 合法域名为你的 bucket 下载地址
保存设置

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQzA1MTVGNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDQzA1MTYwNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNDMDUxNUQ2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNDMDUxNUU2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6p+a6fAAAAD0lEQVR42mJ89/Y1QIABAAWXAsgVS/hWAAAAAElFTkSuQmCC" alt="" data-s="300,640" data-type="png" data-src="http://mmbiz.qpic.cn/mmbiz_png/v6uP0lGcBZ5yVSUf8DZartPmCLdLWK4he76PZwib5cloia8WGkjvpx9knhMzWACFPKoCtYicr60EgibcpkFHhLvGKw/0?wx_fmt=png" data-ratio="0.3107569721115538" data-w="502" />

【注】目前微信限制每月只能修改三次域名白名单

第三步，小程序接入上传功能

克隆 gpake/qiniu-wxapp-sdk 仓库:
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
在 SDK 目录下找到 qiniuUploader.js 文件，在需要使用上传功能的页面引用 qiniuUploader.js 文件，示例代码如下：

const qiniuUploader = require("../../../utils/qiniuUploader");

Page({

  didPressChooseImage: function() {

    var that = this;

    wx.chooseImage({

      count: 1,

      success: function (res) {

        var filePath = res.tempFilePaths[0];

        qiniuUploader.upload(filePath, (res) => {

          that.setData({

            'imageURL': res.imageURL,

          });

        }, (error) => {

          console.log('error: ' + error);

        }, {

          uploadURL: 'https://up.qbox.me',

          domain: 'bzkdlkaf.bkt.clouddn.com',

          uptokenURL: 'UpTokenURL.com/uptoken',

        })

      }

    })；

运行效果预览

接入七牛后，小程序不仅能享受弹性易伸缩、安全高可用的存储空间，同时七牛提供了数据处理、数据上传下载加速一站式解决方案，让你的小程序足够「小」的同时，更提高了小程序的用户体验。

了解并下载七牛微信小程序 SDK 可移步到社区SDK。