تم تطوير برنامج WeChat Mini SDK استنادًا إلى Qiniu Cloud API
Qiniu-wxapp-SDK هو تطبيق Qiniu Cloud على البرنامج المصغر. تعتمد وظائف الشبكة على واجهة برمجة تطبيقات برنامج WeChat المصغر. يمكنك بسهولة تحميل الملفات إلى Qiniu Cloud في البرنامج الصغير المعتمد على SDK.
Qiniu-wxapp-SDK هو عميل SDK ولا يتضمن تنفيذ إنشاء الرمز المميز لأسباب أمنية، يوصى بالحصول على الرمز المميز من الخادم عبر الشبكة للحصول على رمز إنشاء محدد، يرجى الرجوع إلى وثائق SDK للخادم التالية. لم يتم تضمين هذا الجزء حاليًا في الإصدار التجريبي من SDK.
الميزات الأخرى قيد التطوير، لذا تابعونا.
قم بتنزيل qiniuUploader.js من github واستورد مشروع البرنامج المصغر.
قبل استخدام SDK، يجب عليك أولاً تسجيل حساب Qiniu Cloud وتسجيل الدخول إلى وحدة التحكم للحصول على زوج من AccessKey وSecretKey صالحين. يمكنك قراءة كيفية الوصول إلى Qiniu وآلية الأمان لمعرفة المزيد حول كيفية استخدام المفاتيح وإدارتها بشكل صحيح .
تعتمد SDK على الخادم لإصدار الرمز المميز، وهو ما يمكن تحقيقه بالطريقتين التاليتين:
أنت بحاجة إلى معرفة المنطقة التي تم تعيين存储空间
Qiniu الخاصة بك فيها، مثل شرق الصين وجنوب الصين وما إلى ذلك، راجع الإعدادات الإقليمية
يجب أن توفر خدمة الواجهة الخلفية عنوان URL للتطبيق الصغير لطلب العنوان والحصول على الرمز المميز. بعد نجاح الطلب، يجب على الخادم إرجاع json بالتنسيق التالي (بما في ذلك حقل uptoken على الأقل):
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
وفقًا存储空间
Qiniu التي أنشأتها، أضف عنوان تحميل https المقابل إلى القائمة البيضاء للوصول للبرنامج الصغير. الطريقة هي كما يلي:
- قم بتسجيل الدخول إلى منصة WeChat العامة، وانتقل إلى الإعدادات - إعدادات التطوير ، وانقر على الرابط " تعديل " ضمن تكوين الخادم .
- قم بتعديل اسم نطاق uploadFile (على سبيل المثال، عنوان تحميل شرق الصين https هو:
https://up.qiniup.com
. إذا كنت لا تعرف ما تكتبه في العنوان، فيرجى الرجوع إلى ملحق عنوان https)- إذا كنت بحاجة إلى تنزيل ملف، فستحتاج أيضًا إلى تعيين اسم مجال downloadFile كعنوان تنزيل الحاوية الخاصة بك.
- فقط احفظه
اسم الحقل | محتوى |
---|---|
طلب اسم المجال | https://yourServce.com |
اسم مجال التحميل | https://up.qiniup.com (املأ وفقًا لمساحة التخزين) |
اسم نطاق ملف التنزيل | https://baldkf.bkt.clouddn.com |
واجهة تحميل الملفات Qiniu Cloud، يتم نقل الملفات إلى الواجهة المطابقة، وتتوافق منطقة التخزين مع عنوان HTTPS، يرجى الرجوع إلى الوثائق الرسمية.
منطقة التخزين | كود المنطقة | عنوان HTTPS |
---|---|---|
شرق الصين | إن | https://up.qiniup.com |
شمال الصين | إن سي إن | https://up-z1.qiniup.com |
جنوب الصين | SCN | https://up-z2.qiniup.com |
أمريكا الشمالية | غير متوفر | 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 هو http://xxx.com/keyyyyy
، افتح الملف الذي تم تنزيله من هذا الرابط مباشرة في المتصفح، اسم الملف هو "keyyyyy".
إذا كنت تريد تخصيص اسم الملف الذي تم تنزيله ليكون "myName"، فيمكنك تنزيله من خلال: http://xxx.com/keyyyyy?attname=myName
، أي "fileUrl" + "?attname=" + " اسم الملف المخصص" الطريق.
قم بتسجيل الدخول إلى https://github.com
شوكة [email protected]:gpake/qiniu-wxapp-sdk.git
قم بإنشاء فرع الميزات الخاص بك (git checkout -b new-feature)
تنفيذ تغييراتك (git الالتزام -am "تمت إضافة بعض الميزات أو إصلاح الخلل")
أرسل سجل التغيير الخاص بك إلى مستودع git البعيد (ميزة git Push Origin الجديدة)
ثم انتقل إلى موقع github وابدأ طلب السحب ضمن فرع الميزات الجديدة لمستودع git البعيد.
رخصة جي بي إل V3