如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码: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 文件,示例代码如下:
  • 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',
            })
          }
        });

    运行效果预览

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

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

  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. ecos资源探测器

    两种类型的资源探测器 xml文件资源探测器 目录资源探测器 系统内置的资源探测器(核心) 数据库定义目录资源探测器 -base_application_datable 关注dbschema servi ...

  2. HDU 5616 Jam's balance

    背包.dp[i]=1表示i这种差值能被组合出来,差值有负数,所以用sum表示0,0表示-sum,2*sum表示sum. 询问X的时候,只需看dp[sum+X]或者dp[sum-X]是否有一个为1,注意 ...

  3. 解决SSh连接过慢

    ssh 连接的时候特别慢 解决方法: 修改配置文件 /etc/ssh/sshd_config GSSAPIAuthentication yes --->no 81行左右 #UseDNS yes ...

  4. jquery.mustache.js使用

    作者:zccst jquery.mustache是用jQuery做了一层封装,提供了以下几个方法,让模板使用更便捷. 1,添加模板,使用异步的方式 var viewData = { name: 'Jo ...

  5. sencha cmd常用命令汇总

    一.sencha generate:自动生成项目或者代码 1.sencha generate app 项目名称 生成路径 :生成一个新的extjs项目 注明:以上命令会从官网下载试用版本的ext代码到 ...

  6. STM32串口寄存器操作(转)

    源:STM32串口寄存器操作 //USART.C /************************************************************************** ...

  7. 分页。php 引用代码

    <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...

  8. OI队内测试二【数论概率期望】

    版权声明:未经本人允许,擅自转载,一旦发现将严肃处理,情节严重者,将追究法律责任! 序:代码部分待更[因为在家写博客,代码保存在机房] T1: 题解:插头dp应该很好想吧,我们考虑当出现转折时我们对下 ...

  9. NGINX location 配置

    location表达式类型 ~ 表示执行一个正则匹配,区分大小写 ~* 表示执行一个正则匹配,不区分大小写 ^~ 表示普通字符匹配.使用前缀匹配.如果匹配成功,则不再匹配其他location. = 进 ...

  10. PHPcms 把盛大登陆换成人人网登陆

    首先要确保你的 phpcms是比较新的版本, v9.3以后的吧 这里说明一个函数 rawurlencode() 本函数将字符串编码成 URL 的字符串专用格式,特殊的字符会转换成百分比符号后面加上二个 ...