SDK Program Mini WeChat dikembangkan berdasarkan Qiniu Cloud API
Qiniu-wxapp-SDK adalah implementasi Qiniu Cloud pada program mini. Fungsi jaringan mengandalkan API program mini WeChat. Anda dapat dengan mudah mengunggah file ke Qiniu Cloud dalam program mini berdasarkan SDK.
Qiniu-wxapp-SDK adalah SDK klien dan tidak menyertakan implementasi pembuatan token. Untuk alasan keamanan, disarankan untuk mendapatkan token dari server melalui jaringan. Untuk kode pembuatan spesifik, silakan merujuk ke dokumentasi SDK server berikut. Bagian ini saat ini tidak disertakan dalam Demo SDK.
Fitur lainnya sedang dalam pengembangan, jadi pantau terus.
Unduh qiniuUploader.js dari github dan impor proyek program mini.
Sebelum menggunakan SDK, Anda harus mendaftarkan akun Qiniu Cloud terlebih dahulu dan masuk ke konsol untuk mendapatkan sepasang AccessKey dan SecretKey yang valid. Anda dapat membaca Cara Mengakses Qiniu dan Mekanisme Keamanan untuk mempelajari lebih lanjut tentang cara menggunakan dan mengelola kunci dengan benar .
SDK bergantung pada server untuk mengeluarkan uptoken, yang dapat dicapai dengan dua cara berikut:
Anda perlu mengetahui di wilayah mana存储空间
Qiniu Anda diatur, seperti Tiongkok Timur, Tiongkok Selatan, dll., lihat Pengaturan Regional
Layanan backend harus memberikan alamat URL agar applet dapat meminta alamat dan mendapatkan uptoken. Setelah permintaan berhasil, server harus mengembalikan json dalam format berikut (termasuk setidaknya bidang uptoken):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
Sesuai dengan存储空间
Qiniu yang Anda buat, tambahkan alamat unggah https yang sesuai ke daftar putih akses program mini.
- Masuk ke platform publik WeChat, buka Pengaturan - Pengaturan Pengembangan , dan klik tautan " Ubah " di bawah Konfigurasi Server .
- Ubah nama domain uploadFile (misalnya, alamat unggahan https Tiongkok Timur adalah:
https://up.qiniup.com
. Jika Anda tidak tahu apa yang harus ditulis di alamat tersebut, silakan merujuk ke lampiran alamat https)- Jika Anda perlu mengunduh file, Anda juga perlu menetapkan nama domain downloadFile sebagai alamat unduhan keranjang Anda.
- Simpan saja
Nama bidang | isi |
---|---|
meminta nama domain | https://ServceAnda.com |
nama domain uploadFile | https://up.qiniup.com (isi sesuai tempat penyimpanan) |
unduh nama domain File | https://baldkf.bkt.clouddn.com |
Antarmuka unggah file Qiniu Cloud, file ditransfer ke antarmuka yang cocok, dan tempat penyimpanan sesuai dengan alamat HTTPS.
tempat penyimpanan | kode wilayah | alamat HTTPS |
---|---|---|
Cina Timur | ECN | https://up.qiniup.com |
Cina Utara | NCN | https://up-z1.qiniup.com |
Cina Selatan | SCN | https://up-z2.qiniup.com |
Amerika Utara | TIDAK | https://up-na0.qiniup.com |
Singapura | ASG | https://up-as0.qiniup.com |
Catatan!! WeChat saat ini membatasi daftar putih nama domain hanya tiga modifikasi per bulan.
Mendukung sementara satu metode instalasi
Kloning repositori secara langsung
git clone https://github.com/gpake/qiniu-wxapp-sdk.git
File qiniuUploader.js dan qiniuUploader.ts ada di direktori SDK proyek ini.
Disarankan untuk merujuk pada penggunaan demo dan mulai dengan mengunggah peristiwa yang terikat pada tombol UI di halaman demo index.wxml
. Komentarnya sangat detail.
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' ) ;
}
} ) ;
}
} ) ;
}
} )
Silakan gunakan alat pengembang web WeChat untuk membuka folder demo, lalu konfigurasikan parameter yang relevan di index.js untuk menggunakan demo.
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
}
Area penyimpanan ruang penyimpanan dapat dipilih saat membuat ruang penyimpanan.
SDK mengandalkan uptoken
, yang dapat diatur secara langsung, dengan memberikan alamat permintaan Ajax uptokenURL
, atau dengan menyediakan fungsi uptokenFunc
yang dapat mengembalikan 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
} ;
Jika Anda ingin mengetahui lebih lanjut tentang strategi pengunggahan Qiniu, disarankan agar Anda membaca dengan cermat dokumentasi resmi Qiniu - Unggah. Strategi pengunggahan Qiniu ditentukan dalam layanan back-end.
Misalnya: Qiniuyun Java SDK menyebutkan bahwa variabel ajaib dapat menentukan bahwa setelah mengunggah file, objek yang dikembalikan berisi bidang: ukuran file fsize
, jenis file mimeType
dll.
Jika Anda ingin tahu lebih banyak tentang pemrosesan gambar Qiniu, Anda disarankan untuk membaca dengan cermat dokumentasi resmi Qiniu - Pemrosesan Gambar
Saat contoh SDK menghasilkan uptotken, Bucket Name
yang ditentukan adalah ruang publik, sehingga sumber daya setelah pengunggahan berhasil dapat diakses secara publik. Jika Bucket Name
yang ditentukan saat Anda membuat uptoken adalah ruang pribadi, Anda perlu melakukan pemrosesan tambahan di server untuk mengakses sumber daya yang Anda unggah. Untuk detailnya, lihat Mengunduh Sertifikat. Beberapa fungsi pemrosesan data SDK tidak berlaku untuk ruang pribadi.
Tentang mengunggah kunci
Jika kunci file tidak ditentukan saat mengunggah, tmp filePath yang diperoleh wx.chooesImage
akan digunakan sebagai kunci file. Misalnya: tmp_xxxxxxx.jpg
.
Alternatifnya, Anda dapat menggunakan kunci yang ditetapkan oleh server qiniu (deduplikasi global). Misalnya: Fh6qfpY...
(cara yang disarankan)
Nama file yang dibuat secara otomatis oleh WeChat lebih panjang, sehingga URL file menjadi lebih panjang. Disarankan untuk menggunakan kombinasi {qiniuShouldUseQiniuFileName: true} + "Saat mengunduh file melalui fileURL, sesuaikan nama unduhan".
Untuk detailnya, silakan lihat atribut shouldUseQiniuFileName
di index.js
demo dan atribut qiniuShouldUseQiniuFileName
di SDK.
Setel untuk membatalkan unggahan dan menjeda unggahan:
Silakan lihat bagian demo, data.cancelTask
di index.js
. Metode cancelTask
di qiniuUploader.js
dari SDK.
Selain itu, halaman demo memiliki demonstrasi UI yang mengganggu pengunggahan.
Batasi jenis file yang diunggah:
Mendukung file gambar, file video, dan file lainnya (PDF (.pdf), Word (.doc/.docx), Excel (.xls/.xlsx), PowerPoint (.ppt/.pptx) dan format file lainnya).
Halaman index.wxml
di bagian demo memiliki demonstrasi UI untuk mengunggah gambar (dari album) dan mengunggah file (dari sesi klien).
Saat mengunduh file melalui fileURL, sesuaikan nama unduhan
Silakan merujuk ke: Qiniu Cloud "Penyimpanan Objek > Manual Produk > Sumber Daya Unduhan > Pengaturan Unduhan > Nama Unduhan Sumber Daya Kustom" (https://developer.qiniu.com/kodo/manual/1659/download-setting) Misalnya: fileUrl adalah http://xxx.com/keyyyyy
, buka file yang diunduh dari link ini langsung di browser, nama filenya adalah "keyyyyy".
Jika Anda ingin menyesuaikan nama file yang diunduh sebagai "myName", Anda dapat mengunduhnya melalui: http://xxx.com/keyyyyy?attname=myName
, yaitu, "fileUrl" + "?attname=" + " nama file khusus" Cara.
Masuk ke https://github.com
Garpu [email protected]:gpake/qiniu-wxapp-sdk.git
Buat cabang fitur Anda (git checkout -b fitur baru)
Komit perubahan Anda (git commit -am 'Menambahkan beberapa fitur atau memperbaiki bug')
Kirimkan catatan perubahan Anda ke repositori git jarak jauh (fitur baru git push origin)
Lalu buka situs web github dan mulai Permintaan Tarik di bawah cabang fitur baru dari repositori jarak jauh git.
LISENSI GPL V3