kingdex
1.0.0
يأتي الإلهام من لعبة الهاتف المحمول الشهيرة هذا العام - Honor of Kings. في بعض الأحيان، ليس من المناسب جدًا استخدام الهاتف المحمول للبحث عن بيانات اللعبة عبر الإنترنت، لذلك خطرت ببالي فكرة تطوير "كتاب King of Kings المصور". "التطبيق الصغير. يمكنك الزحف إلى البيانات من الموقع الرسمي، ودمج الأبطال والمعدات والنقوش والمعلومات الأخرى في تطبيق WeChat الصغير، والاستعلام عن معلومات اللعبة في أي وقت وفي أي مكان.
امسح رمز البرنامج الصغير أدناه على WeChat لتجربته على الفور:
أولاً، انقر فوق Fork أو الزر الأخضر Clone or download في الزاوية اليمنى العليا لتنزيل الكود المصدري، واستخدم أدوات مطور WeChat لتصحيح الأخطاء والتطوير. يوفر WeChat أيضًا مستندات تطوير البرامج المصغرة، مما يوفر مجموعة كاملة من الحلول بدءًا من تسجيل البرامج المصغرة وأدوات التطوير والتطوير وتصحيح الأخطاء حتى الإصدار، مما يؤدي إلى إنشاء نظام بيئي خاص به مشابه لنظام Apple.
يحتوي المشروع على إجمالي 9 صفحات، تتضمن عرض القائمة وتفاصيل البطل وتصنيف المعدات وتصفية حالة النقش ووظائف أخرى نظرًا لاستخدام خدمة تخزين Leancloud في الخلفية، ولا يتم استخدام واجهة برمجة تطبيقات Ajax الخاصة بالبرنامج المصغر. تم تقديم Leancloud. يحتاج sdk إلى الاعتماد على ملف يسمى leancloud.config.js ، والذي يتم وضعه في مجلد utils . نظرًا لأن خدمات الجهات الخارجية مثل Leancloud يتم دفعها عادةً بمرونة، وتم إصدار كتاب King's Illustrated Book رسميًا على WeChat، فقد قمت بالدفع تم تجاهل الكود leancloud.config.js ، يرجى التفهم.
يحتوي leancloud.config.js على معلومات AppID وAppKey لتطبيق Leancloud:
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} قبل استخدام المشروع، تحتاج إلى إنشاء تطبيق LeanCloud الخاص بك وإنشاء王者荣耀官网爬虫الذي كتبته من قبل للحصول على البيانات. وكلاهما يتطلب ملف leancloud.config.js .
دعونا نتحدث بإيجاز عن تطوير برامج WeChat المصغرة، لقد كان هناك الكثير من الضجة على الإنترنت لفترة من الوقت، ثم أخذت الوقت الكافي لإلقاء نظرة على مستندات التطوير. ! مجرد إلقاء نظرة على المثال أدناه.
البرنامج المصغر:
Page ( {
data : {
list : [ ]
} ,
onload : function ( ) {
this . setData ( {
list : [ 1 , 2 , 3 ]
} )
}
} ) < view wx:for =" {{ list }} " > {{ item }} </ view >فيو.js:
new Vue ( {
data : {
list : [ ]
} ,
mounted : function ( ) {
this . list = [ 1 , 2 , 3 ]
}
} ) < view v-for =" item in list " > {{ item }} </ view >على الرغم من أن واجهات برمجة التطبيقات تبدو متشابهة، إلا أنه لا تزال هناك اختلافات واضحة:
wx:for="item in list" فسيتم الإبلاغ عن خطأ.يحتوي التطبيق الصغير على خيطين يتوافقان مع وحدتين مستقلتين: العرض (العرض) وAppService (المنطق). يتم استخدام العرض لعرض القوالب والأنماط، ويتم استخدام AppService للتعامل مع منطق الأعمال وطلبات البيانات واستدعاءات واجهة برمجة التطبيقات وما إلى ذلك. يمكن للطلاب المهتمين الرجوع إلى: "تحليل بنية برنامج WeChat Mini". بالإضافة إلى ذلك، فإن مقالات البرنامج المصغرة لفريق Minion Food Delivery Team جيدة أيضًا.
بالحديث عن "كتاب الملك المصور"، هذا هو برنامجي الصغير الأول بالنسبة لمستخدمي الواجهة الأمامية ذوي الخبرة، يمكنك البدء في يوم واحد باتباع الوثائق الرسمية. مقارنةً بالبرمجة، كان إكمال تصميم النموذج الأولي لواجهة المستخدم للمنتج بأكمله تحديًا بالنسبة لي، بما في ذلك التخطيط ومطابقة الألوان والتفاعل، وقد رجعت إلى العديد من المنتجات في أكثر من عشرة أيام واكتسبت فهمًا أعمق للتصميم يكون التأثير النهائي مرضيا تماما.
كود المصدر المفتوح لهذا المشروع مخصص للتعلم فقط ويحظر الاستخدام التجاري.
جي بي إل
