如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码: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. CodeForces 614B Gena's Code

    #include <stdio.h> #include <string.h> #include <iostream> #include <algorithm& ...

  2. tempnam问题

    tempnam()函数创建一个具有唯一文件名的临时文件 若成功,则返回新的临时文件名,若失败,则返回false 失败原因 c:\windows\temp文件夹不具备读写权限(即 不是超级管理员)

  3. 已经安装了Myeclipse8.5 的情况下,激活myeclipse10.7要注意

    使用下载好的10.7的包里的激活文件和提供的激活方法激活,不成功,在网上搜索了很多方法试过也不成功,最后打开安装目录D:\MyEclipse 10下的myeclipse.ini文件,发现如下内容: . ...

  4. MulticastSocket绑定端口的问题

    该文章由 Binkery 发布于 Binkery技术博客 http://www.binkery.com 如转载请注明出处,该文章的链接地址为 http://www.binkery.com/archiv ...

  5. AWK用法入门详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  6. Cookie的格式及组成

    转自:http://blog.csdn.net/talking12391239/article/details/9665185 Cookie由变量名和值组成,类似JavaScript变量.其属性里既有 ...

  7. 异常捕获拒绝闪退 让应用从容的崩溃UncaughtExceptionHandler

    虽然大家都不愿意看到程序崩溃,但可能崩溃是每个应用必须面对的现实,既然崩溃已经发生,无法阻挡了,那我们就让它崩也崩得淡定点吧. IOS SDK中提供了一个现成的函数 NSSetUncaughtExce ...

  8. 02 easyui -parser

    parser: 页面节点class=“easyui-” +组件名(在plugins里) ,则可以 渲染成相应的组件.

  9. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  10. STM32精确延迟1us和1ms的函数

    STM32精确延迟1us和1ms的函数 延迟1us: /************************************************************************ ...