Das WeChat Mini Program SDK wurde basierend auf der Qiniu Cloud API entwickelt
Qiniu-wxapp-SDK ist die Implementierung von Qiniu Cloud im Miniprogramm. Die Netzwerkfunktionen basieren auf der WeChat-Miniprogramm-API. Mit dem auf dem SDK basierenden Miniprogramm können Sie ganz einfach Dateien in die Qiniu Cloud hochladen.
Qiniu-wxapp-SDK ist ein Client-SDK und enthält keine Implementierung der Token-Generierung. Aus Sicherheitsgründen wird empfohlen, das Token über das Netzwerk vom Server abzurufen. Informationen zum spezifischen Generierungscode finden Sie in der folgenden Server-SDK-Dokumentation. Dieser Teil ist derzeit nicht in der SDK-Demo enthalten.
Weitere Funktionen sind in der Entwicklung, also bleiben Sie dran.
Laden Sie qiniuUploader.js von Github herunter und importieren Sie das Miniprogrammprojekt.
Bevor Sie das SDK verwenden, müssen Sie zunächst ein Qiniu Cloud-Konto registrieren und sich bei der Konsole anmelden, um ein Paar gültiger AccessKeys und SecretKeys zu erhalten. Weitere Informationen zur korrekten Verwendung und Verwaltung von Schlüsseln finden Sie unter „Zugriff auf Qiniu und den Sicherheitsmechanismus“. .
Das SDK ist darauf angewiesen, dass der Server ein Uptoken ausstellt. Dies kann auf zwei Arten erreicht werden:
Sie müssen wissen, in welcher Region Ihr Qiniu-存储空间
eingerichtet ist, z. B. Ostchina, Südchina usw., siehe Regionaleinstellungen
Der Backend-Dienst sollte eine URL-Adresse für das Applet bereitstellen, um die Adresse anzufordern und das Uptoken zu erhalten. Nachdem die Anfrage erfolgreich war, sollte der Server JSON im folgenden Format zurückgeben (einschließlich mindestens des Uptoken-Felds):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
Fügen Sie entsprechend dem von Ihnen erstellten Qiniu存储空间
die entsprechende https-Upload-Adresse zur Zugriffs-Whitelist des Miniprogramms hinzu. Die Methode ist wie folgt:
- Melden Sie sich bei der öffentlichen WeChat-Plattform an, gehen Sie zu Einstellungen – Entwicklungseinstellungen und klicken Sie unter Serverkonfiguration auf den Link „ Ändern “.
- Ändern Sie den Domänennamen „uploadFile“ (die https-Upload-Adresse für Ostchina lautet beispielsweise:
https://up.qiniup.com
. Wenn Sie nicht wissen, was Sie in die Adresse schreiben sollen, lesen Sie bitte den Anhang zur https-Adresse).- Wenn Sie eine Datei herunterladen müssen, müssen Sie auch den Domänennamen „downloadFile“ als Bucket-Download-Adresse festlegen.
- Speichern Sie es einfach
Feldname | Inhalt |
---|---|
Domainnamen anfordern | https://yourServce.com |
uploadFile-Domänenname | https://up.qiniup.com (je nach Speicherbereich ausfüllen) |
downloadFile-Domänenname | https://baldkf.bkt.clouddn.com |
Qiniu Cloud-Datei-Upload-Schnittstelle, Dateien werden an die entsprechende Schnittstelle übertragen und der Speicherbereich entspricht der HTTPS-Adresse. Bitte beachten Sie die offizielle Dokumentation.
Lagerbereich | Vorwahl | HTTPS-Adresse |
---|---|---|
Ostchina | ECN | https://up.qiniup.com |
Nordchina | NCN | https://up-z1.qiniup.com |
Südchina | SCN | https://up-z2.qiniup.com |
Nordamerika | N / A | https://up-na0.qiniup.com |
Singapur | ASG | https://up-as0.qiniup.com |
Hinweis!! WeChat beschränkt die Domainnamen-Whitelist derzeit auf nur drei Änderungen pro Monat.
Unterstützt vorübergehend eine Installationsmethode
Klonen Sie das Repository direkt
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
Die Dateien qiniuUploader.js und qiniuUploader.ts befinden sich im SDK-Verzeichnis dieses Projekts.
Es wird empfohlen, sich auf die Verwendung der Demo zu beziehen und zunächst die an die UI-Schaltflächen gebundenen Ereignisse auf der Seite index.wxml
der Demo hochzuladen. Die Kommentare sind sehr detailliert.
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' ) ;
}
} ) ;
}
} ) ;
}
} )
Bitte öffnen Sie den Demo-Ordner mit den WeChat-Webentwicklertools und konfigurieren Sie dann die relevanten Parameter in index.js, um die Demo zu verwenden.
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
}
Der Lagerbereich des Lagerraums kann beim Anlegen des Lagerraums ausgewählt werden.
Das SDK basiert auf uptoken
, das direkt festgelegt werden kann, indem die Ajax-Anforderungsadresse uptokenURL
bereitgestellt wird oder indem eine Funktion uptokenFunc
bereitgestellt wird, die uptoken zurückgeben kann.
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
} ;
Wenn Sie mehr über die Upload-Strategie von Qiniu erfahren möchten, empfehlen wir Ihnen, die offizielle Dokumentation von Qiniu – Upload – sorgfältig zu lesen. Die Upload-Strategie von Qinius wird im Back-End-Dienst angegeben.
Beispiel: Qiniuyun Java SDK erwähnte, dass magische Variablen angeben können, dass das zurückgegebene Objekt nach dem Hochladen einer Datei folgende Felder enthält: Dateigröße fsize
, Dateityp mimeType
usw.
Wenn Sie mehr über die Bildverarbeitung von Qiniu erfahren möchten, wird empfohlen, die offizielle Dokumentation von Qiniu – Bildverarbeitung – sorgfältig zu lesen
Wenn das SDK-Beispiel Uptotken generiert, ist der angegebene Bucket Name
ein öffentlicher Bereich, sodass nach erfolgreichem Upload öffentlich auf die Ressourcen zugegriffen werden kann. Wenn es sich bei dem beim Generieren des Uptokens angegebenen Bucket Name
um einen privaten Bereich handelt, müssen Sie eine zusätzliche Verarbeitung auf dem Server durchführen, um auf die von Ihnen hochgeladenen Ressourcen zuzugreifen. Einzelheiten finden Sie unter Herunterladen von Zertifikaten. Einige SDK-Datenverarbeitungsfunktionen sind nicht auf private Bereiche anwendbar.
Informationen zum Hochladen von Schlüsseln
Wenn der Dateischlüssel beim Hochladen nicht angegeben wird, wird der von wx.chooesImage
erhaltene tmp-Dateipfad als Dateischlüssel verwendet. Zum Beispiel: tmp_xxxxxxx.jpg
.
Alternativ können Sie den vom Qiniu-Server zugewiesenen Schlüssel verwenden (globale Deduplizierung). Zum Beispiel: Fh6qfpY...
(empfohlener Weg)
Der von WeChat automatisch generierte Dateiname ist länger, was zu einer längeren Datei-URL führt. Es wird empfohlen, die Kombination aus {qiniuShouldUseQiniuFileName: true} + „Beim Herunterladen von Dateien über fileURL den Downloadnamen anpassen“ zu verwenden.
Einzelheiten finden Sie shouldUseQiniuFileName
im index.js
der Demo und im Attribut qiniuShouldUseQiniuFileName
im SDK.
So stellen Sie ein, dass der Upload abgebrochen und der Upload angehalten werden soll:
Bitte sehen Sie sich den Demoabschnitt data.cancelTask
in index.js
an. Die cancelTask
-Methode in qiniuUploader.js
von SDK.
Darüber hinaus verfügt die Demoseite über eine UI-Demonstration, die das Hochladen unterbricht.
Begrenzen Sie die Arten der hochgeladenen Dateien:
Unterstützt Bilddateien, Videodateien und andere Dateien (PDF (.pdf), Word (.doc/.docx), Excel (.xls/.xlsx), PowerPoint (.ppt/.pptx) und andere Dateiformate).
Die index.wxml
-Seite im Demo-Bereich enthält UI-Demonstrationen für das Hochladen von Bildern (aus dem Album) und das Hochladen von Dateien (aus der Client-Sitzung).
Passen Sie beim Herunterladen von Dateien über fileURL den Downloadnamen an
Weitere Informationen finden Sie unter: Qiniu Cloud „Objektspeicher > Produkthandbuch > Ressourcen herunterladen > Einstellungen herunterladen > Name des benutzerdefinierten Ressourcen-Downloads“ (https://developer.qiniu.com/kodo/manual/1659/download-setting). Beispiel: fileUrl ist http://xxx.com/keyyyyy
, öffnen Sie die über diesen Link heruntergeladene Datei direkt im Browser, der Dateiname lautet „keyyyyy“.
Wenn Sie den Namen der heruntergeladenen Datei als „meinName“ anpassen möchten, können Sie ihn über http://xxx.com/keyyyyy?attname=myName
herunterladen, also „fileUrl“ + „?attname=" + " benutzerdefinierter Dateiname" Weg.
Melden Sie sich bei https://github.com an
Fork [email protected]:gpake/qiniu-wxapp-sdk.git
Erstellen Sie Ihren Feature-Zweig (git checkout -b new-feature)
Übernehmen Sie Ihre Änderungen (git commit -am 'Einige Funktionen hinzugefügt oder einen Fehler behoben')
Senden Sie Ihren Änderungsdatensatz an das Remote-Git-Repository (git push origin new-feature)
Gehen Sie dann zur Github-Website und initiieren Sie eine Pull-Anfrage unter dem Zweig „Neue Funktionen“ des Git-Remote-Repositorys.
GPL V3-LIZENZ