WeChat Mini Program SDK, разработанный на основе Qiniu Cloud API
Qiniu-wxapp-SDK — это реализация Qiniu Cloud в мини-программе. Сетевые функции основаны на API мини-программы WeChat. Вы можете легко загружать файлы в Qiniu Cloud в мини-программе на базе SDK.
Qiniu-wxapp-SDK — это клиентский SDK, который не включает реализацию генерации токена. По соображениям безопасности рекомендуется получать токен с сервера через сеть. Для получения информации о конкретном коде генерации см. следующую документацию по серверному SDK. Эта часть в настоящее время не включена в демо-версию SDK.
Другие функции находятся в стадии разработки, поэтому следите за обновлениями.
Загрузите qiniuUploader.js с github и импортируйте проект мини-программы.
Перед использованием SDK необходимо сначала зарегистрировать учетную запись Qiniu Cloud и войти в консоль, чтобы получить пару действительных ключей AccessKey и SecretKey. Вы можете прочитать «Как получить доступ к Qiniu и механизму безопасности», чтобы узнать больше о том, как правильно использовать ключи и управлять ими. .
SDK полагается на то, что сервер выдает uptoken, что может быть достигнуто двумя следующими способами:
Вам необходимо знать, в каком регионе находится ваше存储空间
Qiniu, например Восточный Китай, Южный Китай и т. д., см. Региональные настройки.
Внутренняя служба должна предоставить URL-адрес, чтобы апплет мог запросить адрес и получить аптокен. После успешного запроса сервер должен вернуть json в следующем формате (включая как минимум поле uptoken):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
В соответствии с созданным вами存储空间
Qiniu добавьте соответствующий адрес загрузки https в белый список доступа мини-программы. Метод следующий:
- Войдите на общедоступную платформу WeChat, перейдите в «Настройки» — «Настройки разработки » и нажмите ссылку « Изменить » в разделе «Конфигурация сервера ».
- Измените имя домена uploadFile (например, адрес загрузки https в Восточном Китае:
https://up.qiniup.com
. Если вы не знаете, что написать в адресе, обратитесь к приложению с адресом https).- Если вам нужно загрузить файл, вам также необходимо установить доменное имя downloadFile в качестве адреса загрузки корзины.
- Просто сохрани это
Имя поля | содержание |
---|---|
запросить доменное имя | https://yourServce.com |
доменное имя uploadFile | https://up.qiniup.com (заполняем в зависимости от места хранения) |
доменное имя файла загрузки | https://baldkf.bkt.clouddn.com |
Интерфейс загрузки файлов Qiniu Cloud, файлы передаются в соответствующий интерфейс, а область хранения соответствует адресу HTTPS. См. официальную документацию.
складское помещение | код города | HTTPS-адрес |
---|---|---|
Восточный Китай | ECN | https://up.qiniup.com |
Северный Китай | НКН | https://up-z1.qiniup.com |
Южный Китай | СКН | https://up-z2.qiniup.com |
Северная Америка | NA | https://up-na0.qiniup.com |
Сингапур | ПГС | https://up-as0.qiniup.com |
Примечание! В настоящее время WeChat ограничивает белый список доменных имен тремя модификациями в месяц.
Временно поддерживает один метод установки
Клонировать репозиторий напрямую
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
Файлы qiniuUploader.js и qiniuUploader.ts находятся в каталоге sdk этого проекта.
Рекомендуется обратиться к использованию демо-версии и начать с загрузки событий, привязанных к кнопкам пользовательского интерфейса, на странице index.wxml
демо-версии. Комментарии очень подробные.
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' ) ;
}
} ) ;
}
} ) ;
}
} )
Используйте инструменты веб-разработчика WeChat, чтобы открыть папку демонстрационной версии, а затем настройте соответствующие параметры в index.js для использования демо-версии.
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
}
Область хранения места для хранения можно выбрать при создании места для хранения.
SDK использует uptoken
, который можно установить напрямую, предоставив адрес запроса Ajax uptokenURL
или предоставив функцию uptokenFunc
, которая может возвращать 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
} ;
Если вы хотите узнать больше о стратегии загрузки Qiniu, рекомендуется внимательно прочитать официальную документацию Qiniu — Загрузка. Стратегия загрузки Qiniu указана во внутренней службе.
Например: Qiniuyun java sdk упомянул, что магические переменные могут указывать, что после загрузки файла возвращаемый объект содержит поля: размер файла fsize
, тип файла mimeType
и т. д.
Если вы хотите узнать больше об обработке изображений Qiniu, рекомендуется внимательно прочитать официальную документацию Qiniu — Обработка изображений.
Когда пример SDK генерирует uptotken, указанное Bucket Name
является общедоступным пространством, поэтому ресурсы после успешной загрузки могут быть общедоступными. Если Bucket Name
указанное при создании аптокена, является частным пространством, вам потребуется выполнить дополнительную обработку на сервере для доступа к загруженным вами ресурсам. Подробности см. в разделе Загрузка сертификатов. Некоторые функции обработки данных SDK неприменимы к частным пространствам.
О загрузке ключей
Если ключ файла не указан при загрузке, в качестве ключа файла будет использоваться tmp filePath, полученный с помощью wx.chooesImage
. Например: tmp_xxxxxxx.jpg
.
Альтернативно вы можете использовать ключ, назначенный сервером qiniu (глобальная дедупликация). Например: Fh6qfpY...
(рекомендуемый способ)
Имя файла, автоматически сгенерированное WeChat, длиннее, что приводит к более длинному URL-адресу файла. Рекомендуется использовать комбинацию {qiniuShouldUseQiniuFileName: true} + «При загрузке файлов через fileURL настройте имя загрузки».
Подробности см. в атрибуте shouldUseQiniuFileName
в index.js
демо-версии и в атрибуте qiniuShouldUseQiniuFileName
в SDK.
Установите отмену загрузки и приостановку загрузки:
См. демонстрационный раздел data.cancelTask
в index.js
. Метод cancelTask
в qiniuUploader.js
из sdk.
Кроме того, на демонстрационной странице есть демонстрация пользовательского интерфейса, которая прерывает загрузку.
Ограничьте типы загружаемых файлов:
Поддерживает файлы изображений, видеофайлы и другие файлы (PDF (.pdf), Word (.doc/.docx), Excel (.xls/.xlsx), PowerPoint (.ppt/.pptx) и другие форматы файлов).
На странице index.wxml
в демонстрационном разделе представлены демонстрации пользовательского интерфейса для загрузки изображений (из альбома) и загрузки файлов (из сеанса клиента).
При загрузке файлов через fileURL настройте имя загрузки.
См.: Qiniu Cloud «Хранилище объектов > Руководство по продукту > Ресурсы загрузки > Настройки загрузки > Имя загрузки пользовательского ресурса» (https://developer.qiniu.com/kodo/manual/1659/download-setting). Например: fileUrl is http://xxx.com/keyyyyy
, откройте скачанный по этой ссылке файл прямо в браузере, имя файла «keyyyyy».
Если вы хотите настроить имя загруженного файла как «myName», вы можете загрузить его через: http://xxx.com/keyyyyy?attname=myName
, то есть «fileUrl» + «?attname=" + " индивидуальное имя файла" Way.
Войдите на https://github.com.
Форк [email protected]:gpake/qiniu-wxapp-sdk.git
Создайте свою ветку функций (git checkout -b new-feature)
Зафиксируйте изменения (git commit -am 'Добавлены некоторые функции или исправлена ошибка')
Отправьте запись об изменении в удаленный репозиторий git (новая функция git push origin).
Затем перейдите на сайт github и инициируйте запрос на включение в ветке новых функций удаленного репозитория git.
ЛИЦЕНЗИЯ GPL V3