如何让微信小程序快速接入七牛云

作者: 七牛云 | 来源:发表于2017-01-23 13:57 被阅读4482次

小程序为什么要接入云?

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

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

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

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

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

七牛云小程序上传 SDK

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

第一步,基础准备

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

了解微信小程序使用相关,可参考微信小程序官方简易教程
了解七牛云账户注册及空间创建相关,可参考七牛控制台快速入门

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

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

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

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

  • 克隆 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',
        })
      }
    });
  • 运行效果预览
小程序.gif

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


感谢 @懒虫柳橙汁 提供 SDK 及接入指南,了解并下载七牛微信小程序 SDK 可移步至社区 SDK

相关文章

  • 如何让微信小程序快速接入七牛云

    小程序为什么要接入云? 目前,开发者在开发小程序过程中,主要遇到以下几个问题: 小程序发布大小超限微信官方限制小程...

  • 微信小程序,你让我如何爱你

    微信小程序,你让我如何爱你 “ 11月16日晚微信团队爆出猛料,所有认证公众号支持快速创建微信小店小程序。 ” 1...

  • 微信小程序云开发(一)

    什么是微信云开发 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。 开发者可以使用云开发快速开发小程序、...

  • 一篇文章为你深度解析HTTPS 协议

    一、微信小程序接入的困境 农历新年将至,微信小程序也如期发布,开发者在接入微信小程序过程中,会遇到以下问题: 小程...

  • 微信小程序

    制作微信小程序: A:微信小程序接入流程 注册:微信公众平台注册小程序,同步进行信息完善和开发 小程序信息完善:填...

  • 微信小程序学习

    学习网站 微信小程序接入指南

  • 微信集成高德地图

    微信小程序之:小程序接入高德地图SDK - 简书

  • 微信小程序整理

    Hi~ 我是微信小程序 小程序官方内容 微信小程序介绍 主要内容:微信小程序接入指南,客服功能使用指南,扫普通链接...

  • 小程序Cloud开发归纳

    小程序云开发 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小...

  • 分享-微信小程序运营的技巧盘点

    收获私域流量,小程序就是接入口 微信小程序用完即走的优势让很多用户使用起来非常方便,对于商家来说,微信小程序的潜在...

网友评论

  • 大力水手_e6eb:小程序的录音wx.getRecorderManager()功能上传七牛云一直报 bad token错误
  • 她来听我的演唱会hez:request安全域名,设置什么?
  • 可汗爷爷:我的报:fail invalid url "UpTokenURL.com/uptoken错误,这个是什么原因,怎么解决?求赐教
  • 阿辉不再少年:老哥,想问下,初始化七牛相关参数怎么配置。因为刚接触不是很懂,还有劳你详细说一下。
    尤文没有吐司:作者你好 ,请问小程序端你能实现获取上传进度的数据吗
    f7b7dff26f4c:@七牛云 我也遇到了Failed to load image https://idv1cri.qiniudns.com/YSANi3pgRVsLCESVuEZhzX1rv35a-HNHVnWTOkEz : net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH
    七牛云:刚刚接触的话,可以先看一下这个文档了解一下哈:blush:
    https://developer.qiniu.com/kodo/manual/1233/console-quickstart
  • f48595f36b29:老铁,你的上传图片成功了,我的一直报 Failed to load image,求助啊
    GalvinWang:你采用的是什么上传方式呢?七牛这边有qshell工具上传很方便的;https://developer.qiniu.com/kodo/tools/1302/qshell
    七牛云:是你的图片上传不上去?

本文标题:如何让微信小程序快速接入七牛云

本文链接:https://www.haomeiwen.com/subject/resabttx.html