في الآونة الأخيرة، أنشأت الشركة صفحة H5 للطلاب للتصويت، وهي تستخدم بشكل أساسي في WeChat وتحتاج إلى إضافة وظيفة مشاركة WeChat؛
تسجل هذه المقالة بشكل أساسي الأمور التي تحتاج إلى الاهتمام عند الاتصال بواجهة مشاركة WeChat؛
1. بالنسبة لإطار عمل angular1 المستخدم في الواجهة الأمامية، تحتاج أولاً إلى تقديم ملف واجهة WeChat في صفحة الفهرس؛
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. اكتب وظيفة مشاركة WeChat في ملف myApp.run. لاحظ أن هذه الوظيفة تحتاج إلى الحصول على عنوان URL للصفحة الحالية وتحليله، ثم إرساله إلى الواجهة الخلفية لإنشاء التوقيع المقابل وتحميل الكود مباشرة؛
// وظيفة مشاركة WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. كود == 0) { var respanse = res.data.data; عند تشغيل وضع التصحيح، سيتم تنبيه قيم الإرجاع لجميع مكالمات واجهة برمجة التطبيقات من جانب العميل، وإذا كنت تريد عرض المعلمات الواردة، فيمكنك فتحها على جانب الكمبيوتر، وستتم طباعة معلومات المعلمة سيتم طباعة السجل ومعرف التطبيق فقط على جانب الكمبيوتر الشخصي، respanse.appId، الطابع الزمني: respanse.timestamp، // مطلوب، قم بإنشاء الطابع الزمني للتوقيع nonceStr: respanse.nonceStr، // مطلوب، قم بإنشاء توقيع سلسلة عشوائي لـ إمضاء: respanse.signature,// مطلوب، التوقيع jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// مطلوب، قائمة بواجهات JS التي يجب استخدامها}); ) }بعد تحليل عنوان URL الحالي، أرسله إلى الواجهة الخلفية، وتحتاج الواجهة الخلفية إلى إرجاع معرف التطبيق والطابع الزمني والسلسلة العشوائية والتوقيع، ثم إضافة قائمة الواجهة (jsApiList) يدويًا حسب الحاجة أحتاج إلى نموذج المصفوفة هنا فقط.
عند تصحيح الأخطاء، يمكنك تغيير التصحيح إلى صحيح، بحيث يتم تنبيه معلومات الواجهة في كل مرة يتم فيها استدعاء واجهة WeChat، مما يجعل من السهل التحقق مما إذا كان استدعاء الواجهة طبيعيًا؛
3. بعد هذه الوظيفة، قم بتخصيص محتوى المشاركة، ويكون الرمز كما يلي؛
wx.ready(function () { var obj = { title: 'بدأت مسابقة فريق SPBCN التصويت!'، // مشاركة العنوان desc: 'بدأت مسابقة فريق SPBCN التصويت، تعال وشجعنا!'، // مشاركة الوصف الرابط: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html'، // رابط المشاركة، يجب أن يكون اسم مجال الرابط أو المسار متسقًا مع اسم مجال أمان JS للحساب العام المطابق للاسم الحالي صفحة // هذا الرابط عبارة عن رابط إعادة توجيه لأنه من الضروري الحصول على رمز المستخدم، ولكن لا يمكن لهذا الرابط كتابة الرابط مباشرة إلى WeChat للحصول على الرمز // لذلك، تحتاج إلى النقر فوق الصفحة الجديدة وإعادة تحميلها لتنفيذ إعادة التوجيه وإعادة فتح الملف رابط WeChat للحصول على الكود لتنفيذ وظيفة الحصول على معلومات المستخدم imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // فشل رمز المشاركة: الوظيفة (الدقة) { تنبيه (JSON.stringify (res)) } }; // 2.1 مراقبة المشاركة مع الأصدقاء، ونقرات الأزرار، ومحتوى المشاركة المخصص، وواجهة نتائج المشاركة wx.onMenuShareAppMessage(obj); // 2.3 مراقبة المشاركة بنقرات زر QQ، وتخصيص محتوى المشاركة ومشاركة واجهة النتائج wx.onMenuShareQQ(obj); 2.4 مراقبة النقر على زر المشاركة على Weibo، وتخصيص محتوى المشاركة وواجهة نتائج المشاركة wx.onMenuShareWeibo(obj); // 2.5 مراقبة النقر على زر المشاركة على QZone، وتخصيص محتوى المشاركة وواجهة المشاركة wx. onMenuShareQZone(obj });يتم تشغيل wx.ready تلقائيًا بعد wx.config. أقوم بتحديد كائن عام لمشاركة المحتوى، ثم اتصل به مباشرة. يمكنك أيضًا تحديد محتوى مختلف لمشاركة الأصدقاء، ودائرة الأصدقاء، وWeibo، وما إلى ذلك، حسب الحاجة وثائق واجهة WeChat للحصول على التفاصيل؛
ينصب التركيز الرئيسي على رابط المشاركة، ويجب أن يكون الرابط ضمن اسم نطاق JS الآمن الذي حدده حسابك الرسمي، وإلا فلن تكون المشاركة ناجحة؛
تتمثل أعراض فشل المشاركة في أن صورة رابط المشاركة لا يمكنها تحميل الصورة المخصصة، وأن عنوان المشاركة غير صحيح؛
5. مشروعي مخصص للتصويت، لذلك أحتاج إلى الحصول على رمز المستخدم في كل مرة أقوم فيها بالنقر فوق. إذا كنت تشارك مقالًا فقط ولا تحتاج إلى معلومات المستخدم، فما عليك سوى تغيير الرابط إلى رابط مقالتك؛
6. بالنسبة لفئة التصويت، قمت بمعاملة خاصة هنا، وهي إعادة توجيه الرابط. يعلم الجميع أن هناك طريقتين لـ H5 للحصول على معلومات مستخدم WeChat، إحداهما هي متابعة حساب WeChat الرسمي، والأخرى تطالب المستخدم للحصول على المعلومات العامة للمستخدم. يقوم المستخدم بالنقر فوق "موافق". ومع ذلك، يجب دمج كلاهما في رابط WeChat خاص وفقًا لمتطلبات WeChat، لذلك يأتي اسم المجال مع WeChat وليس اسم المجال الآمن لـ JS لحسابنا العام.
7. لذلك، بالنسبة للرابط المشترك، إذا كنت لا تزال بحاجة إلى الحصول على رمز المستخدم، فيجب عليك استخدام طرق أخرى لتحقيق ذلك. ما استخدمته هو إضافة صفحة فارغة، وبعد تحميل الصفحة، انتقل إلى WeChat للحصول عليه رابط الكود http://dev.spbcn.org/wechat-vote-phone/redirect.html هذا الرابط عبارة عن صفحة فارغة رمز هذه الصفحة كما يلي؛
window.onload = الوظيفة () {// رابط إعادة التوجيه هو نفس الرابط للحصول على رمز المستخدم في حساب WeChat الرسمي window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. هذه الطريقة لها عيوب، فهي تضيف صفحة فارغة إضافية، ولم أفكر في طريقة جيدة بعد.
9. إذا لم تتم إضافة هذه الخطوة، فسيتم عرض الرابط المشترك بشكل طبيعي، ولكن لا يمكن الحصول على الرمز، ولا يمكن للواجهة الخلفية تحديد المستخدم، مما يؤدي إلى عدم القدرة على تقييد المستخدمين من التصويت؛
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.