ون | جيف

وقبل أسابيع قليلة، وقضيت يومين، أدلى الموقع وورد على نسخة قناة الصغرى صغير من البرنامج.

هذا المقال هو سجل بلدي في تطوير النسخة الأولى من عملية الصغير.

وبرنامج التوعية (مايكرو الإشارة zxcx0101) اليوم لمشاركتنا في هذا المقال شرح خطوة خطوة، وكيفية مساعدة REST API وورد موقع وضعت نسخة قناة صغيرة من الصغير.

"برنامج تعرف" شاهد عددا العام، الرد على "تطوير" بريد إلكتروني وراء الكواليس الصغير، والحصول على برنامج صغير المميز تنمية المهارات المادة.

كيف برنامج صغير يقرأ وورد بلوق المحتوى؟

وورد 4.6 يدخل الإفراج عن بقية API. بعبارات بسيطة، هو تبادل البيانات برنامج العميل والخادم عن طريق HTTP طلب كاملة.

زرنا المعتاد العادي موقع وورد، في حالة عدم وجود مخبأ ثابت مفتوحة، تحتاج عادة إلى "عملية خادم البيانات سحب PHP HTML تشكل واجهة متصفح المستخدم من قاعدة البيانات" العملية.

عملية API REST مشابهة، ولكنها مختلفة قليلا: الإخراج هو تنسيق البيانات JSON، وعادة إلى العميل (غير متصفح ويب) لاستخدام.

مع API REST، مما يجعل من موقع مختلف العملاء (الروبوت أو دائرة الرقابة الداخلية في التطبيق، فضلا عن تطبيقات قناة متناهية الصغر)، في حين تقاسم قاعدة بيانات ممكن.

يمكننا من خلال المتصفح، والوصول المباشر إلى واحد من عنوان واجهة وورد :؟ Your-site.com/wp-json/wp/v2/posts per_page = 5 & صفحة = 1، قد ترى شيئا من هذا القبيل العودة.

والآن، اسمحوا لي في URL أعلاه سيتم شرحه.

 
• يتم تعريف / الفسفور الابيض بين سلمان / الفسفور الابيض / V2 / REST API وورد الطريق (راوتر) بالاشتراك مع رقم الإصدار.
• المشاركات في وورد، والمعروفة باسم "النهاية" (نقطة النهاية).
• per_page الصفحة هي المعلمة.

العنوان أعلاه، 5 يمثل الناتج من أحدث البيانات على المادة (5-1) .

الصغرى قناة تطبيقات REST API، يمكنك الحصول على البيانات على موقع وورد. بعد معالجة البيانات، مما يجعل الشفرة من خلال الجبهة، ما تراه في واجهة العميل قناة الصغرى.

وقد ورد في REST API الكمال، ما البيانات المادة، بيانات صفحة، بيانات المستخدم وذلك وحدها.

وورد كما بريمج الخلفية، حقا انقاذ الكثير من القوى العاملة، على الأقل بالنسبة لنا رأس الكلب، رمز الخلفية دون كتابة الصعب القوة.

بدأت العمل، والقيام برنامج صغير WP

القسم السابق يصف تقريبا وراء المنطق، فإن الخطوة التالية لتطوير الموقع "DeveWork المهوسون" الصغير الطبعة الأولى كمثال، ثلاث صفحات (المنزل، صفحة المحتويات، وقراءة صفحات تسجيل) إلى حد كبير كيف بها.

1. الاستعدادات

الاستعدادات لم يقدم اي تفاصيل، تضم عموما العمليات التالية.

 
• بعد سجلت منصة الجمهور منصة إدارة القناة الصغيرة حساب الصغير، التكوين أسماء النطاقات المشروعة.
• ثانيا، تأكد من أن الخادم تكوينه HTTPS (ولكن ليس بالضرورة مطلوبة لرقم قياسي).

وبالإضافة إلى ذلك قبل البدء في تطوير وورد REST API الذي أدليت به بعض الانتاج المخصصة على جانب الملقم.

2. هيكل المشروع

جنبا إلى جنب مع أمثلة بداية قناة الصغرى الرسمية سريعة والاحتياجات الشخصية، ويتمحور المشروع على النحو التالي النقاط الجيدة:

. app.js app.json app.wxss config.js // الشخصي صورة // صور دليل صفحات // دليل الصفحة تيلس / / untils فائدة الطبقة المكتبات wxParse // طرف ثالث wxParse

3. بناء قائمة من صفحة المقالات

بريمج الرئيسية هي الصفحة قائمة المادة. عند بدء تشغيل برنامج صغير، فإنه سيتم عرض أحدث خمس مواد، ثم ينزل إلى تحميل مزيد من تدفق الورق.

هنا، ونحن نستخدم وورد REST API هو your-site.com/wp-json/wp/v2/posts؟per_page={num}&page={num}.

ملف Index.js الأساسية، من خلال wx.request واجهة للوصول إلى URL API أعلاه للحصول على البيانات المادة، وجعل ثم setData.

