如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减。从小程序的热门应用场景来看,大概可以分为两大类,一类是低使用频率的 App,如金融类的银行或保险公司 App,O2O 类的上门做饭、家政 App;另一类是虽然使用频率高但是功能简单的 App,如工具类的天气、快递查询,富媒体类的资讯 App 等。那么,谁将成为小程序的大赢家?要打造独角兽级别的微信小程序,开发者除了要注重小程序的应用场景及自身业务逻辑的创新,还需要关注用户体验的提升,而小程序前端的用户体验又与支撑小程序的后端服务息息相关。

小程序为什么要接入云?目前,开发者在开发小程序过程中,主要遇到以下几个问题:

  • 小程序发布大小超限

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

  • 存储空间不足

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

  • 文件加载速度慢

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

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

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

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

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

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

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

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

  • 克隆 gpake/qiniu-wxapp-sdk 仓库:
  • git clone https://github.com/gpake/qiniu-wxapp-sdk.git
  • 在 SDK 目录下找到 qiniuUploader.js 文件,在需要使用上传功能的页面引用 qiniuUploader.js 文件,示例代码如下:
    1. const qiniuUploader = require("../../../utils/qiniuUploader");
    2. Page({
    3. didPressChooseImage: function() {
    4. var that = this;
    5. wx.chooseImage({
    6. count: 1,
    7. success: function (res) {
    8. var filePath = res.tempFilePaths[0];
    9. qiniuUploader.upload(filePath, (res) => {
    10. that.setData({
    11. 'imageURL': res.imageURL,
    12. });
    13. }, (error) => {
    14. console.log('error: ' + error);
    15. }, {
    16. uploadURL: 'https://up.qbox.me',
    17. domain: 'bzkdlkaf.bkt.clouddn.com',
    18. uptokenURL: 'UpTokenURL.com/uptoken',
    19. })
    20. }
    21. });

    运行效果预览

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

如何让微信小程序快速接入七牛云的更多相关文章

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

    小程序为什么要接入云? 目前,开发者在开发小程序过程中,主要遇到以下几个问题: 小程序发布大小超限 微信官方限制小程序的发布代码不能超过 1MB,而在实际开发过程中,一般的小程序难免会有图片等富媒体文 ...

  2. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  3. 微信小程序快速开发上手

    微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...

  4. 微信小程序支付接入实战

    1. 微信小程序支付接入实战 1.1. 需求   最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...

  5. 微信小程序快速开发

    微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...

  6. 微信小程序把玩(七)数据绑定

    原文:微信小程序把玩(七)数据绑定 数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里 ...

  7. 微信小程序-未接入app.json错误

    微信小程序建立新项目之后会出现app.json文件未接入错误如下图: 一般是因为在下图添加新项目,项目目录这一列,如果不事先建立一个空的文件夹,直接选择则不会出现quickstartup界面 所以在建 ...

  8. 微信小程序支付接入注意点

    一.微信支付后台服务器部署 服务器采用ubuntu16.04 + php7.0 + apache2.0. 微信支付后台服务使用了curl 和 samplexml ,因此php.ini配置中必须开启这两 ...

  9. 微信小程序初使心得【微信小程序快速入门】

    摘要: 2016年推出微信小程序,时至今日,历经几个版本的更新,已形成了相对实用和稳定的服务平台.本文简单的介绍了微信小程序的入门用法,今后会继续关注和实践. 2016年推出微信小程序,时至今日,历经 ...

随机推荐

  1. [iOS]C语言技术视频-08-结构体的定义

    下载地址: 链接: http://pan.baidu.com/s/1dlEFW 密码: 9e5u

  2. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  3. package。。

    如果在源代码内没有加上 package ... 是无法以下面的方式访问到主类的. D:\lab_>java timer.LambdaTest 加载时会返回 "错误: 找不到或无法加载主 ...

  4. java工程师联通XX面试题目

    什么是“长连接”和“短连接”? 所谓短连接指建立SOCKET连接后发送后接收完数据后马上断开连接,一般银行都使用短连接解释2长连接就是指在基于tcp的通讯中,一直保持连接,不管当前是否发送或者接收数据 ...

  5. 21、手把手教你Extjs5(二十一)模块Form的自定义的设计

    前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1、可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能 ...

  6. iOS给自定义个model排序

    今天有朋友问我怎么给Model排序,我顺便写了一个,伸手党直接复制吧. 例如,我建了一个Person类,要按Person的年龄属性排序: Person *per = [[Person alloc] i ...

  7. 苹果App Store开发者帐户从申请,验证,到发布应用(2)

    app store付费 上面已经介绍了app store id的注册了,下面在注册基础上,介绍一下app store的付费.   在上面注册成功之后,会收到一封邮件.   1.收到邮件Thank Yo ...

  8. Intent的概念及应用(一)

    ------siwuxie095 1.显式Intent (1)先创建一个项目:LearnIntent,选择API:21 Android 5.0, 选择Empty Activity,完成 (2)创建一个 ...

  9. python threading模块中对于信号的抓取

    最近的物联网智能网关(树莓派)项目中遇到这样一个问题:要从多个底层串口读取发来的数据,并且做出相应的处理,对于每个串口的数据的读取我能想到的可以采用两种方式: 一种是采用轮询串口的方式,例如每3s向每 ...

  10. javascript-函数及兼容

    1.事件绑定,删除,传播,默认方式,获取类型的兼容 var eventList = { //添加事件兼容 addEvent:function (event,type,backevent) { if ( ...