SDK del mini programa WeChat desarrollado en base a la API de Qiniu Cloud
Qiniu-wxapp-SDK es la implementación de Qiniu Cloud en el mini programa. Las funciones de red se basan en la API del mini programa WeChat. Puede cargar archivos fácilmente a Qiniu Cloud en el mini programa basado en el SDK.
Qiniu-wxapp-SDK es un SDK de cliente y no incluye la implementación de generación de tokens. Por razones de seguridad, se recomienda obtener el token del servidor a través de la red. Para obtener un código de generación específico, consulte la siguiente documentación del SDK del servidor. Esta parte no está incluida actualmente en la demostración del SDK.
Se están desarrollando otras funciones, así que estad atentos.
Descargue qiniuUploader.js de github e importe el miniproyecto del programa.
Antes de usar el SDK, primero debe registrar una cuenta de Qiniu Cloud e iniciar sesión en la consola para obtener un par de AccessKey y SecretKey válidas. Puede leer Cómo acceder a Qiniu y al mecanismo de seguridad para obtener más información sobre cómo usar y administrar las claves correctamente. .
El SDK depende del servidor para emitir uptoken, lo que se puede lograr de las dos maneras siguientes:
Necesita saber en qué región está configurado su存储空间
Qiniu, como el este de China, el sur de China, etc.; consulte Configuración regional
El servicio backend debe proporcionar una dirección URL para que el subprograma solicite la dirección y obtenga el token. Después de que la solicitud sea exitosa, el servidor debería devolver json en el siguiente formato (incluido al menos el campo uptoken):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
Según el存储空间
Qiniu que creó, agregue la dirección de carga https correspondiente a la lista blanca de acceso del mini programa. El método es el siguiente:
- Inicie sesión en la plataforma pública WeChat, vaya a Configuración-Configuración de desarrollo y haga clic en el enlace " Modificar " en Configuración del servidor .
- Modifique el nombre de dominio de uploadFile (por ejemplo, la dirección de carga https del este de China es:
https://up.qiniup.com
. Si no sabe qué escribir en la dirección, consulte el apéndice de dirección https)- Si necesita descargar un archivo, también debe configurar el nombre de dominio downloadFile como su dirección de descarga del depósito.
- solo guárdalo
Nombre del campo | contenido |
---|---|
solicitar nombre de dominio | https://tuservicio.com |
cargar el nombre de dominio del archivo | https://up.qiniup.com (completar según área de almacenamiento) |
descargar nombre de dominio del archivo | https://baldkf.bkt.clouddn.com |
Interfaz de carga de archivos de Qiniu Cloud, los archivos se transfieren a la interfaz correspondiente y el área de almacenamiento corresponde a la dirección HTTPS. Consulte la documentación oficial.
área de almacenamiento | código de área | dirección HTTPS |
---|---|---|
este de china | ECN | https://up.qiniup.com |
Norte de China | NCN | https://up-z1.qiniup.com |
sur de china | SCN | https://up-z2.qiniup.com |
América del norte | N / A | https://up-na0.qiniup.com |
Singapur | ASG | https://up-as0.qiniup.com |
¡¡Nota!! WeChat actualmente limita la lista blanca de nombres de dominio a solo tres modificaciones por mes.
Admite temporalmente un método de instalación
Clonar el repositorio directamente
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
Los archivos qiniuUploader.js y qiniuUploader.ts están en el directorio SDK de este proyecto.
Se recomienda consultar el uso de la demostración y comenzar cargando los eventos vinculados a los botones de la interfaz de usuario en la página index.wxml
de la demostración. Los comentarios son muy detallados.
const qiniuUploader = require ( "../../../utils/qiniuUploader" ) ;
const qiniuUploader = require ( "../../utils/qiniuUploader" ) ;
// index.js
// 初始化七牛云相关配置
function initQiniu ( ) {
var options = {
// bucket所在区域,这里是华北区。ECN, SCN, NCN, NA, ASG,分别对应七牛云的:华东,华南,华北,北美,新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可,执行优先级为:uptoken > uptokenURL > uptokenFunc。三选一,剩下两个置空。推荐使用uptokenURL,详情请见 README.md
// 由其他程序生成七牛云uptoken,然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数,详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true,则文件的 key 由 qiniu 服务器分配(全局去重)。如果是 false,则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑,默认是 false。
// 微信自动生成的 filename较长,导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时,自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件:1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数,可以进行自定义key。(请不要直接在sdk中修改options参数,修改方法请见demo的index.js)
// 通过fileURL下载文件时,文件自定义下载名,请参考:七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”(https://developer.qiniu.com/kodo/manual/1659/download-setting)。本sdk在README.md的"常见问题"板块中,有"通过fileURL下载文件时,自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;
// 将七牛云相关配置初始化进本sdk
qiniuUploader . init ( options ) ;
}
//获取应用实例
var app = getApp ( )
Page ( {
data : {
// 图片上传(从相册)返回对象。上传完成后,此属性被赋值
imageObject : { } ,
// 文件上传(从客户端会话)返回对象。上传完成后,此属性被赋值
messageFileObject : { } ,
// 图片上传(从相册)进度对象。开始上传后,此属性被赋值
imageProgress : { } ,
// 文件上传(从客户端会话)进度对象。开始上传后,此属性被赋值
messageFileProgress : { } ,
// 文件在线查看来源fileUrl
viewFileOnlineFileUrl : '' ,
// 文件下载进度对象。用于文件在线查看前的预下载
downloadFileProgress : { } ,
// 此属性在qiniuUploader.upload()中被赋值,用于中断上传
cancelTask : function ( ) { }
} ,
//事件处理函数
onLoad : function ( ) {
console . log ( 'onLoad' ) ;
var that = this ;
} ,
// 图片上传(从相册)方法
didPressChooesImage : function ( ) {
var that = this ;
didPressChooesImage ( that ) ;
} ,
// 文件上传(从客户端会话)方法,支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
didPressChooesMessageFile : function ( ) {
var that = this ;
didPressChooesMessageFile ( that ) ;
} ,
// 在线查看文件,支持的文件格式:pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法,详情请参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
didPressViewFileOnline : function ( ) {
var that = this ;
didPressViewFileOnline ( that ) ;
} ,
// 中断上传方法
didCancelTask : function ( ) {
this . data . cancelTask ( ) ;
}
} ) ;
// 图片上传(从相册)方法
function didPressChooesImage ( that ) {
// 详情请见demo部分 index.js
}
// 文件上传(从客户端会话)方法,支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
function didPressChooesMessageFile ( that ) {
// 详情请见demo部分 index.js
}
// 在线查看文件,支持的文件格式:pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法,详情请参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
function didPressViewFileOnline ( that ) {
// 详情请见demo部分 index.js
}
// 请先参照微信小程序开发文档配置 TypeScript 支持
import { upload } from 'qiniuUploader.ts' ;
Page ( {
didPressChooseImage : function ( ) {
wx . chooseImage ( {
count : 1 ,
success : function ( res ) {
var filePath = res . tempFilePaths [ 0 ] ;
upload ( {
filePath : filePath ,
options : {
key : '' , // 可选
region : '' , // 可选(默认为'ECN')
domain : '' ,
uptoken : '' , // 以下三选一
uptokenURL : '' ,
uptokenFunc : ( ) => {
return '[yourTokenString]' ;
} ,
shouldUseQiniuFileName : true // 默认true
} ,
before : ( ) => {
// 上传前
console . log ( 'before upload' ) ;
} ,
success : ( res ) => {
that . setData ( {
'imageObject' : res
} ) ;
console . log ( 'file url is: ' + res . fileUrl ) ;
} ,
fail : ( err ) => {
console . log ( 'error:' + err ) ;
} ,
progress : ( res ) => {
console . log ( '上传进度' , res . progress )
console . log ( '已经上传的数据长度' , res . totalBytesSent )
console . log ( '预期需要上传的数据总长度' , res . totalBytesExpectedToSend )
} ,
complete : ( err ) => {
// 上传结束
console . log ( 'upload complete' ) ;
}
} ) ;
}
} ) ;
}
} )
Utilice las herramientas de desarrollo web de WeChat para abrir la carpeta de demostración y luego configure los parámetros relevantes en index.js para usar la demostración.
var options = {
// bucket所在区域,这里是华北区。ECN, SCN, NCN, NA, ASG,分别对应七牛云的:华东,华南,华北,北美,新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可,执行优先级为:uptoken > uptokenURL > uptokenFunc。三选一,剩下两个置空。推荐使用uptokenURL,详情请见 README.md
// 由其他程序生成七牛云uptoken,然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数,详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true,则文件的 key 由 qiniu 服务器分配(全局去重)。如果是 false,则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑,默认是 false。
// 微信自动生成的 filename较长,导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时,自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件:1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数,可以进行自定义key。(请不要直接在sdk中修改options参数,修改方法请见demo的index.js)
// 通过fileURL下载文件时,文件自定义下载名,请参考:七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”(https://developer.qiniu.com/kodo/manual/1659/download-setting)。本sdk在README.md的"常见问题"板块中,有"通过fileURL下载文件时,自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;
// 图片上传(从相册)方法
function didPressChooesImage ( that ) {
// 详情请见demo部分 index.js
}
// 文件上传(从客户端会话)方法,支持图片、视频、其余文件 (PDF(.pdf), Word(.doc/.docx), Excel(.xls/.xlsx), PowerPoint(.ppt/.pptx)等文件格式)
function didPressChooesMessageFile ( that ) {
// 详情请见demo部分 index.js
}
// 在线查看文件,支持的文件格式:pdf, doc, docx, xls, xlsx, ppt, pptx。关于wx.openDocument方法,详情请参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
function didPressViewFileOnline ( that ) {
// 详情请见demo部分 index.js
}
El área de almacenamiento del espacio de almacenamiento se puede seleccionar al crear el espacio de almacenamiento.
El SDK se basa en uptoken
, que se puede configurar directamente proporcionando la dirección de solicitud Ajax uptokenURL
o proporcionando una función uptokenFunc
que puede devolver uptoken.
var options = {
// bucket所在区域,这里是华北区。ECN, SCN, NCN, NA, ASG,分别对应七牛云的:华东,华南,华北,北美,新加坡 5 个区域
region : 'NCN' ,
// 获取uptoken方法三选一即可,执行优先级为:uptoken > uptokenURL > uptokenFunc。三选一,剩下两个置空。推荐使用uptokenURL,详情请见 README.md
// 由其他程序生成七牛云uptoken,然后直接写入uptoken
uptoken : '' ,
// 从指定 url 通过 HTTP GET 获取 uptoken,返回的格式必须是 json 且包含 uptoken 字段,例如: {"uptoken": "0MLvWPnyy..."}
uptokenURL : 'https://[yourserver.com]/api/uptoken' ,
// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数,详情请见 README.md
uptokenFunc : function ( ) {
// do something
return qiniuUploadToken ;
} ,
// bucket 外链域名,下载资源时用到。如果设置,会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
domain : 'http://[yourBucketId].bkt.clouddn.com' ,
// qiniuShouldUseQiniuFileName 如果是 true,则文件的 key 由 qiniu 服务器分配(全局去重)。如果是 false,则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑,默认是 false。
// 微信自动生成的 filename较长,导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时,自定义下载名" 的组合方式。
// 自定义上传key 需要两个条件:1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数,可以进行自定义key。(请不要直接在sdk中修改options参数,修改方法请见demo的index.js)
// 通过fileURL下载文件时,文件自定义下载名,请参考:七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”(https://developer.qiniu.com/kodo/manual/1659/download-setting)。本sdk在README.md的"常见问题"板块中,有"通过fileURL下载文件时,自定义下载名"使用样例。
shouldUseQiniuFileName : false
} ;
Si desea obtener más información sobre la estrategia de carga de Qiniu, le recomendamos que lea atentamente la documentación oficial de Qiniu: Carga. La estrategia de carga de Qiniu se especifica en el servicio back-end.
Por ejemplo: Qiniuyun java SDK mencionó que las variables mágicas pueden especificar que después de cargar un archivo, el objeto devuelto contiene campos: tamaño de archivo fsize
, tipo de archivo mimeType
etc.
Si desea saber más sobre el procesamiento de imágenes de Qiniu, le recomendamos que lea atentamente la documentación oficial de Qiniu: Procesamiento de imágenes.
Cuando el ejemplo del SDK genera uptotken, el Bucket Name
especificado es un espacio público, por lo que se puede acceder públicamente a los recursos después de una carga exitosa. Si Bucket Name
especificado cuando genera el token de actualización es un espacio privado, deberá realizar un procesamiento adicional en el servidor para acceder a los recursos que cargó. Para obtener más información, consulte Descarga de certificados. Algunas funciones de procesamiento de datos del SDK no son aplicables a espacios privados.
Acerca de cargar claves
Si no se especifica la clave del archivo al cargar, la ruta del archivo tmp obtenida por wx.chooesImage
se utilizará como clave del archivo. Por ejemplo: tmp_xxxxxxx.jpg
.
Alternativamente, puede utilizar la clave asignada por el servidor qiniu (deduplicación global). Por ejemplo: Fh6qfpY...
(forma recomendada)
El nombre de archivo generado automáticamente por WeChat es más largo, lo que da como resultado una URL de archivo más larga. Se recomienda utilizar la combinación de {qiniuShouldUseQiniuFileName: true} + "Al descargar archivos a través de fileURL, personalice el nombre de la descarga".
Para obtener más información, consulte shouldUseQiniuFileName
en index.js
de la demostración y el atributo qiniuShouldUseQiniuFileName
en el SDK.
Configurar para cancelar la carga y pausar la carga:
Consulte la sección de demostración, data.cancelTask
en index.js
. El método cancelTask
en qiniuUploader.js
de SDK.
Además, la página de demostración tiene una demostración de la interfaz de usuario que interrumpe la carga.
Limite los tipos de archivos cargados:
Admite archivos de imagen, archivos de video y otros archivos (PDF (.pdf), Word (.doc/.docx), Excel (.xls/.xlsx), PowerPoint (.ppt/.pptx) y otros formatos de archivo).
La página index.wxml
en la sección de demostración tiene demostraciones de UI para cargar imágenes (desde el álbum) y cargar archivos (desde la sesión del cliente).
Al descargar archivos a través de fileURL, personalice el nombre de la descarga
Consulte: Qiniu Cloud "Almacenamiento de objetos > Manual del producto > Descargar recursos > Configuración de descarga > Nombre de descarga de recursos personalizados" (https://developer.qiniu.com/kodo/manual/1659/download-setting) Por ejemplo: fileUrl es http://xxx.com/keyyyyy
, abra el archivo descargado desde este enlace directamente en el navegador, el nombre del archivo es "keyyyyy".
Si desea personalizar el nombre del archivo descargado como "myName", puede descargarlo a través de: http://xxx.com/keyyyyy?attname=myName
, es decir, "fileUrl" + "?attname=" + " nombre de archivo personalizado" Way.
Inicie sesión en https://github.com
Bifurcación [email protected]:gpake/qiniu-wxapp-sdk.git
Crea tu rama de funciones (git checkout -b new-feature)
Confirme sus cambios (git commit -am 'Se agregaron algunas funciones o se corrigió un error')
Envíe su registro de cambios al repositorio remoto de git (nueva característica de git push origin)
Luego vaya al sitio web de github e inicie una solicitud de extracción en la rama de nuevas funciones del repositorio remoto de git.
LICENCIA GPL V3