// https://devework.com/wordpress-rest-api-weixin-weapp.htmlwx.request ({URL: رابط، والنجاح: وظيفة (الاستجابة) {self.setData ({المشاركات: self.data.posts.concat (response.data.map (وظيفة (البند) {... // تصفية البيانات / التنسيق، الخ ... البند العودة؛}))})؛}})؛}

I مغلفة في رمز وظيفة، لتسهيل الدعوات المتكررة لاحقة.

إخراج البيانات الدورية التي تقدمها index.wxml. لأن القيام المتداول الحمل، وبالتالي فإن استخدام الرؤية التمرير المكونات الصغيرة من البرنامج.

فوق كود WXML، ربط وظائف حدثين: أولا، الحدث المنسدلة pullDownRefresh، نقرة واحدة للانتقال إلى أحداث الصفحة المادة redictSingle.

// المنسدلة التحديث pullDownRefresh: وظيفة (الحدث) {فار النفس = هذا، self.setData ({الصفحة: self.data.page + 1 // الصفحة +1})؛ console.log ( 'الصفحة الحالية:' + الذاتي. data.page)؛ this.fetchData ({الصفحة: self.data.page})؛}، // طريق الملاحة في صفحات المقالة redictSingle: وظيفة (الحدث) {console.log ( 'redictSingle')؛ فار معرف = الحدث .currentTarget.id؛ // ورد فيها هو معرف في الواقع المادة الهوية، ويجب تمريرها إلى واحد الصفحة فار URL = "../single/single؟id= '+ معرف، wx.navigateTo ({URL: رابط}) } 4. بناء صفحة تفاصيل المادة

صفحات المقالة لاستخدام عنوان API هو your-site.com/wp-json/wp/v2/posts/{id}. وبالمثل، فإن واجهة للوصول إلى URL عبر wx.request، ثم تقديم البيانات على صفحة WXML.

لن يتكرر رمز مشابهة لما سبق. ولكن الحاجة إلى التذكير أن تتصل كيف سيتم تحويل هذه المشكلة إلى النص الغني الصغير إلكتروني الصغير WXML التعرف من.

لأن البيانات JSON المكتسبة، والجسم من هذه المادة هو مجموعة من التعليمات البرمجية HTML. إذا كان الناتج HTML مباشرة إلى برنامج صغير، يتم إعطاء.

نحن بحاجة إلى هذا كود HTML إلى أقسام صغيرة قناة الصغرى لغة WXML البرنامج، القسم التالي سأشرح هذه العملية.

4. قراءة صفحة التاريخ

قراءة الصفحة سجل يستخدم لعرض تاريخ التصفح المستخدم، مرحبا العالم الرسمي ساطع مباشرة سبيل المثال أن تفعل ما يصل.

يتم استخدام هذه الصفحة بشكل رئيسي في واجهات اثنين التالية: ذاكرة التخزين المؤقت المحلية واجهات المرتبطة بها، المستخدم المتعلقة ترخيص واجهات (wx.login، wx.getUserInfo، وما إلى ذلك).

من تجربة المستخدم يجب أن لا تبدأ في تقديم طلب للحصول المستخدمين المصرح لهم، ولكن الحاجة لا تنطبق إلا لصفحة. وفي الوقت نفسه، ينبغي أيضا القيام بعمل جيد التعامل مع المستخدم تنفي تفويض أنيقة.

"برنامج تعرف" شاهد عدد جمهور قناة الصغرى، الرد "معلومات المستخدم" في الرسالة وراء الكواليس الجزئي لنرى كيف صغيرة البرنامج بشكل صحيح الحصول على معلومات المستخدم.

قراءة المقال يستند على سجلات البيانات التاريخية المحفوظة في ذاكرة التخزين المؤقت المحلية للعميل، بدلا من الغيوم. لذلك، و "قراءة السجلات المخزنة فقط في هذا الجهاز،" يقترح، أمر ضروري.

وفي الوقت نفسه، على الصغير نظر حد ذاكرة التخزين المؤقت، وأنا سوف يسجل الحد الأعلى هو 20.

// احصل على سجل المكالمات API من ذاكرة التخزين المؤقت المحلية القراءة وسجلت سجلات فار = wx.getStorageSync ( 'readLogs') ||؛ // تصفية مكررة إذا (logs.length >  0) {السجلات = logs.filter (وظيفة (سجل) {سجل عودة == معرف ؛!})؛} // إذا كان أكثر من عدد معين إذا (logs.length >  19) {logs.pop؛ // إزالة آخر} logs.unshift ( )؛ Wx.setStorageSync ( 'readLogs "، وسجلات)؛

رمز أعلاه، في الواقع، هو في الداخل single.js. معرف المقالة لأنني بحاجة إلى حفظ العنوان، وإلا single.js، والحصول على البيانات اثنين في وقت واحد.

وأخيرا، أود أيضا أن الحاجة إلى وظيفة في دورة حياة log.js onShow في، لربط وظيفة لتحديث البيانات:

