weapp
v2
WeChat-Miniprogrammkomponenten und Funktionskapselung, einfache Komponentenprogrammierung
Basierend auf WeChats Component-Kapselung benutzerdefinierter Komponenten . Einfache Komponentenprogrammierung. Informationen zu benutzerdefinierten Komponentenkomponenten finden Sie in der Komponenten-API.
Beachten Sie, dass Sie die ES6-zu-ES5-Konvertierungsfunktion in den WeChat-Entwicklertools aktivieren müssen. Bitte verwenden Sie eine Miniprogramm-Basisbibliothek größer als Version 1.6.3 und aktualisieren Sie WeChat auf die neueste Version.
Wenn Sie eine Reihe von Codes benötigen, um das WeChat-Applet und das Alipay-Applet zu entwickeln, kann Ihnen möglicherweise das mpapi-Plug-in helfen (mit WeChat-Applet und Alipay-Applet API kompatibles Plug-in).
Bitte verwenden Sie die WeChat-Entwicklertools, um das src Verzeichnis zu öffnen
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents von Components konfigurieren // 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 " /> Im Folgenden wird die einfache Verwendung der Tab -Komponente gezeigt. Konkrete Beispiele finden Sie im Code in pages/weapp/tab im Projekt. Die Verwendung anderer Komponententypen ähnelt grundsätzlich dieser Aufrufmethode.
// 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 )
}
} ) Floating Prompt, eine Toast-Komponente, die häufig in der mobilen Entwicklung verwendet wird, unterscheidet sich vom showToast des Miniprogramms
titledelay Verzögerungszeit für das automatische Herunterfahren in Millisekunden, Standard: 1500 hide geschlossen wurde < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />Tab
list “.active-index ausgewählter Index, Standard: 0theme -Themenstil, standardmäßig leer, kann in weapp-tab oder anderen benutzerdefinierten Stilen übergeben werden change Switching Callback, Parameter event , wobei event.detail.activeIndex der aktuell ausgewählte Index ist < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />Stadtauswahl
region change den Switching-Callback, Parameter event , wobei event.detail.region die Informationen zur ausgewählten Region sind < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />Mehr laden, keine Datenaufforderung, wird normalerweise mit Pull-up-Datenliste verwendet
icon-type Der Typ der Applet-Symbolkomponente, Standard: searchstatus aktueller Status, optionale Werte: loading , nomore , empty , noch keine Daten, Standard: loadingempty-txt hat keinen Datenaufforderungstext. Standard:暂无数据loading-txt lädt Eingabeaufforderungstext, Standard:正在加载nomore-txt hat keinen Eingabeaufforderungstext mehr, Standard:没有更多数据了 < weapp-loader status =" {{status}} " /> Popup-Menü mit bis zu 12 unterstützten Pfeilrichtungen, das die meisten Szenarien abdeckt 
listpage-selector Der CSS-Selektor für den äußersten Container der gesamten Seite, der Standardwert ist .pageelem-id entsprechend der ID des Elements positioniert istdir Pfeilrichtung, optionale Werte tl tc tr rt rc rb bl bc br lt lc lb , die jeweils die 12 kombinierten Richtungen oben, rechts, unten, links, Mitte darstellentl entspricht top-lefttc entspricht top-centertr entspricht top-rightrt entspricht right-toprc entspricht der right-centerrb entspricht right-bottombl entspricht bottom-leftbc entspricht bottom-centerbr entspricht bottom-rightlt entspricht left-toplc entspricht der left-centerlb entspricht left-bottom select für jedes Element einen Rückruf aus, Parameter event , wobei event.detail.item das aktuell ausgewählte Element istshowhide < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />Top-Tipps
titletype Eingabeaufforderungstyp, success , error , warn , Standard ein: defaultdelay Verzögerungszeit für das automatische Herunterfahren in Millisekunden, Standard: 1500 hide geschlossen wurde < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> Die Kalenderauswahl unterstützt die gleitende Wechselanzeige mehrerer Monate. Klicken Sie nach links und rechts, um zwischen den Monaten und dem heutigen Tag zu wechseln. 
start-dateend-datecurrent-date standardmäßig ausgewählte Datumshow von Anfang an angezeigt wird, Standard: falsecurrent zeigt standardmäßig den ersten Monat an. Der Monat ab 0 Startdatum ist der erste Monat change die Rückruffunktion des ausgewählten Datums, Parameter event , wobei event.detail.currentDate das aktuell ausgewählte Datum ist < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />Durch die Seitenweiterleitung und -freigabe entfällt die komplizierte Konfiguration jeder Seite, wodurch die Verwendung einfacher und effizienter wird. Es werden Parameteroptionen für die Seitenübergabe unterstützt.
titleurl weitergeleitete Seitenadresse. Der Standardwert ist die aktuelle Seitenadresse import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; Typbeurteilung, Rückgabe Number , String , Boolean , Array , Object , Function und anderen Typzeichenfolgen
value ist jeder Parameter, der beurteilt werden muss 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 ( ) ) ; // DateObjekt in URL-String analysieren
urlObject -Parameterobjekt, ein Objekt, das in einen String-Parameter konvertiert werden sollunEncodeURI verwendet keine Codierung encodeURIComponent wird standardmäßig verwendet. 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 Analysieren Sie die URL-Zeichenfolge in ein Objekt, anstatt common.param zu verwenden
urlString Adresse, Adresse mit URL-ParameternunDecodeURI verwendet keine Dekodierung und verwendet standardmäßig decodeURIComponent . import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;Seitensprung, optimiert, um schnelle Klicks zum Öffnen zweier Seiten zu verhindern, unterstützt Objektform zur Übergabe von URL-Parametern, entsprechend wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch des Miniprogramms.
url Seitenadresseparams Seitenparameterobjekt import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; Verwenden Sie FontAwesome für Schriftartensymbole und WeUI für CSS-Komponentenstile.
MIT, genießen Sie den Spaß an Open Source.
