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

前言

微信小程序的注册，开发工具配置可以参考官网文档：简易教程。 这里我们主要讲解又拍云微信小程序简单使用，又拍云 微信小程序 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')

4. 调用 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 小程序体验版