شاركت هذه المقالة نسخة مفصلة من واجهة JS WeChat للرجوع إليها. المحتوى المحدد كما يلي
التعليمات الأساسية
تعليمات للاستخدام
1. ملفات ملفات JS
قدم ملف JS التالي على الصفحة التي تحتاج إلى استدعاء واجهة JS (دعم https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
ملاحظة: دعم التحميل باستخدام طريقة تحميل الوحدة النمطية القياسية AMD/CMD
2. حقن وتكوين واجهة التكوين
يجب على جميع الصفحات التي تحتاج إلى استخدام JSSDK أولاً حقن معلومات التكوين ، وإلا فلن يتم استدعاؤها (يجب استدعاء عنوان URL نفسه مرة واحدة فقط ، وتطبيق الويب الخاص بالمنتجع الصحي الذي يغير عنوان URL في كل مرة يتغير عنوان URL).
wx.config ({debug: true ، // قم بتشغيل وضع التصحيح ، سيتم تنبيه قيم الإرجاع لجميع واجهات برمجة التطبيقات التي تسمى على العميل. لعرض المعلمات التي تم تمريرها ، يمكنك فتحها على جانب الكمبيوتر الشخصي ، وسيتم طباعة معلومات المعلمة من خلال الحيل الرسمي ، وسيتم طباعتها فقط على جانب الكمبيوتر. noncestr: '' ، // المطلوبة ، السلسلة العشوائية التي تم إنشاؤها لتوقيع التوقيع: '' ، // مطلوب ، يتم عرض التوقيع في الملحق 1 jsapilist: [] // مطلوب ، قائمة واجهات JS التي سيتم استخدامها ، ويتم سرد جميع واجهات JS في التذييل 2}) ؛3. تحقق من خلال الواجهة الجاهزة
wx.ready (function () {// بعد التحقق من معلومات التكوين ، سيتم تنفيذ الطريقة الجاهزة. يجب الحصول على جميع مكالمات الواجهة بعد أن تحصل واجهة التكوين على النتيجة. التكوين عبارة ولا تحتاج إلى وضع في الوظيفة الجاهزة.4. فشل التحقق من واجهة الخطأ
wx.error (function (res) {// إذا فشلت معلومات التكوين في التحقق ، سيتم تنفيذ وظيفة الخطأ. إذا انتهت صلاحية التوقيع ، فسوف يفشل التحقق. للحصول على رسائل خطأ محددة ، يمكنك فتح وضع التصحيح للتكوين لعرضه ، أو يمكنك عرضه في المعلمة RES التي تم إرجاعها. بالنسبة إلى SPAS ، يمكنك تحديث التوقيع هنا.}) ؛تعليمات استدعاء واجهة
يتم استدعاء جميع الواجهات من خلال كائنات WX (يمكن أيضًا استخدامها باستخدام كائنات Jweixin). المعلمات هي كائن. بالإضافة إلى المعلمات التي تحتاج كل واجهة بحد ذاتها إلى تمريرها ، هناك أيضًا المعلمات العامة التالية:
1. النجاح: تم تنفيذ وظيفة رد الاتصال عندما يتم استدعاء الواجهة بنجاح.
2. الفشل: وظيفة رد الاتصال التي تم تنفيذها عند فشل مكالمات الواجهة.
3. أكمل: تم تنفيذ وظيفة رد الاتصال عند اكتمال استدعاء الواجهة ، وسيتم تنفيذها بغض النظر عن النجاح أو الفشل.
4. إلغاء: وظيفة رد الاتصال عندما ينقر المستخدم على الإلغاء ، سيتم استخدام بعض واجهات برمجة التطبيقات التي لديها مستخدمين فقط.
5. الزناد: طريقة تستمع إلى الزناد عند النقر فوق زر في القائمة. هذه الطريقة تدعم الواجهات ذات الصلة فقط في القائمة.
تحتوي جميع الوظائف أعلاه على معلمة ، كائن النوع ، بالإضافة إلى البيانات التي يتم إرجاعها بواسطة كل واجهة بحد ذاتها ، هناك أيضًا خاصية شائعة ، تنسيق قيمته كما يلي:
1. عندما تكون المكالمة ناجحة: "xxx: ok" ، حيث xxx هو اسم واجهة المكالمة
2. عندما يلغي المستخدم: "xxx: cancel" ، حيث xxx هو اسم الواجهة المسمى
3. عندما تفشل المكالمة: تكون قيمتها رسالة خطأ محددة
الواجهة الأساسية
تحديد ما إذا كان إصدار العميل الحالي يدعم واجهة JS المحددة
wx.checkjsapi ({jsapilist: ['chickImage'] // قائمة واجهات JS التي يجب اكتشافها ، يتم سرد جميع واجهات JS في التذييل 2 ، النجاح: الوظيفة (res) {// إرجاع كأزواج القيمة الرئيسية ، وقيمة واجهة برمجة التطبيقات المتاحة ، وليست متاحة كخطأ // على سبيل المثال: {"checkResult": {"choiceImage": true} ، "errmsg": "checkjsapi: ok"}}) ؛واجهة مشاركة
احصل على حالة النقر لزر "مشاركة لحظات" وتخصيص واجهة محتوى المشاركة
WX.OnmenushAretimeline ({title: '' ، // sark title link: '' ، // share link imgurl: '' ، // share icon icon success: function () {// callback function extens exeries exeries exeries}}}احصل على حالة النقر فوق الزر "مشاركة إلى الأصدقاء" وتخصيص واجهة محتوى المشاركة
Wx.OnmenShareAppMessage ({title: '' ، // مشاركة العنوان desc: '' ، // مشاركة الوصف الرابط: '' ، // مشاركة الرابط Imgurl: '' ، // مشاركة نوع الأيقونة: '' ، // مشاركة نوع أو موسيقى أو رابط ، لا تملأ الرابط الافتراضي: " {// وظيفة رد الاتصال التي تم تنفيذها بعد أن تؤكد المستخدم المشاركة} ، إلغاء: الدالة () {// تم تنفيذ وظيفة رد الاتصال بعد أن يلغي المستخدم المشاركة}}) ؛احصل على حالة النقر فوق الزر "مشاركة إلى QQ" وتخصيص واجهة محتوى المشاركة
wx.onmenushareqq ({title: '' ، // مشاركة العنوان desc: '' ، // مشاركة الوصف الرابط: '' ، // ارتباط مشاركة imgurl: '' // مشاركة أيقونة النجاح: الدالة () {// وظيفة رد الاتصال التي تم تنفيذها بعد تأكيد المستخدم على المشاركة} ، إلغاء: function () {// وظيفة الكالفة التي تم تنفيذيها بعد إلغاء استخدام المستخدم}}}) ؛احصل على حالة النقر لزر "Share to Tencent Weibo" وتخصيص واجهة محتوى المشاركة
wx.onmenushareweibo ({title: '' ، // مشاركة العنوان desc: '' ، // مشاركة الوصف الرابط: '' ، // مشاركة الرابط imgurl: '' // share icon success: function () {// callback exerved exeries the user the using} ، cancel: function () {// callback function exter the user the user the scare}} ؛واجهة الصورة
التقط صورة أو حدد صورة من واجهة ألبوم الهاتف المحمول
wx.ChooseImage ({success: function (res) {var localids = res.localids ؛ // إرجاع قائمة المعرف المحلي للصورة المحددة.معاينة واجهة الصورة
wx.previewImage ({current: '' ، // عنوان URL لارتباط الصورة المعروض حاليًا: [] // قائمة روابط الصور التي يجب معاينتها}) ؛تحميل واجهة الصورة
wx.uploadimage ({localId: '' ، // المعرف المحلي للصورة المراد تحميله ، يتم الحصول عليه من واجهة choiceImage isShowProgressPips: 1 // الافتراضي هو 1 ، ويتم عرض موجه التقدم النجاح: الدالة (الدقة) {var serverid ؛ //serverid ؛ملاحظة: يمكنك تنزيل الصورة التي تم تحميلها بواسطة WeChat باستخدام واجهة ملف الوسائط المتعددة. ServerId الذي تم الحصول عليه هنا هو media_id. وثيقة مرجعية ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
تنزيل واجهة الصورة
WX.DownloadImage ({serverId: '' ، // معرف جانب الخادم للصورة المراد تنزيله ، تم الحصول عليه من واجهة التحميل isShowProgressPressips: 1 // الافتراضي هو 1 ، ويتم عرض موجه التقدم النجاح: الدالة (الدقة) {var localid = res.localid ؛واجهة الصوت
ابدأ تسجيل واجهة
wx.startrecord () ؛
توقف عن التسجيل
wx.stoprecord ({success: function (res) {var localid = res.localid ؛}}) ؛واجهة التوقف التلقائية لرصد التسجيل
wx.onvoicerecordend ({// سيتم تنفيذ رد الاتصال الكامل عندما يتجاوز وقت التسجيل دقيقة واحدة ولا يتوقف. أكمل: الدالة (res) {var localid = res.localid ؛}}) ؛لعب الواجهة الصوتية
wx.playvoice ({localId: '' // المعرف المحلي للصوت المراد تشغيله ، تم الحصول عليه بواسطة واجهة StopRecord}) ؛وقفة واجهة التشغيل
wx.pausevoice ({localId: '' // المعرف المحلي للصوت الذي يجب إيقافه مؤقتًا ، تم الحصول عليه بواسطة واجهة StopRecord}) ؛توقف عن واجهة التشغيل
wx.stopvoice ({localId: '' // المعرف المحلي للصوت الذي يجب إيقافه ، يتم الحصول عليه بواسطة واجهة stopRecord}) ؛مراقبة واجهة التشغيل الصوتي
wx.onvoicePlayend ({serverId: '' ، // معرف جانب الخادم للصوت الذي يجب تنزيله ، الحصول على النجاح: الدالة (res) {var localid = res.localid ؛ // إرجاع المعرف المحلي للصوت}}) ؛تحميل الواجهة الصوتية
wx.uploadvoice ({localId: '' ، // المعرف المحلي للصوت الذي يحتاج إلى تحميل ، يتم الحصول عليه من واجهة stopRecord isShowProgressPsips: 1 // الافتراضي هو 1 ، عرض نجاح موجه التقدم: function (res) {var serverid = res.serverid ؛ملاحظة: يمكنك تنزيل الصوت الذي تم تحميله بواسطة واجهة ملفات الوسائط المتعددة في WeChat. ServerId الذي تم الحصول عليه هنا هو media_id. وثيقة مرجعية ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
تحميل الواجهة الصوتية
WX.DownloadVoice ({serverId: '' ، // معرف من جانب الخادم للصوت الذي يجب تنزيله ، يتم الحصول عليه من واجهة التحميل isShowProgressPressips: 1 // الافتراضي هو 1 ، ويتم عرض موجه التقدم الناجح: الدالة (res) {var localid = res.localid ؛واجهة ذكية
تحديد الصوت والعودة إلى واجهة نتيجة الاعتراف
wx.translatevoice ({localId: '' ، // المعرف المحلي للصوت الذي يجب الاعتراف به ، isShowProgressTips: 1 ، // الافتراضي هو 1 ، مع عرض النجاح المطري على التقدم: الدالة (res) {ALERT (res.translateresult) ؛ // نتيجة التعرف على الصوت}}}) ؛معلومات المعدات
الحصول على واجهة حالة الشبكة
wx.getNetworkType ({success: function (res) {var networktype = res.networktype ؛ // return network types 2g ، 3g ، 4g ، wifi}}) ؛الموقع الجغرافي
استخدم خريطة WeChat المدمجة لعرض واجهة الموقع
wx.openlocation ({latitude: 0 ، // latitude ، رقم النقطة العائمة ، النطاق هو 90 ~ -90 خط الطول: 0 ، // خط الطول ، رقم العائمة ، المدى هو 180 ~ -180. الاسم: '' ، // عنوان الموقع: '، // يتم عرضه في الجزء السفلي من واجهة موضع المشاهدة ، يمكنك النقر فوق القفز}) ؛احصل على واجهة تحديد الموقع الجغرافي
wx.getLocation ({timestamp: 0 ، // توقيع الموضع الزمنية ، قدمت noncestr: '' ، // الموضع سلسلة عشوائية ، يتم توفيرها فقط عندما يكون متوافقًا مع الإصدار 6.0.2 ، addrsign: '' ، // الموضع ، متوفر فقط عند التوافق مع الإصدار 6.0.2 ، انظر Appendix 4 للحصول على التفاصيل. 90 ~ -90 var latiture = res.latitude ؛تشغيل واجهة
إخفاء واجهة القائمة wx.hideoptionmenu () في الزاوية اليمنى العليا ؛
إظهار واجهة القائمة wx.showoptionmenu () في الزاوية اليمنى العليا ؛
أغلق واجهة نافذة الويب الحالية wx.closewindow () ؛
واجهة زر دافع إخفاء وظيفة
wx.hidemenuitems ({menulist: [] // لإخفاء عناصر القائمة ، انظر الملحق 3}) ؛واجهة زر عرض الدُفعات
WX.ShowMenuitems ({menulist: [] // يتم عرض جميع عناصر القائمة المراد عرضها في الملحق 3}) ؛إخفاء جميع واجهات الزر غير القاعدية wx.hideallnonbasemenuitem () ؛
إظهار جميع واجهة زر الوظيفة wx.showallnonbasemenuitem () ؛
مسح WeChat
انقر على واجهة مسح WeChat
wx.scanqrcode ({desc: 'scanqrcode desc' ، needresult: 0 ، // الافتراضي هو 0 ، تتم معالجة نتيجة المسح الضوئي بواسطة WeChat ، و 1 يعيد نتيجة المسح الضوئي مباشرة أو scantype: ["qrcode" ، "barcode"] Res.Resultstr ؛عنوان الحصاد
تحرير واجهة عنوان التسليم
wx.editaddress (الطابع الزمني: 0 ، // توقيع الموقع الزمني ، فقط إذا كان بحاجة إلى أن يكون متوافقًا مع الإصدار 6.0.2 ، noncestr: '' ، // توقيع الموقع العشوائي ، فقط إذا كان هناك حاجة إلى التوافق مع الإصدار 6.0.2. اسم المستخدم = اسم المرسى ؛ عنوان var var address = res.Address ؛
احصل على أقرب واجهة عنوان التسليم
wx.getlatestaddress ({timestamp: 0 ، // توقيع الموقع الزمني ، فقط إذا كان يحتاج إلى أن يكون متوافقًا مع الإصدار 6.0.2 ، noncestr: '، // توقيع الموقع العشوائي ، فقط إذا كان هناك حاجة إلى التوافق مع الإصدار 6.0 ، (res) {var username = username. // عنوان التسليم القياسي الوطني عنوان var var = res.Address ؛متجر WeChat
القفز إلى واجهة صفحة منتج WeChat
WX.OpenProductSpecificView ({productID: '' ، // product idviewtype: '' // 0. القيمة الافتراضية ، تفاصيل المنتج العادية صفحة 1. مسح تفاصيل المنتج الصفحة 2. تخزين صفحة تفاصيل المنتج}) ؛قسيمة بطاقة WeChat
حرر قائمة كوبونات البطاقات للمتاجر واحصل على قائمة اختيار المستخدم
wx.choosecard ({shopId: '' ، // store id cardtype: '' ، // نوع البطاقة cardid: '' ، // timestamp timestamp: 0 ، // معرف البطاقة الزمنية معلومات قائمة القسيمة التي حددها المستخدم}}) ؛أضف واجهة كوبون البطاقة على دفعات
wx.addcard ({cardlist: [{cardid: '' ، cardext: ''}] ، // قائمة قسيمة البطاقات التي يجب إضافتها النجاح: function (res) {var cardlist = res.cardList ؛ // معلومات قائمة قسيمة البطاقة}}) ؛تحقق من واجهة كوبون البطاقة في حزمة بطاقة WeChat
wx.opencard ({cardlist: [{cardid: '' ، الكود: ''}] // قائمة كوبونات البطاقات المراد فتحها}) ؛دفع WeChat
بدء طلب دفع WeChat
wx.choosewxpay ({timestamp: 0 ، // payer timestamp noncester: '' ، // package signature smooth random string package: '' ، // تفاصيل الطلب هي سلسلة ، راجع التذييل 5 ، paysign: '' ، // أن توقيع الدفع هي التفاصيل ، انظر التذييل 5}) ؛التذييل 1 - خوارزمية توقيع إذن JSSDK
JSAPI_TICKET
قبل إنشاء توقيع ، يجب أولاً فهم JSAPI_TICKET. JSAPI_TICKET هي تذكرة مؤقتة يستخدمها الحساب الرسمي للاتصال بواجهة WeChat JS. في ظل الظروف العادية ، تبلغ فترة صحة JSAPI_Ticket 7200 ثانية ، والتي يتم الحصول عليها من خلال Access_Token. نظرًا لأن عدد مكالمات API للحصول على JSAPI_TICKET محدود للغاية ، فإن التحديث المتكرر لـ JSAPI_TICKET سيؤدي إلى حدوث مكالمات API وتؤثر على أعمالهم الخاصة. يجب على المطورين ذاكرة التخزين المؤقت JSAPI_TICKET على مستوى العالم في خدماتهم.
1. راجع المستند التالي للحصول على Access_Token (صالح لمدة 7200 ثانية ، يجب على المطورين ذاكرة التخزين المؤقت access_token على مستوى العالم في خدمتهم):
2. استخدم Access_Token الذي تم الحصول عليه في الخطوة الأولى لطلب JSAPI_TICKET (صالح لمدة 7200 ثانية ، يجب على المطور تخزين JSAPI_TICKET عالميًا في خدمته): https://api.weixin.qq.com/cgi-bin/ticket/getticket؟
بإرجاع JSON التالي بنجاح:
{"errcode": 0 ، "errmsg": "ok" ، "ticket":بعد الحصول على JSAPI_TICKET ، يمكنك إنشاء توقيع للتحقق من إذن JSSDK.
خوارزمية التوقيع
قواعد توليد التوقيع هي كما يلي: الحقول المشاركة في التوقيع تشمل noncestr (سلسلة عشوائية) ، JSAPI_TICKET صالحة ، الطابع الزمني (الطابع الزمني) ، عنوان URL (عنوان URL لصفحة الويب الحالية ، لا يشمل # وأجزائه اللاحقة). بعد فرز جميع المعلمات المراد توقيعها من صغير إلى كبير (ترتيب القاموس) وفقًا لرمز ASCII لاسم الحقل ، يتم استخدام تنسيق زوج قيمة مفتاح URL (أي ، key1 = value1 & key2 = value2 ...) للوصول إلى سلسلة سلسلة 1. تجدر الإشارة هنا إلى أن جميع أسماء المعلمات هي أحرف صغيرة. يتم تشفير String1 ، ويتم إجراء اسم الحقل وقيمة الحقل على حد سواء ، ولا يتم تنفيذ أي هروب عن عنوان URL.
وهذا هو ، التوقيع = sha1 (String1). مثال:
• noncestr = wm3wzytpz0wzccnw
• JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1AOCHKP7QG
• الطابع الزمني = 1414587457
• url = http: //mp.weixin.qq.com
الخطوة 1. بعد فرز جميع المعلمات المراد توقيعها من صغير إلى كبير (ترتيب القاموس) وفقًا لرمز ASCII لاسم الحقل ، قم بربطها في سلسلة string1 باستخدام تنسيق زوج قيمة url (أي ، key1 = value1 & key2 = value2 ...):
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL 2fzfy1aochkp7qg & noncestr = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com
الخطوة 2. تسجيل سلسلة 1 مع SHA1 واحصل على توقيع:
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
أشياء يجب ملاحظتها
1. يجب أن يكون Noncester and Timestamp المستخدم للتوقيع هو نفسه غير المقياس والطابع الزمني في WX.Config.
2. يجب أن يكون عنوان URL المستخدم للتوقيع هو عنوان URL الكامل للصفحة التي تستدعي واجهة JS.
3. لأسباب أمنية ، يجب على المطورين تطبيق منطق التوقيع على جانب الخادم.
التذييل 2 - قائمة جميع واجهات JS
• onmenusharetimeline
• onmenushareappmessage
• onmenushareqq
• onmenushareweeibo
• StarTrecord
• StopRecord
• onvoicerecordend
• playvoice
• Pausevoice
• stopvoice
• onvoiceplayend
• تحميل
• DownloadVoice
• اختر igage
• معاينة
• تحميل
• DownloadImage
• TranslateVoice
• getNetworktype
• OpenLocation
• getLocation
• HideOptionMenu
• showoptionmenu
• HideMenuitems
• Showmenuitems
• Hideallnonbasemenuitem
• Showallnonbasemenuitem
• Closewindow
• Scanqrcode
• choosewxpay
• getlatestaddress
• Editaddress
• OpenProductSpecificView
• addcard
• ChooSecard
• Opencard
التذييل 3 - قائمة جميع الأزرار
الفئات الأساسية
• تقرير: "menuitem: exposearticle"
• اضبط الخط: "menuitem: setfont"
• وضع النهار: "Menuitem: Daymode"
• الوضع الليلي: "menuitem: Nightmode"
• تحديث: "menuitem: تحديث"
• عرض الحساب الرسمي (إضافة): "menuitem: ملف تعريف"
• عرض الحساب الرسمي (غير إضافي): "menuitem: addContact"
فئة الاتصال
• أرسل إلى صديق: "Menuitem: Share: AppMessage"
• شارك في اللحظات: "menuitem: مشاركة: الجدول الزمني"
• مشاركة إلى QQ: "Menuitem: Share: QQ"
• شارك في Weibo: "Menuitem: Share: Weiboapp"
• مجموعة: "مينويم: المفضل"
• شارك في FB: "Menuitem: Share: Facebook"
فئة الحماية
• تصحيح: "Menuitem: JSDebug"
• تحرير العلامة: "menuitem: edittag"
• حذف: "menuitem: حذف"
• نسخ الرابط: "menuitem: copyurl"
• صفحة الويب الأصلية: "Menuitem: Originpage"
• وضع القراءة: "menuitem: readMode"
• مفتوح في متصفح QQ: "Menuitem: OpenWithQQBrowser"
• مفتوح في سفاري: "Menuitem: OpenWithsafari"
• البريد الإلكتروني: "menuitem: مشاركة: البريد الإلكتروني"
• بعض الحسابات العامة الخاصة: "Menuitem: Share: Brand"
التذييل 4 - خوارزمية توقيع الموقع والعناوين
قواعد توليد AddRsign هي نفسها قوت JSSDK التحقق من إذن (انظر الملحق 1) ، ولكن معلمات التوقيع المشاركة مختلفة. معلمات التوقيع المشاركة في addrsign هي: AppID ، url (عنوان URL الحالي على الويب) ، الطابع الزمني ، noncester ، accessoken (بيانات اعتماد ترخيص المستخدم ، يرجى الرجوع إلى بروتوكول OAUTH2.0 للحصول على).
التذييل 5 - حقل تمديد الدفع وخوارزمية توليد التوقيع
تفاصيل الطلب (الحزمة) تعريف سلسلة التمديد
عندما يقوم التاجر بإعادة توجيه واجهة برمجة تطبيقات JS ، يحتاج التاجر إلى تحديد تفاصيل الطلب في هذا الوقت وجمع تفاصيل الطلب في الحزمة بطريقة معينة. بعد استدعاء API JS ، ستقوم WeChat بإنشاء أمر الدفع المسبق من خلال محتوى الحزمة. سيحدد ما يلي قائمة الحقول المطلوبة وطريقة التوقيع للحزمة. يجب ملاحظة الواجهة: جميع المعلمات الواردة هي أنواع السلسلة!
تم تجميع هذه المقالة في "ملخص لمهارات تطوير JavaScript WeChat" ، والجميع مرحب بهم للتعلم والقراءة.
أود أن أوصي برمجيًا لبرنامج WeChat Mini الذي يهتم للغاية: "تم تجميع" WeChat Mini Program Development Tutorial "بعناية من قبل محرر الجميع ، وآمل أن أعجبك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.