weapp
v2
Composants du mini-programme WeChat et encapsulation de fonctions, programmation de composants simples
Basé sur l'encapsulation des composants personnalisés de WeChat , une programmation de composants simple, veuillez vous référer à l'API des composants pour les composants personnalisés des composants.
Notez que vous devez activer la fonction ES6 à ES5 dans les outils de développement WeChat. Veuillez utiliser une mini bibliothèque de base de programme supérieure à la version 1.6.3 et mettre à jour WeChat vers la dernière version.
Si vous avez besoin d'un ensemble de codes pour développer l'applet WeChat et l'applet Alipay, alors le plug-in mpapi pourra peut-être vous aider (plug-in compatible avec l'applet WeChat et l'applet Alipay)
Veuillez utiliser les outils de développement WeChat pour ouvrir le répertoire src
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents Components // 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 " /> Ce qui suit montre l'utilisation simple du composant Tab . Pour des exemples spécifiques, reportez-vous au code dans pages/weapp/tab à l'intérieur du projet. L'utilisation d'autres types de composants est fondamentalement similaire à cette méthode d'appel.
// 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 )
}
} ) L'invite flottante, un composant Toast couramment utilisé dans le développement mobile, est différente de l'invite showToast du mini-programme.
titledelay Délai pour l'arrêt automatique en millisecondes, par défaut : 1500 hide < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />languette
listactive-index , par défaut : 0theme , vide par défaut, peut être transmis dans weapp-tab ou dans d'autres styles personnalisés change le rappel de commutation, paramètre event , où event.detail.activeIndex est l'index actuellement sélectionné < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />Sélection de ville
region change le rappel de commutation, paramètre event , où event.detail.region est les informations sur la région sélectionnée < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />Charger davantage, aucune invite de données, généralement utilisé avec une liste de données déroulante
icon-type Le type du composant icône de l'applet, par défaut : searchstatus état actuel, valeurs facultatives : loading , nomore , empty , pas encore de données, par défaut : loadingempty-txt n'a pas de texte d'invite de données. Par défaut :暂无数据loading-txt texte d'invite de chargement, par défaut :正在加载nomore-txt n'a plus de texte d'invite, par défaut :没有更多数据了 < weapp-loader status =" {{status}} " /> Menu contextuel avec jusqu'à 12 directions de flèche prises en charge, répondant à la plupart des scénarios 
listpage-selector Le sélecteur CSS pour le conteneur le plus externe de la page entière, la valeur par défaut est .pageelem-id est positionné en fonction de l'ID de l'élémentdir , valeurs facultatives tl tc tr rt rc rb bl bc br lt lc lb , représentant respectivement les 12 combinaisons de haut, droite, bas, gauche et centre.tl correspond au top-lefttc correspond au top-centertr correspond en top-rightrt correspond au right-toprc correspond au right-centerrb correspond à right-bottombl correspond en bottom-leftbc correspond au bottom-centerbr correspond en bottom-rightlt correspond au left-toplc correspond au left-centerlb correspond au left-bottom select le rappel pour chaque élément, paramètre event , où event.detail.item est l'élément actuellement sélectionnéshow le rappelhide le rappel caché < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />Meilleurs conseils
titletype le type d'invite, success , error , warn , par défaut : defaultdelay Délai pour l'arrêt automatique en millisecondes, par défaut : 1500 hide < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> La sélection du calendrier prend en charge l'affichage de commutation coulissant de plusieurs mois. Cliquez à gauche et à droite pour changer de mois et passer à aujourd'hui. 
start-date de débutend-datecurrent-date date sélectionnée par défautshow est affiché depuis le début, par défaut : falsecurrent affiche le premier mois par défaut. Le mois à partir de la date de début est le premier mois. Par défaut : 0 change la fonction de rappel de la date sélectionnée, paramètre event , où event.detail.currentDate est la date actuellement sélectionnée < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />Le transfert et le partage de pages éliminent la configuration compliquée de chaque page, ce qui la rend plus simple et plus efficace à utiliser. Il prend en charge les options de paramètres de passage de page.
title affichéurl , la valeur par défaut est l'adresse de la page actuelle import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; Jugement de type, renvoyant Number , String , Boolean , Array , Object , Function et autres chaînes de type
value est n'importe quel paramètre qui doit être jugé 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 ( ) ) ; // DateAnalyser l'objet dans la chaîne d'URL
urlObject , un objet à convertir en paramètre chaîneunEncodeURI n'utilise pas d'encodage encodeURIComponent est utilisé par défaut. 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 Analyser la chaîne URL dans un objet, au lieu d'utiliser common.param
urlString , adresse avec paramètres urlunDecodeURI n'utilise pas de décodage et utilise decodeURIComponent par défaut. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;Le saut de page, optimisé pour empêcher les clics rapides pour ouvrir deux pages, prend en charge le formulaire d'objet pour transmettre les paramètres d'URL, correspondant respectivement à wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch du mini programme.
urlparams import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; Utilisez FontAwesome pour les icônes de police et WeUI pour les styles de composants CSS.
MIT, profitez du plaisir de l'open source.