updateData: وظيفة (سي بي) {فار = أن ذلك؛ // readlog this.setData ({readLogs: (wx.getStorageSync ( 'readLogs') ||) .MAP (وظيفة (سجل) {سجل العودة؛})})} ،

عملية التنمية، خطوت حفرة

هذا الفصل هو أساسا لتسجيل بعض حفرة في عملية التنمية، والحل لقد اعتمدت.

1. تبويب بار مشكلة صورة

الصغير أعلن الصور الرسمية دعم SVG، ولكن شريط التبويب لا يدعم الصور SVG.

وأوصى المسؤول 81 بكسل حجم 81 بكسل للصور PNG، ولكن هذا لا يزال قليلا حفرة.

أوصى رمز التصميم عند رمز شريط التبويب لترك الحشو شفافة قليلا وإلا فإن رمز أن يكون أكثر بحرية على آلة حقيقية.

2. ضبط ومكافحة روابط مفيدة صور التحويلية

إذا كان لديك عملية سلسلة أمان خادم صورة المستضافة، سوف فكذلك servicewechat.com إلى القائمة البيضاء. تذكر، هذه القائمة ليست qq.com الأبيض.

المطلقة مسار 3. مكونات الصورة، يجب أن تبدأ مع HTTPS

SRC المسار المطلق من مكونات الصورة، في شبكة الإنترنت يسمح وضع لحذف وجود مثل هذا يشبه اسم بروتوكول //example.com/pic.png.

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

البيانات السيئة معالجة جانب الخادم، يمكن معالجتها بواسطة الدالة التالية:

// ملء في عداد المفقودين الكامل URL HTTPSfunction addhttps (رابط) {اذا |: {URL = "HTTPS" + رابط؛} (/ ^ (و حزب التحرير) TPS \ / \ // i.test (رابط) !؟) عودة رابط ؛.} 4 أدوات المطورين الصغير UA UA تختلف عن الفعلية

أدوات تطوير محاكاة برنامج UA صغير مثل هذا:

... كروم / سفاري 53.0.2785.143 / 537.36 appservice عرض ويب / 100000

إنجن إكس من خلال السجل، يمكننا أن نعرف، UA هو في الواقع آلة حقيقية تشغيل UA إلكتروني الصغير:

... موبايل / 14E304 MicroMessenger / 6.6.0 NetType / WIFI اللغة / zh_CN

في بعض الحالات تحتاج إلى إيلاء الاهتمام لهذه الاختلافات.

التخطيط الافتراضي فليكس

إذا كنت تقوم بتطوير المثال رمز الصغير الخاص على أساس مسؤول اقترح تخطيط فليكس لحذف رمز ذات الصلة من app.wxss. في القيام بذلك، سوف تقلل من احتمال تعاني من القضايا اسلوب عمل رائعة.

6. wxParse حفرة

صغير لاستخدام تحويل النص الغني هو wxParse هذا الطرف الثالث المكتبات، مع الوقت وجدت أن العديد من الحفرة (ولكن هذا هو الأكثر عملية من المكتبة).

واحد هو رمز عالمي يتم استبدال الأحرف مع WX-codexxx، ينبغي أن يكون صاحب نية لاستبدال هذا الرمز التسميات، ولكن قد خاطئ عن طريق الخطأ.

حلول يمكن إلا أن يكون مؤقتا حذف هذا الرمز.

وعلاوة على ذلك، عند استخدام wxParse، وسمة src من عنصر صورة يكون يوزع متعددة فاصلة.

كلمات الشكل:

هذا الرقم هو أيضا أعلى بكثير يشرح حفرة مع الصورة حفرة المحيل HTTPS في بداية الطريق. يجب حلول أولا تغيير شفرة المصدر (html2json.js) لإصلاح:

// فيكس: علامة img مجموعة تحتوي على مشاكل إذا حرف فارغة (imgUrl == '') {imgUrl.splice (0، 1)؛}

حول النص الغني، والخبر السار هو أن عنصر النص الغني الرسمي قد أفرج عنه.

"برنامج تعرف" شاهد عدد جمهور قناة الصغرى، الرد "نص غني" في الرسالة وراء الكواليس الصغيرة، والقدرة على عرض تطبيقات النص الغني تفسير مكون جديد.

الكلمات الأخيرة

عند هذه النقطة، وأنا يمكن اعتبار وبمزيد من التفصيل، ويصف إصدار تطوير عملية الصغير وورد. العمل المقبل، يقدم طبيعة النتائج الرسمية للإشعار المراجعة والانتظار.

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

"DeveWork المهوسون" وصلة الصغير

https://minapp.com/miniapp/3016/

العنوان الأصلي: الشبكي: //devework.com/wordpress-rest-api-weixin-weapp.html

"برنامج تعرف" شاهد عددا العام، الرد على "تطوير" بريد إلكتروني وراء الكواليس الصغير، والحصول على برنامج صغير المميز تنمية المهارات المادة.