weapp
v2
Componentes do mini programa WeChat e encapsulamento de funções, programação simples de componentes
Com base no encapsulamento de componentes personalizados do WeChat e na programação simples de componentes, consulte API de componentes para componentes personalizados de componentes.
Observe que você precisa habilitar a função de conversão ES6 para ES5 nas ferramentas de desenvolvedor do WeChat. Use uma mini biblioteca base de programa superior à versão 1.6.3 e atualize o WeChat para a versão mais recente.
Se você precisar de um conjunto de códigos para desenvolver o miniaplicativo WeChat e o miniaplicativo Alipay, o plug-in mpapi poderá ajudá-lo (o miniaplicativo WeChat e o plug-in compatível com a API do miniaplicativo Alipay)
Use as ferramentas de desenvolvedor do WeChat para abrir o diretório 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 " /> A seguir mostra o uso simples do componente Tab . Para exemplos específicos, consulte o código em pages/weapp/tab dentro do projeto. O uso de outros tipos de componentes é basicamente semelhante a este método de chamada.
// 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 )
}
} ) O prompt flutuante, um componente do Toast comumente usado no desenvolvimento móvel, é diferente do showToast do miniprograma
titledelay Tempo de atraso para desligamento automático em milissegundos, padrão: 1500 hide ser fechado < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />aba
listactive-index , padrão: 0theme , vazio por padrão, pode ser passado em weapp-tab ou outros estilos personalizados change retorno de chamada de comutação, parâmetro event , onde event.detail.activeIndex é o índice selecionado atualmente < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />Seleção de cidade
region change retorno de chamada de comutação, parâmetro event , onde event.detail.region são as informações da região selecionada < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />Carregue mais, sem prompt de dados, geralmente usado com lista pull-up de dados
icon-type O tipo do componente do ícone do miniaplicativo, padrão: searchstatus status atual, valores opcionais: loading , nomore , empty , sem dados ainda, padrão: loadingempty-txt não possui texto de prompt de dados. Padrão:暂无数据loading-txt carregando o texto do prompt, padrão:正在加载nomore-txt não possui mais texto de prompt, padrão:没有更多数据了 < weapp-loader status =" {{status}} " /> Menu pop-up com até 12 direções de seta suportadas, atendendo à maioria dos cenários 
list de menu de listapage-selector O seletor CSS para o contêiner mais externo de toda a página, o padrão é .pageelem-id está posicionado de acordo com o ID do elementodir direção da seta, valores opcionais tl tc tr rt rc rb bl bc br lt lc lb , representando respectivamente as 12 direções combinadas de superior, direita, inferior, esquerda, meiotl corresponde ao top-lefttc corresponde ao top-centertr corresponde ao top-rightrt corresponde ao right-toprc corresponde ao right-centerrb corresponde ao right-bottombl corresponde ao bottom-leftbc corresponde ao bottom-centerbr corresponde ao bottom-rightleft-top ltlc corresponde ao left-centerlb corresponde ao left-bottom select retorno de chamada para cada item, parâmetro event , onde event.detail.item é o item atual selecionadoshow retorno de chamadahide retorno de chamada oculto < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />Principais dicas
titletype tipo de prompt, success , error , warn , padrão: defaultdelay Tempo de atraso para desligamento automático em milissegundos, padrão: 1500 hide ser fechado < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> A seleção de calendário suporta exibição de alternância deslizante de vários meses. Clique para a esquerda e para a direita para alternar os meses e mudar para hoje. 
start-date de inícioend-datecurrent-date data selecionada padrãoshow é exibido desde o início, padrão: falsecurrent exibe o primeiro mês por padrão 0 mês a partir da data de início é o primeiro mês. change a função de retorno de chamada da data selecionada, parâmetro event , onde event.detail.currentDate é a data atual selecionada < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />O encaminhamento e o compartilhamento de páginas eliminam a configuração complicada de cada página, tornando seu uso mais simples e eficiente. Ele oferece suporte a opções de parâmetros de passagem de página.
title exibidourl , o padrão é o endereço da página atual import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; Digite julgamento, retornando Number , String , Boolean , Array , Object , Function e outros tipos de strings
value é qualquer parâmetro que precisa ser julgado 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 ( ) ) ; // DateAnalisar objeto em string de URL
urlObject , um objeto a ser convertido em um parâmetro de stringunEncodeURI não usa codificação encodeURIComponent é usado por padrão. 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 Analise a string do URL em um objeto, em vez de usar common.param
urlString , endereço com parâmetros de URLunDecodeURI não usa decodificação e usa decodeURIComponent por padrão. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;O salto de página, otimizado para evitar cliques rápidos para abrir duas páginas, suporta a forma de objeto para passar parâmetros de URL, correspondendo a wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch do miniprograma, respectivamente.
url endereço da páginaparams import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; Use FontAwesome para ícones de fontes e WeUI para estilos de componentes CSS.
MIT, aproveite a diversão do código aberto.
