ينفذ Html5 عملية مشاركة المحتوى وتخصيصه على WeChat

كان هناك مشروع حديث يتطلب مشاركة WeChat والحاجة إلى تخصيص محتوى مشاركة WeChat نظرًا لأن هذه كانت المرة الأولى التي أتعرض فيها لمشاركة WeChat، فقد سجلت بعض المشكلات التي واجهتها أثناء العملية، بالإضافة إلى عملية الإكمال بأكملها. الوظيفة.

فيما يلي العملية العامة (توضع التفاصيل في كل مرحلة)

• قم بتثبيت weixin-js-sdk
• تهيئة مشاركة WeChat
• قم بتكوين WeChat لمشاركة المحتوى المخصص (إرساله إلى الأصدقاء، إرساله إلى Moments)

npm install weixin-js-sdk --save-dev

للحصول على تعليمات محددة، يرجى الرجوع إلى وثائق WeChat الرسمية.

نظرًا لأن العديد من المشاريع التي أعمل عليها تتطلب استخدام وظيفة مشاركة WeChat، فسيتم تغليف الكود الذي تمت مشاركته على WeChat هنا.

واجهة برمجة التطبيقات الموجودة في الكود أدناه هي في الواقع طلب axios

 استيراد wx من 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [تهيئة wxRegister WeChat Api] * @param {Function} رد الاتصال [وظيفة رد الاتصال الجاهزة] */ wxRegister (رد الاتصال، url) { Let query = { // يجب أن يكون عنوان url هنا هو عنوان url الذي يتوافق تمامًا مع الصفحة التي تريد مشاركتها، ويجب تحويل عنوان url base64: url } api.getWxJsSdk(query).then(res => { Let data = res.data wx.config({ debug: false, // تشغيل وضع تصحيح الأخطاء appId: data.appId, // مطلوب، المعرف الفريد لـ الطابع الزمني للحساب الرسمي: data.timestamp، // مطلوب، إنشاء الطابع الزمني للتوقيع nonceStr: data.nonceStr، // مطلوب، إنشاء سلسلة عشوائية من توقيع التوقيع: data.signature، // مطلوب، توقيع، راجع الملحق 1 jsApiList: data.jsApiList // مطلوب، قائمة بواجهات JS التي يجب استخدامها، راجع الملحق 2 للحصول على قائمة بجميع واجهات JS }) }) wx.ready((res) => { // إذا لزم الأمر، قم بتخصيص طريقة رد الاتصال الجاهزة if (callback) { callback() } }) },}

ملاحظة: إذا كنت بحاجة إلى تحويل base64 أعلاه، فيمكنك استخدام js-base64

3. قم بتكوين WeChat لمشاركة المحتوى المخصص (إرساله إلى الأصدقاء، إرساله إلى Moments)

الخطوة الثانية هي تهيئة تكوين الحزمة لـ WeChat، لكنها لا تزال تفتقر إلى المشاركة المقابلة والوظائف الأخرى، فلنحسنها هنا.

 // أضف /*** بعد وظيفة wxRegister [ShareTimeline مشاركة WeChat المخصصة للحظات]* @param {[type]} خيار [مشاركة المعلومات]* @param {[type]} نجاح [رد اتصال ناجح]* @param {[ type]} خطأ [فشل رد الاتصال]*/ShareTimeline (خيار) {wx.updateTimelineShareData({ title: option.title, // مشاركة رابط العنوان: option.link, // مشاركة الرابط imgUrl: option.imgUrl، // مشاركة أيقونة النجاح () { // الإعداد ناجح}، إلغاء () { // فشل الإعداد}})}،/*** [ShareAppMessage تخصيص مشاركة WeChat للأصدقاء]* @ param خيار {[نوع]} [مشاركة المعلومات]* @param {[نوع]} نجاح [رد اتصال ناجح]* @param {[نوع]} خطأ [رد اتصال فشل]*/ShareAppMessage (خيار) {wx.updateAppMessageShareData({ title: option.title, // مشاركة عنوان الوصف: option.desc, // مشاركة رابط الوصف: option.link, // مشاركة الرابط imgUrl: option.imgUrl, // مشاركة أيقونة النجاح () { // الإعداد ناجح}، إلغاء () { // فشل الإعداد}})}

4. عند الاتصال بالصفحة

 // vue كمثال // بالنسبة لمعلمات الوظائف التالية، يرجى الرجوع إلى الطريقة المذكورة أعلاه import wx from 'your encapsulated file' Mount(){ Let base64 = require('js-base64').Base64 Let url = base64. تشفير (window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // رد اتصال jdk مخصص wxRegCallback () {}, // وظيفة مخصصة للمشاركة مع الأصدقاء wxShareAppMessage(){ Let option = { title:'', // مشاركة عنوان الوصف: '', // مشاركة رابط الوصف: ' ', // رابط المشاركة imgUrl: '' // أيقونة المشاركة } // أدخل الطريقة العامة wx.ShareAppMessage(option) }, // وظيفة مشاركة مخصصة wxShareTimeline(){ Let option = { title:'',// مشاركة عنوان الوصف: '', // مشاركة رابط الوصف: '', // مشاركة الرابط imgUrl: '' // أيقونة المشاركة} // Inject الطريقة العامة wx.ShareTimeline(option) }}

ما ورد أعلاه هو عملية المشاركة على WeChat. إذا كان هناك أي أوجه قصور، يرجى الإشارة إليها.

لا يمكن اختبار مشاركة WeChat إلا على الأجهزة الحقيقية

لا يمكن لأسماء النطاقات التي تستخدم تنسيق المضيف المحلي اجتياز التحقق من WeChat

ما ورد أعلاه هو تطبيق Html5 لمشاركة WeChat والمحتوى المخصص الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب.