又拍云微信小程序简单使用

发表于 2018-02-08   |   分类于 默认分类

前言

微信小程序的注册,开发工具配置可以参考官网文档:简易教程。 这里我们主要讲解又拍云微信小程序简单使用,又拍云 微信小程序 SDK,帮助你在存储空间、资源存放、访问加速、资源处理等方面进行大幅优化,为微信小程序提供扩容、加速解决方案。

又拍云微信小程序上传流程

            +-----------------+ +-----------------+ +-----------------+
            |     wechat-sdk  | |  又拍云存储       | |   计算签名服务端  | 
            +-----------------+ +-----------------+ +-----------------+
                    |                   |                   |
                    |                   |                   |
            +------------------------+  |                   |
            |wx.chooseImage()选择图片 |  |                   |
            +------------------------+  |                   |
                   |-|                  |-|                |-|
                   +++        wx.request()请求签名          +++
                   |-|====================================>|-|
                   |-|                  |                  |-|
                   |-|     返回带有 signature 字段的响应      |-|
                   |-|<====================================|-|
                   +++                  |                  +++
                    |                   |                   |
                    |                   |                   |
                    |                   |                   |
                   +++  upyun.upload   +++                 +++
                   |-|================>|-|                 |-|
                   |-|                 |-|                 |-|
                   |-|                 |-|                 |-|
                   |-| console.log(res)|-|                 |-|
                   |-|<================|-|                 |-|
                   +++                 +++                 +++
                    |                   |                   |
                    |                   |                   |                              

使用

使用方式可以参考 demo

  1. 登录微信小程序账户并配置 uploadFile 合法域名为 https://v0.api.upyun.com
    请输入图片描述
  2. 引用 upyun-wxapp-sdk.js 到微信小程序项目
    请输入图片描述
  3. 通过 require 引入 Upyun 类,并初始化一个实例
const Upyun = require('../../utils/upyun-wxapp-sdk')
  1. 调用 upyun.upload 方法上传文件
upyun.upload({
            localPath: imageSrc,
            remotePath: '/wxapp/{year}/{mon}/{day}/{filename}{.suffix}',
            success: function (res) {
              console.log('uploadImage success, res is:', res)

              wx.showToast({
                title: '上传成功',
                icon: 'success',
                duration: 1000
              })

              self.setData({
                imageSrc
              })
            },
            fail: function ({ errMsg }) {
              console.log('uploadImage fail, errMsg is', errMsg)
            }
          })

配置接口

关于接口配置和本地运行可以参看SDK说明

服务端配置

使用又拍云微信小程序 SDK 需要实现一个在服务器进行签名的接口,并将该接口地址作为 getSignatureUrl 传入构造函数,

该接口接受 GET 请求,并接受一个参数 data,计算并返回带有 signature 字段的响应
eg:

https://www.cxiang.net/weixin/get_signature.php?data=POST%26%2Fdeqing%26Thu%2C%2008%20Feb%202018%2003%3A04%3A44%20GMT%26eyJzYXZlLWtleSI6Ii93eGFwcC97eWVhcn0ve21vbn0ve2RheX0ve2ZpbGVuYW1lfXsuc3VmZml4fSIsImJ1Y2tldCI6ImRlcWluZyIsImV4cGlyYXRpb24iOjE1MTgwNjI2ODUsImRhdGUiOiJUaHUsIDA4IEZlYiAyMDE4IDAzOjA0OjQ0IEdNVCJ9

Node 方式

在服务端运行 demo-server.js 文件,然后通过 nginx 带来地址地址,提供给客户端使用。

服务端直接运行 demo-server.js :

sudo node ./demo-server.js

或则通过 supervisord 方式托管,可以参考:Supervisor 简单使用

nginx 代理

server
{
  listen 80;
  server_name 8080.cxiang.net;
  resolver 114.114.114.114 valid=300s;
  resolver_timeout  10s;
  add_header  X-Frame-Options  deny;
  add_header  X-Content-Type-Options  nosniff;
  add_header  Accept-Ranges bytes;
  add_header  X-Forwarded-For $remote_addr;
  add_header  X-Real-IP  $remote_addr;

  location / {
    rewrite ^/(.*) /$1 break;
    proxy_ignore_client_abort on;
    proxy_pass http://0.0.0.0:8080;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  Host $http_host;

  }
}

这样你可以直接配置 getSignatureUrl: '8080.cxiang.net' 的方式来获取signature 字段。

PHP 方式

简单的通过 php 获取接受 data 参数,然后计算签名,返回 signature 字段 。
创建一个 PHP 文件 get_signature.php代码:

<?php
$data = $_GET['data'];
if (empty($data)){
echo "请检查你 wx.request 的时候是否传递了data ";
}else{
$password=MD5('XXXXXXX');//设置你的操作员密码
$signature = base64_encode(hash_hmac('sha1',$data, $password, true));
$sign = '{"signature":"'.$signature.'"}';
echo $sign;
}
?>

然后通过 web 服务器 访问你的 get_signature.php.

上传效果

请输入图片描述

控制台打印了 chooseImage本地选择的图片和上传又拍云存储的结果

其他

多图上传

可以通过循环本地读取的文件,调用upyun.upload方法上传。

        for (var i in res.tempFilePaths) {
          const imageSrc = res.tempFilePaths[i]
          upyun.upload({
            localPath: imageSrc,
            remotePath: '/wxapp/{year}/{mon}/{day}/{filename}{.suffix}',
            success: function (res) {
              console.log('uploadImage success, res is:', res)

              wx.showToast({
                title: '上传成功',
                icon: 'success',
                duration: 1000
              })

              self.setData({
                imageSrc
              })
            },
            fail: function ({ errMsg }) {
              console.log('uploadImage fail, errMsg is', errMsg)
            }
          })
        }

异步任务

可以在 upyun-wxapp-sdk.js里面添加apps任务来提交异步任务。

Demo 小程序体验版

请输入图片描述

所有用户赞赏通道:

仅有 1 条评论


  1. 陈树翔

    厉害了

    陈树翔 April 26th, 2018 at 06:29 pm回复

发表新评论

© ICP: 浙ICP备17033011号-1