weapp
v2
مكونات برنامج WeChat المصغر وتغليف الوظائف وبرمجة المكونات البسيطة
استنادًا إلى تغليف المكونات المخصصة للمكونات في WeChat ، وبرمجة المكونات البسيطة، يرجى الرجوع إلى Component API للمكونات المخصصة للمكونات.
لاحظ أنك تحتاج إلى تمكين وظيفة التحويل من ES6 إلى ES5 في أدوات مطور WeChat، برجاء استخدام مكتبة قاعدة برامج صغيرة أكبر من الإصدار 1.6.3 ، وتحديث WeChat إلى الإصدار الأحدث.
إذا كنت بحاجة إلى مجموعة من الأكواد لتطوير تطبيق WeChat الصغير وبرنامج Alipay الصغير، فقد يتمكن المكون الإضافي mpapi من مساعدتك (المكون الإضافي المتوافق مع تطبيق WeChat الصغير وبرنامج Alipay الصغير API)
الرجاء استخدام أدوات مطور WeChat لفتح دليل src
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> يوضح ما يلي الاستخدام البسيط لمكون Tab للحصول على أمثلة محددة، راجع الكود الموجود في pages/weapp/tab داخل المشروع. يشبه استخدام الأنواع الأخرى من المكونات بشكل أساسي طريقة الاتصال هذه.
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> // tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} ) تختلف المطالبة العائمة، وهي مكون Toast شائع الاستخدام في تطوير الأجهزة المحمولة، عن showToast الخاص بالبرنامج المصغر
title السريعdelay وقت التأخير للإيقاف التلقائي بالمللي ثانية، الافتراضي: 1500 hide الإخفاء < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />فاتورة غير مدفوعة
listactive-index ، الافتراضي: 0theme ، الفارغ افتراضيًا، في weapp-tab أو الأنماط المخصصة الأخرى change تبديل رد الاتصال، event المعلمة، حيث يكون event.detail.activeIndex هو الفهرس المحدد حاليًا < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />اختيار المدينة
region السريعة change تبديل رد الاتصال، event المعلمة، حيث يكون event.detail.region هو معلومات المنطقة المحددة < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />تحميل المزيد، لا توجد مطالبة بالبيانات، وعادة ما تستخدم مع قائمة البيانات المنسدلة
icon-type نوع مكون رمز التطبيق الصغير، الافتراضي: searchstatus الحالة الحالية، القيم الاختيارية: loading ، nomore ، empty ، لا توجد بيانات بعد، الافتراضي: جارٍ loadingempty-txt على نص مطالبة البيانات الافتراضي:暂无数据loading-txt النص الفوري لتحميل النص، الافتراضي:正在加载nomore-txt على أي نص مطالبة، افتراضيًا:没有更多数据了 < weapp-loader status =" {{status}} " /> قائمة منبثقة تحتوي على ما يصل إلى 12 اتجاهًا مدعومًا للسهم، تلبي معظم السيناريوهات 
list القائمةpage-selector محدد CSS للحاوية الخارجية للصفحة بأكملها، الافتراضي هو .pageelem-id العنصر وفقًا لمعرف العنصرdir ، القيم الاختيارية tl tc tr rt rc rb bl bc br lt lc lb ، تمثل على التوالي الاتجاهات الـ 12 المدمجة لأعلى، يمين، أسفل، يسار، وسطtl يتوافق مع top-lefttc يتوافق مع top-centertr يتوافق مع top-rightrt يتوافق مع right-toprc يتوافق مع right-centerrb يتوافق مع right-bottombl يتوافق مع bottom-leftbc يتوافق مع bottom-centerbr يتوافق مع bottom-rightlt يتوافق مع left-toplc يتوافق مع left-centerlb يتوافق مع left-bottom select رد اتصال لكل عنصر، event المعلمة، حيث يكون event.detail.item هو العنصر الحالي المحددshow رد الاتصالhide رد الاتصال المخفي < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />أهم النصائح
title السريعtype نوع المطالبة success error warn الافتراضي: defaultdelay وقت التأخير للإيقاف التلقائي بالمللي ثانية، الافتراضي: 1500 hide الإخفاء < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> يدعم تحديد التقويم عرض التبديل المنزلق لعدة أشهر. انقر فوق اليسار واليمين لتبديل الأشهر والتحويل إلى اليوم. 
start-date البدءend-date الانتهاءcurrent-date الافتراضي المحددshow من البداية أم لا، الافتراضي: falsecurrent الشهر الأول بشكل افتراضي 0 الشهر من تاريخ البدء هو الشهر الأول change وظيفة رد الاتصال للتاريخ المحدد، event المعلمة، حيث يكون event.detail.currentDate هو التاريخ المحدد الحالي < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />تعمل إعادة توجيه الصفحة ومشاركتها على التخلص من التكوين المعقد لكل صفحة، مما يجعلها أكثر بساطة وكفاءة في الاستخدام، كما أنها تدعم خيارات معلمات تمرير الصفحة.
title المعروضurl ، الافتراضي هو عنوان الصفحة الحالية import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; نوع الحكم، وإرجاع Number ، String ، Boolean ، Array ، Object ، Function وسلاسل الأنواع الأخرى
value هي أي معلمة تحتاج إلى الحكم عليها import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Dateتحليل الكائن إلى سلسلة URL
urlObject ، كائن ليتم تحويله إلى معلمة سلسلةunEncodeURI الترميز، ويتم استخدام encodeURIComponent افتراضيًا. import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24 قم بتحليل سلسلة عنوان url إلى كائن، بدلاً من استخدام common.param
urlString ، عنوان مع معلمات urlunDecodeURI فك التشفير، ويستخدم decodeURIComponent افتراضيًا. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;قفز الصفحة، المُحسّن لمنع النقرات السريعة لفتح صفحتين، يدعم نموذج الكائن لتمرير معلمات عنوان url، المتوافقة مع wx.navigateTo، وwx.redirectTo، وwx.switchTab، وwx.reLaunch للبرنامج الصغير على التوالي.
urlparams صفحة المعلمات import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; استخدم FontAwesome لأيقونات الخطوط وWeUI لأنماط مكونات CSS.
معهد ماساتشوستس للتكنولوجيا، استمتع بمتعة المصادر المفتوحة.
