wechat mini program wiki
1.0.0
طرح تطبيق WeChat، وهو أفضل تطبيق للمراسلة في الصين، شيئًا جذريًا للغاية: البرامج المصغرة. التطبيقات المضمنة التي لا تتطلب أي تنزيل أو تثبيت. افتح، استخدم، شارك، انتهيت!
هناك جدل كبير - والعديد من النقرات الجذابة - حول مدى عملية هذه التطبيقات... في الواقع، إطار العمل المقدم للمطورين لا يزال في مرحلة الطفولة فقط، ولا يزال محدودًا، وبصراحة محبطًا بعض الشيء. ومع ذلك، تستثمر Tencent موارد غير مسبوقة في اعتماد هذه القناة، وبناء الزخم، وفتح الفرص أمام المبادرين الأوائل. نحن نعتقد أن هؤلاء المتسللين قد يجدون مكاسب سريعة إذا تجرأوا على تجربتها.
هل لديك أفكار للخدمات التي ترغب في نشرها في WeChat في أسرع وقت ممكن؟ هل لديك معرفة أساسية بجافا سكريبت وترغب في تجربة إطار العمل هذا؟ هل ضاعت في ترجمة Google للمستند؟ هل تحتاج إلى دفعة صغيرة لفك التشفير ما هو ممكن أم لا؟ أهلا ومرحبا بكم.
إن العثور على طريقك عبر المستند الرسمي ليس بالأمر السهل. في الواقع، يتطلب الأمر الكثير من التجارب/الأخطاء، وبعض الأبحاث حول التعليمات البرمجية مفتوحة المصدر والعديد من الافتراضات لإنجاز شيء ما. لقد كنت تضرب رأسك بالحائط. لقد حصلنا عليه.
مهمتنا هي مساعدة رواد الأعمال المبدعين على بناء منتجات تقنية رائعة. سنساعدك على اتخاذ الخطوات الصغيرة.
المحتوى أدناه ليس ترجمة للوثائق ومن المؤكد أنه سيصبح قديمًا بسرعة. إنها ببساطة مساهمتنا في مساعدة أي شخص على البدء وإنشاء برنامج WeChat Mini رائع بسرعة. افعلها الآن.
هل تعمل على برنامج صغير؟ تواصل معنا إذا كنت ترغب في مشاركة عملك أو مقابلة طاقمنا أو طلب المساعدة!
إذا كنت تريد المساهمة، يمكنك إرسال طلب سحب هنا أو اتصل بنا على shanghai(at)lewagon.com للحصول على اقتراحات!
تمت كتابة هذه القطعة الأصلية بواسطة خريجي Le Wagon: Adrien Pelegri (الدفعة رقم 30) بدعم من Thibault Genaitay (Driver China) وستيفان ديلجادو (الدفعة رقم 61).
إن عملية التسجيل صعبة حقًا، خاصة إذا لم تكن لديك أي خبرة في عالم الإدارة الصيني الرائع. ستكون عملية التحقق من WeChat طويلة. حافظ على هدوئك.
بدءًا من تسجيل برنامج WeChat المصغر وحتى إصدار التطوير، تحتاج بشكل أساسي إلى اتباع الخطوات التالية:
فيما يلي قائمة بالمواد التي ستحتاجها لتسجيل برنامج صغير كشركة:
نوصيك باتباع هذا الدليل الشامل باللغة الإنجليزية حول كيفية التسجيل وإنشاء مشروع برنامج صغير: مقالة متوسطة أو مراجعة وثائق WeChat الرسمية (آخر تحديث: 08/02/2017).
إن IDE (بيئة التطوير المتكاملة) عبارة عن مجموعة من أدوات البرمجة لكتابة التطبيق. وهو يتألف من محرر التعليمات البرمجية، والمترجم، ومصحح الأخطاء، ويمكن الوصول إليه من خلال واجهة مستخدم رسومية واحدة.
قم بتنزيل WeChat IDE هنا: Mac، Windows 64، Windows 32
فيما يلي برنامج تعليمي سريع لإتقان WeChat IDE وتحقيق أقصى استفادة منه.
محرر التعليمات البرمجية مع شجرة ملفاتك على الجانب ومحاكي على اليسار، والذي يعرض معاينة تطبيقك. 
فيما يلي قائمة كاملة بالأزرار اللازمة لتنفيذ المهام عندما تكون قيد التطوير:
1. الملف الشخصي: انقر عليه لتسجيل الخروج من IDE. 2. تحرير الكود 3. التصحيح/الفحص: انظر أدناه. 4. معلومات المشروع: انظر أدناه. 5. المترجم: يمكن أن يكون مفيدًا لتجميع التطبيق عندما لا يعمل التحديث التلقائي للعرض. 
6. قيمة المشهد 7. ذاكرة التخزين المؤقت 8. إيقاف التشغيل: قم بإنهاء المشروع الذي تعمل عليه وانتقل نحو مشروع آخر. 9. إخفاء المحاكي 10. الأجهزة: يعطي قائمة بالأجهزة لاختبار استجابة البرنامج المصغر. 11. يمكنك العمل على: wifi, 4G, 3G, 2G. 12. إخفاء التشجير 13. إدارة ملفاتك: البحث عن مجلد أو ملف وإضافته وحذفه.
المصحح / المفتش: تعد هذه الأداة جزءًا مهمًا من IDE، وهي تشبه أداة Chrome DevTools القديمة الجيدة. 
1. شبكة الشريط العلوي : هذه اللوحة مخصصة لتصحيح مشكلات الطلب والمقبس أو أداء تحميل الصفحة. التخزين: يسمح بالوصول إلى جميع البيانات الموجودة في ذاكرة التخزين المؤقت الخاصة بك. AppData: يستخدم لعرض بيانات المشروع الحالية. يمكنك تحرير البيانات الموجودة في اللوحة مباشرة ومعاينتها. Wxml: يتيح لك فحص كل عناصر صفحتك وتحريرها بسرعة. المستشعر: يمكنك محاكاة الموقع وأداء الجهاز المحمول لتصحيح أخطاء استشعار الجاذبية.
2. لوحة المصادر تعرض لوحة المصادر ملفات البرنامج النصي للمشروع الحالي.
3. وحدة التحكم ستتيح لك وحدة التحكم معرفة الأخطاء الموجودة في التعليمات البرمجية الخاصة بك عن طريق تسجيل المعلومات التشخيصية والتفاعل مع جافا سكريبت في الصفحة باسم console.log() الذي قمت بوضعه والمزيد.
معلومات المشروع: هذه الصفحة هي المكان الذي ستجد فيه تفاصيل المشروع الحالي مثل معرف التطبيق الخاص بك ومعلومات الدليل والمزيد. بالضغط على خيار المعاينة ستتمكن من اختبار البرنامج المصغر مباشرة على هاتفك بعد مسح رمز QR.
ملاحظة: أثناء قيامك باختبار برنامجك المصغر على هاتفك، يمكنك تمكين أداة مصحح الأخطاء مباشرة على جهازك.
سيقدم هذا القسم بنية "البدء السريع" التي يوفرها WeChat (النموذج المعياري) والأساسيات التي تحتاجها للامتثال لإطار العمل هذا.
تنزيل WeChat Quickstart.zip.
التشجير السريع:
.
├── app.js
├── app.json
├── app.wxss
├── الصفحات
│ ├── الفهرس
│ │ ├── Index.js
│ │ ├── ملف Index.json
│ │ ├── Index.wxml
│ │ └── مؤشر.wxss
│ └── السجلات
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└── المرافق
└── util.js
تعرض صفحة الفهرس الخاصة بهذا النموذج صفحة ترحيب تحتوي على معلومات ملف تعريف المستخدم الحالي. سيؤدي النقر على الصورة الرمزية الخاصة بك إلى إعادة التوجيه إلى صفحة جديدة تعرض سجلات البرنامج الصغير الحالية الخاصة بك.
تبدأ برامج WeChat المصغرة بملفات "التطبيق" (انظر لقطة الشاشة أدناه). هذه الملفات هي الدليل الجذر للبرنامج الصغير وبالتالي مدخل البرنامج الصغير الخاص بك. (هنا وثائق WeChat الرسمية).
app.js هو رمز البرنامج النصي، والمنطق العام لبرنامجك المصغر. يمكنك إعداد وظائف دورة حياة MP الخاصة بك ومعالجتها، أو الإعلان عن المتغيرات العامة أو استدعاء واجهة برمجة التطبيقات (API).
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json هو التكوين العام للبرنامج المصغر الشامل. يمكنك تكوين مسار صفحة MP (البرنامج المصغر) ونمط نافذة MP وتعيين مهلة الشبكة وتكوين التصحيح.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}ملاحظة: التعليقات غير مسموح بها في ملف app.json .
app.wxss هي ورقة الأنماط العامة للبرنامج المصغر. يجب عليك إعلان قواعد النمط المشترك هنا.
صفحتا البدء السريع لـ WeChat هما:
مجلد الصفحات هو المكان الذي توجد فيه أو تنشئ صفحات البرنامج المصغرة الخاصة بك. يجب أن تحتوي كل صفحة تقوم بإنشائها على ملفين:
يمكنك إضافة ملفين آخرين في كل صفحة تقوم بإنشائها:
ملف .json لتكوين الصفحة.
ملف .wxss لورقة أنماط الواجهة الخاصة بك.
القاعدة: يمكن أن تتكون كل صفحة من برنامجك المصغر من أربعة امتدادات ملفات مختلفة (js ; json ; wxml ; wxss) ولكن يجب أن يكون لها نفس الاسم.
مزيد من التفاصيل: ستحتوي الصفحة الجديدة دائمًا على ملف .js وملف .wxml كحد أدنى. يتم استخدام ملحق الملف .json فقط في حالة رغبتك في تجاوز تكوين النافذة في هذه الصفحة المحددة. أضف .wxss إذا كنت تريد إضافة ورقة أنماط إلى صفحتك.
دعونا نرى ما يحدث في كل صفحة من مشروع البداية السريعة.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )تعليقات مقتطفة:
Page() لاحقًا لجمع معلومات المستخدم.Page() ويقوم بتعيين data: لربط البيانات ديناميكيًا في العرض.Tapped على إعادة توجيه المستخدم الحالي إلى صفحة السجلات الخاصة به.onLoad على معلومات المستخدم وتقوم بتحديث بيانات userinfo . Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )تعليقات مقتطفة:
formatTime لاحقًا.Page() ويقوم بتعيين data: .onLoad باسترداد سجلات المستخدم الحالية من ذاكرة التخزين المؤقت wx.getStorageSync('logs') . ثم قم بعرض السجلات بتنسيق formatTime الذي يتم توفيره بواسطة util.js . Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}ملحوظة:
في Utils يتم تخزين المكتبات المستوردة التي قد تحتاجها في مكان آخر (في مثالنا، util.js مطلوب في log.js). في مقتطف التعليمات البرمجية أعلاه، تم تعريف وظيفة formatTime في util.js لعرض تاريخ سجلاتك بشكل صحيح.
حتى الآن أدركت حقيقة أنه سيكون لديك طبقتان في كل صفحة:
الطبقة المنطقية (.js): معالجة البيانات وإرسالها إلى طبقة العرض، أثناء تلقي الأحداث التي يتم تشغيلها من طبقة العرض.
طبقة العرض (.wxml/.wxss): تعرض البيانات التي تتم معالجتها بواسطة الطبقة المنطقية في طريقة عرض، أثناء إرسال أحداث طبقة العرض إلى الطبقة المنطقية.
يمكننا تقسيم دورة حياة البرنامج المصغرة إلى دورتين، دورة التطبيق ودورة الصفحة. دورة حياة App() هي نقطة البداية والنهاية للبرنامج المصغر بينما يتم تنشيط دورة حياة Page() عندما يتصفح المستخدمون البرنامج المصغر.
يتم استخدام وظيفة App() لتسجيل برنامج صغير. يأخذ كائنًا كمعلمة تحدد وظائف دورة حياة MP.
تعليقات:
onLaunch وتهيئة MP.onShow .onHide عندما يخرج المستخدم الحالي من البرنامج المصغر. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) يقدم إطار عمل WeChat وظيفة عامة تسمى getApp() وهي مثيل لـ App() .
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data يمكن أن تكون وظيفة getApp() مفيدة لسبب بسيط وهو أنه لا يمكنك تحديد App() داخل وظيفة Page() . من أجل الوصول إلى مثيل التطبيق يجب عليك استدعاء وظيفة getApp() .
يتم استخدام وظيفة Page() لتسجيل الصفحة. يقبل كائنًا كمعلمة تحدد البيانات الأولية للصفحة ووظائف دورة الحياة ومعالج الأحداث وما إلى ذلك.
تعليقات:
onLoad .onShow .onShow onReady لعرض العرض.onShow عرضًا مباشرةً.onHide عندما ينتقل البرنامج المصغر إلى صفحة أخرى.onUnload عند الخروج من الصفحة باستخدام wx.redirectTo() و wx.navigateBack() . أو عند إعادة تشغيل الصفحة الحالية، wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
عند اكتمال دورة حياة App() ، يتم تحميل الصفحة عن طريق استدعاء onLoad للمرة الأولى، وسيتم استدعاؤها مرة واحدة فقط.
عندما يتم تشغيل البرنامج المصغر من الخلفية (دورة حياة التطبيق) إلى المقدمة (دورة حياة الصفحة)، فإنه يستدعي أولاً وظيفة App() onShow ثم يستدعي وظيفة Page() onShow عند التبديل إلى المقدمة.
توصيات وي شات:
App() ويجب تسجيلها مرة واحدة في app.js.onLaunch عندما لا يتم إنشاء صفحة getCurrentPages() بعد.getApp() يمكنك الحصول على مثيل App() لكن وظائف دورة الحياة لا تحاول استدعاء وظائف App() . يعد إعداد برنامجك المصغر بسيطًا ومصممًا لتوفير الوقت والإحباط عند الحاجة إلى التخصيص.
يقسم WeChat تكوين app.json إلى خمسة أجزاء:
في هذا الجزء، سنقوم بتفصيل هذا المثال الكامل لإعداد app.json .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} دور pages في app.json هو تحديد جميع مسارات برنامجك المصغر. يعد تكوين هذا العنصر إلزاميًا ويستغرق مجموعة من السلاسل . يتوافق كل مجلد فرعي وملفات داخل مجلد الصفحات الأصلية مع مسار التوجيه .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} نصيحة: في كل مرة تقوم فيها بإضافة مسار مسار إلى "pages" ، سيقوم IDE تلقائيًا بإنشاء المجلد والملفات التي تتوافق مع المسار الذي قمت بإنشائه للتو.
يوفر إطار عمل WeChat العديد من منطق التوجيه:
وصف وضع التوجيه:
التهيئة: بمجرد تشغيل البرنامج المصغر، يتم تحميل الصفحة الأولى بواسطة وظيفة onLoad و onShow .
فتح صفحة جديدة: يؤدي فتح صفحة جديدة إلى إخفاء الصفحة الحالية والانتقال إلى صفحة أخرى باستخدام wx.navigateTo . خلف الكواليس، سيتم إخفاء الصفحة الأولى عن طريق استدعاء الدالة onHide والانتقال فوق الصفحة الأخرى عن طريق استدعاء onLoad و onShow . 
إعادة توجيه الصفحة: أغلق الصفحة الحالية عن طريق استدعاء onUnload والانتقال إلى صفحة داخل التطبيق باستخدام wx.redirectTo الذي يستدعي وظائف onLoad و onShow .
إرجاع الصفحة: onUnload الصفحة الحالية، يستدعي وظيفة onLoad ثم يعرض الصفحة المستهدفة عن طريق استدعاء onShow .
إعادة التحميل، wx.reLaunch : إغلاق جميع الصفحات وإعادة تحميل الصفحة الحالية. * لا يعمل على بعض أجهزة أندرويد.
تبديل علامات التبويب، wx.switchTab : للانتقال من صفحة tabBar إلى صفحة أخرى وإغلاق أو إخفاء جميع الصفحات الأخرى غير tabBar باستخدام onUnload وonHide وonShow . اكتشف جميع السيناريوهات المحتملة للتبديل بين علامات التبويب.
تبديل علامات التبويب وقيود التنقل:
توصيات وي شات:
navigateTo ، يمكن لـ redirectTo فتح صفحة غير tabBar فقط. - يمكن لـ switchTab فتح صفحة tabBar وعرضها فقط. - يمكن استخدام reLaunch لكل الصفحات. getCurrentPages() : يتم استخدام هذه الوظيفة للحصول على مثيل مكدس الصفحة الحالية. يتم تقديمه كمصفوفة في ترتيب مكدس الصفحات. العنصر الأول في المصفوفة هو الصفحة الأولى والعنصر الأخير هو الصفحة الحالية.
tabBar كما يوحي الاسم، هو العنصر الذي يقوم بتكوين شريط علامات التبويب العلوي أو السفلي. tabBar عبارة عن مصفوفة تستوعب ما لا يقل عن 2 علامات تبويب والحد الأقصى 5 علامات تبويب.
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}إشارة السمات:
يتطلب استخدام مفتاح list tabBar وجود كائن في كل عنصر من عناصر المصفوفة.
قيم سمات List هي كما يلي:
وصف سمات شريط التبويب: 
توصيات وي شات:
tabBar الخاص بك إلى الأعلى لا يمكن أن يعرض الرموز.tabBar السفلي هو 40 كيلو بايت، 81 بكسل * 81 بكسل.يتم استخدام عنصر النافذة لتعيين عنوان البرنامج المصغر ونمط النافذة الشائع.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}وصف سمات النافذة:
| يصف | يكتب | القيمة الافتراضية | وصف |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | لون خلفية شريط التنقل |
| navigationBarTextStyle | خيط | white | لون عنوان شريط التنقل، black أو white |
| navigationBarTitleText | خيط | عنوان شريط التنقل | |
| navigationStyle | خيط | default | نمط شريط التنقل، default أو custom . استخدم custom لتخصيص نمط شريط التنقل. |
| لون الخلفية | HexColor | #ffffff | لون خلفية التطبيق على سبيل المثال: لون الخلفية الذي تراه عند السحب للتحديث، لا يؤثر على لون عناصر <page> . |
| theme.backgroundTextStyle | خيط | dark | اسحب لتحديث نمط النص، dark أو light |
| this.backgroundColorTop | خيط | #ffffff | لون الخلفية للجزء العلوي من النافذة. مدعوم فقط على نظام iOS |
| الخلفيةColorBottom | خيط | #ffffff | لون الخلفية للجزء السفلي من النافذة. مدعوم فقط على نظام iOS |
| تمكينPullDownRefresh | منطقية | false | تمكين أو تعطيل السحب للتحديث على مستوى التطبيق. |
| onReachBottomDistance | رقم | 50 | قم بتعيين المسافة من أسفل الصفحة التي يجب عندها تشغيل رد الاتصال onReachBottom() . |
| pageOrientation | خيط | portrait | ضبط دعم دوران الشاشة. يدعم auto ، portrait والمناظر landscape . |
يمكن تكوين الاتجاه الافتراضي للتطبيق باستخدام pageOrientation في window في ملف التكوين app.json . تدعم هذه السمات 3 قيم:
auto للسماح للبرنامج الصغير بالعمل في الوضعين الرأسي والأفقي.portrait لإجبار البرنامج الصغير على العرض في الوضع الرأسي فقطlandscape لفرض عرض البرنامج الصغير في الوضع الأفقي فقط "enablePullDownRefresh": true في app.json العام كما هو مذكور أعلاه ومن ثم يمكنك استدعاء onPullDownRefresh() في صفحات البرنامج المصغرة.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) يوفر WeChat إمكانية تغيير عنوان شريط التنقل العلوي داخل كل صفحة.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )قد يتم توفير مهلة الشبكة في مجموعة متنوعة من طلبات الشبكة. إليك الرابط إلى وثائق WeChat إذا كنت تريد المضي قدمًا.
هنا رابط لوثائق WeChat.
WXML هي لغة ترميز WeChat مشابهة لـ HTML. فهو يجمع بين مكتبة أساسية من المكونات ونظام الأحداث لإنشاء صفحات ديناميكية.
يتصرف نظام أحداث WeChat مثل أحداث Javascript الكلاسيكية التي تتعامل مع الاستجابات المنطقية لطبقة العرض.
يسرد الجدول أدناه الاختلافات الهامة التي ستواجهها في التطوير بين WXML/HTML:
مزيد من التوضيحات حول <block> :
<block> ليس مكونًا ، إنه مجرد عنصر تعبئة ، ولن يقوم بأي عرض في الصفحة ويقبل فقط خصائص التحكم .
ملحوظة: كافة المكونات والسمات مكتوبة بأحرف صغيرة.
لا يسمح إطار عمل البرنامج المصغر للمطورين باستخدام DOM للتحكم في عناصر WXML الخاصة بك. بدلاً من ذلك، ستقوم بتحديث طبقة العرض الخاصة بك (ملف .wxml) عبر طريقة ربط البيانات:
من أجل الامتثال لمتطلبات WeChat، يجب تهيئة سمة data بتنسيق JSON داخل وظيفة Page() . تسمح تقنية ربط البيانات بتحديث البيانات ديناميكيًا داخل طبقة العرض.
من الممارسات الجيدة تهيئة data في أعلى الدالة Page() .
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} data: التي يتم تمريرها إلى طبقة العرض مأخوذة من سمات البيانات في وظيفة Page() المقابلة.
بناء جملة ربط البيانات: يستخدم ربط البيانات بناء جملة Moustache (الأقواس المزدوجة) لالتفاف المتغيرات. بناء الجملة هذا عبارة عن تحليل محرك قالب منطقي. باختصار، إنه مريح للغاية وسهل الاستخدام!
يقدم WeChat الكثير من الإمكانيات فيما يتعلق باستخدام ربط البيانات. لديك الفرصة لاستخدام ربط البيانات على سمات المكونات والخصائص وعمليات السلسلة والعمليات الحسابية ومسار البيانات والمصفوفة.
تعمل الخاصية wx:for control على ربط مصفوفة من الطبقة المنطقية (ملف .js)، والتكرار من خلالها وتخصيص البيانات.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) على غرار <view wx:for> يمكنك استخدام <block wx:for> لعرض كتلة أسطر متعددة . (انظر الكتلة في جدول WXML أعلاه).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >لمزيد من التفاصيل حول الكود أعلاه، راجع مستودع Github هذا.
مزيد من الموارد:
على غرار wx:for ، يتم استخدام wx:if لتحديد عبارة شرطية وتحديد ما إذا كان ينبغي تقديم الكتلة أم لا.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) إذا كنت تريد عرض أكثر من علامة واحدة ضمن كتلة البيان الشرطي، فيمكنك استخدام <block wx:if> .
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > ابحث أكثر في وثائق wx:if WeChat.
تسمح القوالب بتحديد مقتطفات التعليمات البرمجية التي تريد إعادة استخدامها عدة مرات في ملفات مختلفة لبرنامجك المصغر.
يحتوي عنصر قالب WXML على نطاقه الخاص ويمكنه فقط استخدام البيانات لتمريرها.
أولاً، للإعلان عن قالب، يجب عليك تحديد اسمه.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> لاحقًا، إذا كنت تريد استدعاء قالب داخل نفس الملف، فاستخدم السمة is واسم القالب كقيمة للإعلان عن القالب المطلوب. ولا تنس تمرير البيانات إلى القالب باستخدام سمة data .
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) للإعلان عن قالب تم تعريفه بالفعل في ملف جديد، عليك أولاً استيراده.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />مزيد من التفاصيل حول وثائق WeChat هنا.
بالإضافة إلى تهيئة البيانات ووظائف دورة الحياة، يسمح الإطار بتحديد وظائف معالجة الأحداث.
يقوم عنصر WXML (معالج الحدث) بتشغيل الحدث وتربط الطبقة المنطقية معالج الحدث لتلقي كائن حدث كمعلمة.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : تقوم هذه الوظيفة بتحديث البيانات داخل الطبقة المنطقية والتي سيتم إرسالها بعد ذلك إلى طبقة العرض. تستقبل الدالة setData() كائنًا كمعلمة وتقوم بتحديث قيمة المفتاح باستخدام this.data كمسار بيانات.
هناك العديد من أنواع أحداث الربط، ومعظم المكونات لها تعريفها الخاص لحدث الربط.
أحداث ربط المكونات:
bindsubmit للحصول على fom.bindinput لإدخال.bindscroll لعرض التمرير. Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )أحداث الربط الكلاسيكية:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) حدثا الربط الشائعان المستخدمان هما bind+event_type و catch+event_type . حدث الالتقاط هو الحدث الذي يمنع أحداث الفقاعات.
مفهوم حدث فقاعي: بالنسبة للأشخاص الذين لا يستخدمون جافا سكريبت، يمكن تعريف حدث فقاعي عندما يقع حدث في عنصر متداخل في عنصر آخر. يتم تسجيل كل من العقدة الأصلية والعناصر المتداخلة كمعالج حدث لهذا الحدث المعين. يجب أن تستخدم العقدة الأصلية للعنصر المتداخل catch+event_type ، مما سيمنع الحدث من الانتقال إلى عناصر السلف.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )يُستخدم غالبًا عندما تقوم بتداخل العناصر ولا ترغب في عرض العقدة الأصلية للعنصر الذي تربطه.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )فيما يلي بعض النصائح العملية لتمكين مشاركة البرنامج المصغر. يفتح WeChat طريقتين لمشاركة برنامج صغير:
إمكانية تفعيل زر الأمام ضمن القائمة المنسدلة التي تظهر بالضغط على الزاوية اليمنى العليا ... من الصفحة.
قم بإنشاء زر للأمام داخل صفحة برنامجك المصغر. يجعل عملية المشاركة أكثر سهولة في الاستخدام.
في كلا الخيارين، سيقوم الإطار تلقائيًا بإعادة توجيه بطاقة برنامج صغير مع لقطة شاشة لرأس MP الخاص بك.
لتمكين هذا الزر نحتاج إلى استخدام وظيفة Page() تسمى onShareAppMessage .
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,في هذه الوظيفة، يتعين عليك تحديد عنوان سيتم عرضه أعلى البطاقة الأمامية ومسار الصفحة الحالية . إذا نسيت إضافة عنوان، فسيضيف WeChat عنوانًا افتراضيًا (اسم البرنامج المصغر الخاص بك).
القيود: الشيء الوحيد الذي يمكنك تحديده في هذه الحالة هو الحدث onShareAppMessage . سيتم إنشاء زر الأمام بواسطة الإطار نفسه.
تسمح هذه الميزة للمطورين بإنشاء زر إعادة توجيه محدد داخل الصفحة باستخدام خاصية الزر open-type وقيمتها 'share' .
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > على عكس الحالة الأولى، يتعين علينا إنشاء معالج الحدث الذي يقوم بتشغيل وظيفة onShareAppMessage . تستدعي هذه الوظيفة wx.showShareMenu وتمريرها withShareTicket كمعلمة.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) ملاحظة: يستخدم كلا الخيارين وظيفة Page() مما يعني أنك تشارك الصفحة المحددة التي تعلن فيها الوظيفة.
يهدف WeChat إلى بناء تجربة مستخدم ودية وفعالة ومتسقة . لتحقيق ذلك، يوفر فريق التصميم الرسمي لـ WeChat مستودع WeUI. تتوافق مكتبة الواجهة الأمامية الأساسية (WeUI) مع تجربة WeChat المرئية الأصلية. يمكن فهم WeUI على أنها مكتبة WeChat الأمامية، على غرار Bootstrap . يتضمن مجموعة كبيرة من المكونات مثل الزر والخلية ومربع الحوار والتقدم والخبز المحمص والمقالة وورقة العمل والرمز والمزيد.
مستودعات جيثب المفيدة:
قم بتنزيل مستودع WeUI محليًا من خلال npm :
npm install weui-wxss
يحتوي الكود الذي تم تنزيله على كود مصدر WeUI وعينة برنامج صغير يعتمد على WeUI.
لنفتح نموذج برنامج WeUI المصغر في WeChat IDE:
قم باستيراد نمط WeUI في app.wxss الخاص بك لتمكين استخدام نمط WeUI في برنامجك المصغر:
@import "style/weui.wxss" ;
لمزيد من التفاصيل حول إرشادات تصميم WeChat، يمكنك العثور هنا على الوثائق الكاملة.
يحتوي WXSS على جميع ميزات CSS تقريبًا. ورقة الأنماط المحددة في app.wxss هي قواعد النمط الشائعة المحددة في كل صفحة. ورقة الأنماط المحددة في صفحة معينة هي نمط محلي يعمل فقط على الصفحة الحالية وبالتالي يحل محل نفس المحددات المستخدمة في app.wxss . لدى WXSS مقارنة بـ CSS اختلافان رئيسيان:
يستخدم WXSS rpx (البكسل المستجيب) كوحدة. يسمح بضبط البكسل حسب عرض الشاشة. يمكنك الاستمرار في استخدام وحدة px الكلاسيكية (وليس طريقة WeChat للقيام بالأشياء). (1rpx = 0.5px ; 1px = 2rpx)
لاستيراد ورقة الأنماط الصادرة، استخدم عبارة @import متبوعة بالمسار النسبي و ; في نهاية البيان.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;لا يمكن لإطار عمل WeChat دعم الكثير من محددات CSS القياسية، مثل المحدد المتتالي.
المحددات المدعومة:
توصية وي شات:
يوفر إطار عمل WeChat للمطورين مجموعة كبيرة من المكونات الأساسية، القائمة الشاملة للمكونات موجودة هنا.
<navigator> هو مرتكزك في لغة HTML. يتم استخدامه للربط من صفحة إلى أخرى. السمة الأكثر أهمية لعنصر المستكشف هي open-type .
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >وصف سمات المتصفح:
وصف قيم النوع المفتوح:
ينقسم مكون المنتقي في وثائق WeChat إلى ثلاثة محددات، المحدد الكلاسيكي وهو المحدد الافتراضي، ومحدد الوقت ومحدد التاريخ .
تعتمد حالة الاستخدام أدناه على منتقي التاريخ ولكن المنطق يظل كما هو بالنسبة لمنتقي آخر.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )سمات محدد التاريخ:
المفتاح هو تبديل مرئي مع حالتين، تشغيل وإيقاف.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )سمات التبديل:
النخب هو عنصر غير مشروط يستخدم لعرض مكونات مختصرة تنتهي صلاحيتها تلقائيًا لإعلام المستخدمين.
في مقتطف الكود أدناه، نقوم بتزييف إرسال نموذج لإظهار كيفية عمل النخب وعرضه.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >في مقتطف الشفرة أعلاه، أنشأنا زرًا ديناميكيًا بغرض إرسال نموذج . يتم تحريك الزر بواسطة أداة التحميل الدوارة عند النقر عليه.
ثم نعرض نخبًا باستخدام wx.showToast API لإعلام المستخدمين.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )يسمح المربع المشروط بتراكب عنصر صغير على الصفحة . الميزة الأساسية للمربعات المشروطة هي أنها تتجنب الحاجة إلى استخدام النوافذ المنبثقة التقليدية أو إعادة تحميل الصفحة.
هناك خمس فئات ظرفية يتم فيها استخدام المربعات المشروطة بشكل شائع:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )المعلمات مشروط:
يعد مكون map مكونًا أصليًا، ويحتوي على قائمة طويلة من السمات، وسنستعرض أهمها. إليك الرابط لتوثيق WeChat لمزيد من التفاصيل.
قائمة سمات map :
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >ارجع إلى جزء الخدمات المستندة إلى الموقع في wiki إذا كنت تريد إلقاء نظرة على الخدمات المستندة إلى الموقع التي يقدمها WeChat من خلال واجهة برمجة التطبيقات.
توصيات وي شات:
wx.getLocation إلى تحديد type كـ gcj02 يهدف هذا القسم إلى شرح الخطوات المختلفة التي يتعين عليك اتباعها إذا كنت تريد الاحتفاظ ببيانات تطبيقك وجلب البيانات من قاعدة بيانات. لقد اخترنا Leancloud.cn لبساطة تثبيته للمبتدئين.
بعض السياق أولاً: يعتمد المثال أدناه على برنامج صغير يهدف إلى جمع الملاحظات من خلال نموذج بسيط. يحتفظ هذا البرنامج المصغر بالبيانات التي تم جمعها على Leancloud.cn. سنشرح كيفية جلب وعرض البيانات المخزنة على قاعدة البيانات. لتوضيح هذا القسم الثاني (جلب البيانات)، قمنا بإنشاء صفحة جديدة تعرض جميع المراجعات المخزنة على Leancloud.
هنا هو مستودع Github للمشروع المستخدم لإنشاء هذا البرنامج التعليمي.
المواصفات:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >عندما يتم إنشاء بنية النموذج على النحو الوارد أعلاه، نحتاج بعد ذلك إلى إنشاء الحدث الذي يتم تشغيله عن طريق إرسال النموذج.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) التخزين المحلي: في وظيفة bindFormSubmit ، قمنا بتعيين مدخلات المستخدم للمتغيرات المحلية بغرض اختبار ما إذا كان بإمكاننا جمع مدخلات مستخدم النموذج محليًا.
قبل أن نبدأ التثبيت، إذا كنت قيد التطوير، قم بإدراج اسم النطاق الخاص بك عن طريق التحقق من مربع الاختيار الأخير لواجهة المشروع داخل WeChat IDE الخاص بك. لتلبية احتياجات تصحيح الأخطاء المحددة، يمكنك اتباع هذا البرنامج التعليمي لـ Leancloud.
للبدء في إعداد Leancloud، قم أولاً بإنشاء حساب على Leancloud.
الآن بعد أن أصبحت جاهزًا لتثبيت Leancloud وتهيئته في برنامجك المصغر، يمكنك اتباع وثائقه التي ستتيح لك إجراء عملية من خطوتين:
appId و appKey في app.js الخاص بك. // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;إذا ضاعت، فارجع إلى مستودع Github الخاص بالمشروع.
في المقام الأول، قم بإنشاء مجلد جديد يسمى model وأضف ملف form.js إلى هذا المجلد. قم بتسمية ملفك وفقًا لنوع الكائن الذي تريد استمراره، وهو نموذج في هذه الحالة. هذه الخطوة غير مطلوبة ولكنها تسمح بالحفاظ على ملفاتك منظمة.
لنقم بإنشاء الكائن: في ملف form.js الذي أنشأته للتو، اطلب av-weapp-min.js الذي قمت بتثبيته في util.js وقم بتعيينه إلى ثابت AV . ثم قم بإنشاء كائن Form .
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; الآن بعد أن قمت بإنشاء كائن Form ، قم بإنشاء كائن النموذج لتغليف البيانات في الطبقة المنطقية (هنا form.js) وإعادة توجيه المستخدم بعد إرسال النموذج.
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )استخلاص المعلومات من مقتطف الكود:
binFormSubmit أضفنا أذونات تسمح LeanCloud بالقراءة والكتابة من خلال الكائن الذي أنشأناه ونريد الاستمرار.setTimeout التي تغلف البيانات في كائن Form الجديد وإعادة توجيه المستخدم عند تقديم النموذج. ملاحظة: setACL(acl) هو خاصية مدمجة LeanCloud.
حتى الآن يتم كل شيء داخل برنامجك المصغر ، ما تبقى هو إسقاط للبيانات التي تم جمعها داخل لوحة معلومات LeanCloud الخاصة بك .
Form في هذا exemple.اختبره للتأكد من أن البيانات التي تم جمعها تستمر داخل لوحة معلومات LeanCloud الخاصة بك.
أولاً ، اسمحوا لي أن أذكرك بخلفية هذا القسم. نريد أن نعرض في صفحة جديدة قائمة المراجعات التي جمعناها واستمرنا في LeanCloud . أفترض أنك اتبعت القسم الأول من البرنامج التعليمي ، (إذا فاتتك رؤيته أعلاه).
المواصفات:
review .لذلك دعونا ننشئ صفحة مراجعة جديدة وزر يعيد توجيهه إلى الصفحة . ( نصيحة: فقط أضف مسار المسار إلى app.json الخاص بك ، سيقوم الإطار بإنشاء مجلد الصفحة والملفات الجديد بنفسه).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >والخطوة التالية هي جلب البيانات المخزنة على LeanCloud وتعرضها .
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > أعلاه أنشأنا كتلة عرض قائمة باستخدام wx:for العرض كل مراجعة واسم الشخص الذي ينشئ المراجعة.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )استخلاص استخلاص قصاصة الكود:
AV الذي يحتوي على البيانات المخزنة.forms .في حالة الاستخدام هذه ، رأينا للتو كيفية تخزين البيانات التي نجمعها محليًا إلى LeAcloud وكيفية جلب البيانات المخزنة من LeanCloud.
نوصيك بقراءة وثائق LeanCloud أو التحقق من برنامج Leantodo المصغر الذي تم إنشاؤه بواسطة LeanCloud ، مستودع Github.
عندما تكون في الإنتاج ، يجب عليك تكوين اسم مجال LeanCloud داخل WeChat Platform. اتبع هذا البرنامج التعليمي LeanCloud.
جميع معلومات المستخدم التي يمكنك الوصول إليها من خلال wx.getUserInfo :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) يمنحك WeChat "QuickStart" (WeChat BoilerPlate) وظيفة getUserInfo في ملف App.js. كما يوحي الاسم ، تهدف هذه الوظيفة إلى الحصول على معلومات المستخدم . دعنا نذهب من خلال هذه الوظيفة خطوة بخطوة.
الوصف العام:
getUserInfo لديها معلمة CB ، والتي هي أيضا وظيفة.If وظيفة getUserInfo إذا لم يكن userInfo من globalData فارغًا.userInfo فارغ ، فإن وظيفة getUserInfo تستدعي واجهة تسجيل الدخول. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) الحالة الأولى ، نموذج userInfo globalData ليس فارغًا
تهدف بيان الحالة إذا تم تمرير وسيطة CB للحصول على getUserInfo هو نوع وظيفة وإذا كان كذلك ، فسيتم تمرير userInfo .
كيف يكتشفون ما إذا كانت معلمة CB هي وظيفة؟
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} دعنا نذهب من خلال وظيفة onLoad هذه من index.js
onLoad تستدعي وظيفة getUserInfo على مثيل التطبيق .userInfo إلى معلومات المستخدم الحالية.userInfo إلى globalData في ملف app.js.الحالة الثانية ، userinfo خالية
userInfo null getUserInfo تُرجع عبارة else التي تستدعي واجهة تسجيل الدخول.getUserInfo ويعمل ككتلة if رأينا أعلاه. إذا تم تسجيل المستخدم الحالي بالفعل ، يتم تعيين معلومات المستخدم إلى globalData من خلال صفحة index.js التي تستدعي وظيفة onLaod . ثم يتم تطبيق نفس المنطق.
برامج WeChat Mini-Programs لها آلية من ذاكرة التخزين المؤقت في واجهة برمجة التطبيقات الخاصة بهم. في الواقع ، يحتوي كل برنامج صغير على تخزين ذاكرة التخزين المؤقت المحلية الخاصة به.
تذكير: يتم استخدام تخزين ذاكرة التخزين المؤقت لتخزين البيانات التي نريد الوصول إليها بسرعة. إنه يقلل من وقت انتظار المستخدم ، نظرًا لأن الطلب راضٍ عن ذاكرة التخزين المؤقت المحلية التي تكون أقرب إلى العملاء مقارنة بالخادم الأصلي المستخدم لطلب ديسيبل.
يوفر تخزين ذاكرة التخزين المؤقت نوعين من الطرق لتخزين البيانات في ذاكرة التخزين المؤقت:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage Build Parameters كـ JSON ، وهو مفتاح لتحديد المفتاح والبيانات المخزنة لتحديد القيمة الرئيسية لتخزينها.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync Syntax أبسط ، يتم تمرير المعلمات مباشرة. ويمكن الحصول على البيانات من خلال وظيفة رد الاتصال الواردة.
يوفر WeChat ثلاثة إجراءات رئيسية على ذاكرة التخزين المؤقت:
wx.setStorage أو wx.setStorageSync .wx.getStorage أو wx.getStorageSync .wx.clearStorage أو wx.clearStorageSync .wx.removeStorage أو wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) يمكنك استدعاء واجهة مستخدم رمز العميل الخاص بك باستخدام واجهة برمجة تطبيقات wx.scanCode . يتيح الوصول المباشر إلى الماسح الضوئي WeChat من خلال زر CTA بهدف مسح رمز الاستجابة السريعة.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}توفر WeChat API مجموعة كاملة من الخدمات القائمة على الموقع:
wx.chooseLocation لاختيار الموقع الذي تريد عرضه.wx.getLocation للحصول على موقع المستخدم الحالي.wx.openLocation لعرض الموقع على عرض الخريطة الخاصة بهم.wx.createMapContext لتخصيص خريطتك. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} أعلاه استخدمنا wx.getLocation لاسترداد موقف المستخدم الحالي من خلال الحصول على خط العرض وخطوطه .
wx.getLocation مزيد من التفاصيل: إذا ترك المستخدم البرنامج المصغر ولكن عرضه أعلى الدردشة الخاصة به ، فيمكنك الاستمرار في الاتصال wx.getLocation وبالتالي الحصول على موقع المستخدم باستمرار.
عرض موقع المستخدم الحالي على خريطة WeChat المدمجة: wx.openLocation API ، يتيح فتح عرض الخريطة المدمجة في WeChat لعرض الموقع الذي حصلت عليه من وظيفة listenerBtnGetLocation التي أنشأناها أعلاه.
ملاحظة: wx.openLocation API Call ، يعيد توجيه المستخدم إلى نافذة خريطة جديدة.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}يوفر WeChat Image API أربعة إمكانيات:
wx.chooseImage لاختيار صورة من ألبومك أو الكاميرا.wx.previewImage لمعاينة الصورة قبل التحميل على التطبيق.wx.getImageInfo للحصول على معلومات الصورة (الارتفاع ، العرض ، المسار ، SRC).wx.saveImageToPhotosAlbum لحفظ الصورة من البرنامج المصغر إلى ألبومك. في المثال أدناه ، نقوم بإنشاء وظيفة تسمى listenerBtnChooseImage بهدف الاتصال بألبوم المستخدم أو الكاميرا باستخدام wx.chooseImage . ثم نستخدم wx.getImageInfo للحصول على معلومات الصورة.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )الآن بعد أن أصبح لدينا صورة على الصفحة ، دعنا نحفظ الصورة من البرنامج المصغر إلى ألبوم المستخدم الحالي عن طريق النقر على الصورة الطويلة.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )يوفر WeChat Network API طلبات HTTPS الشائعة ، WebSocket ، تحميل الملفات وتنزيلها.
wx.request لتقديم طلب HTTPS قياسي.wx.uploadFile لتحميل ملف إلى الخادم المعين.wx.downloadFile لتنزيل ملف من الخادم المعين. 
في المثال أدناه ، لدينا وظيفة واحدة ومعالج أحداث واحد: addNewPost و onPullDownRefresh على التوالي ، كما ينص اسمهم ، يجب أن تكون قادرًا على إضافة منشور جديد والحصول على منشورات باستخدام مكالمة wx.request .
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )الآن بعد أن نشرنا ، دعنا نحصل وعرضها على طبقة العرض. من أجل البساطة ، سنستفيد من onpulldownrefresh لإعادة تحميل منشورات جديدة.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) على طول مسار إنشاء برنامجنا المصغرة ، واجهنا مشكلات وأسئلة ، نريد مشاركتها معك. إذا كان لديك بعض المشكلات التي تريد مشاركتها ، فتواصل معنا.
يتيح WeChat فقط واجهة برمجة التطبيقات التي لديها رخصة ICP ، بحيث يمكنك نسيان معظم واجهات برمجة التطبيقات التي تعرفها في الدول الغربية.
فيما يلي دليل من واجهات برمجة التطبيقات المتوفرة في الصين ، تحقق من ذلك.
background-image: خاصية لا يمكن الحصول على ressources من خلال صورة خلفية CSS background-image: url(../../images/banner.png); . أعلم أنه أمر مروع ، لكن علينا أن نتعامل معها.
هناك طريقتان لتجاوز هذا الإحباط:
يمكنك استخدام background-image: ولكن لا يمكنك استخدام مسار حقيقي ، يجب عليك تشفير صورتك في Base64 ثم تمريرها إلى background-image: url(base64 image); . فيما يلي أداة لترميز الصور في Base64.
أو يمكنك استخدام علامة <image> ومعالجة الصور باستخدام سمة العلامة <image> مثل mode . يحتوي WeChat على 13 طريقة ، و 9 وضع القطع و 4 هي وضع التكبير . هنا رابط إلى الوثائق.
يرمز RPX إلى البكسل المستجيب وهو وحدة برامج WeChat المصغرة. وفقًا للتعريف الرسمي ، يعتمد rpx على عرض الشاشة التكيفية.
في الواقع ، تعتمد وحدة RPX على وحدة rem التي تعني "Root EM" . لماذا لا وحدة em ؟
تعتبر وحدة em نسبة إلى حجم الخط من الوالد ، مما يسبب مشكلة مضمونة . تعد وحدة rem نسبة إلى عنصر الجذر الذي يعاني من قضية المركبة (واجب حجم الخطوط).
ومع ذلك ، للعودة إلى وحدة rpx ، فإن مزايا RPX هي:
هل تعمل على برنامج صغير؟ يمكنك التواصل معنا إذا كنت ترغب في مشاركة عملك ، وتلبية طاقمنا ، واطلب المساعدة!
إذا كنت ترغب في المساهمة ، فيمكنك إرسال طلب سحب هنا أو إعطائنا صيحة على Shanghai (AT) Lewagon.com للحصول على اقتراحات!
