O principal aplicativo de mensagens da China, WeChat, lançou algo bastante radical: miniprogramas. Aplicativos incorporados que não requerem download nem instalação. Abra, use, compartilhe, pronto!
Há um grande debate – e muitos clickbaits – sobre o quão práticos esses aplicativos são... Na verdade, a estrutura fornecida aos desenvolvedores está apenas na fase inicial, ainda limitada e, honestamente, um pouco frustrante. No entanto, a Tencent está investindo recursos sem precedentes na adoção deste canal, ganhando impulso e abrindo oportunidades para os pioneiros. Acreditamos que esses hackers poderão encontrar ganhos rápidos se ousarem tentar.
Tem ideias de serviços que gostaria de implantar no WeChat o mais rápido possível? Tem conhecimento básico de Javascript e deseja experimentar este framework? Se perdeu na tradução do documento pelo Google? Precisa de um pequeno impulso para descriptografar o que é possível ou não? Olá e seja bem-vindo.
Encontrar o documento oficial não é fácil. Na verdade, são necessárias muitas tentativas/erros, algumas pesquisas sobre código-fonte aberto e muitas suposições para fazer algo. Você tem batido a cabeça na parede. Nós entendemos.
Nossa missão é ajudar empreendedores criativos a construir excelentes produtos tecnológicos. Nós o ajudaremos a dar os pequenos passos.
O conteúdo abaixo não é uma tradução da documentação e certamente ficará desatualizado rapidamente. É simplesmente nossa contribuição ajudar qualquer pessoa a começar e construir rapidamente um miniprograma WeChat interessante. Faça isso agora.
Você está trabalhando em um miniprograma? Entre em contato conosco se quiser compartilhar seu trabalho, conhecer nossa equipe, pedir ajuda!
Se você quiser contribuir, você pode enviar um Pull Request aqui ou nos enviar uma mensagem em shanghai(at)lewagon.com para sugestões!
Esta peça original foi escrita por ex-alunos do Le Wagon: Adrien Pelegri (Lote #30) com o apoio de Thibault Genaitay (Driver China) e Stephane Delgado (Lote #61).
O processo de registro é muito difícil, principalmente se você não tem nenhuma experiência com o fantástico mundo administrativo chinês. O processo de verificação do WeChat será longo. Mantenha a calma.
Desde o registro do miniprograma WeChat até o lançamento do desenvolvimento, você basicamente precisa seguir estas etapas:
Aqui está uma lista de materiais que você precisará para registrar um miniprograma como empresa:
Recomendamos que você siga este manual completo em inglês sobre como registrar e criar um projeto de miniprograma: Artigo médio ou verifique esta documentação oficial do WeChat (Última atualização: 02/08/2017).
Um IDE (ambiente de desenvolvimento integrado) é um conjunto de ferramentas de programação para escrever um aplicativo. Consiste em um editor de código, um compilador e um depurador, acessíveis através de uma única interface gráfica de usuário.
Baixe o WeChat IDE aqui: Mac, Windows 64, Windows 32
Aqui está um tutorial rápido para dominar o IDE do WeChat e tirar o máximo proveito dele.
Um editor de código com a árvore de seus arquivos ao lado e um Simulador à esquerda, que exibe a prévia do seu aplicativo.
Aqui está uma lista completa de botões para executar tarefas quando você está em desenvolvimento:
1. Perfil: clique nele para sair do IDE. 2. Edição de código 3. Depuração/Inspeção: veja abaixo. 4. Informações do projeto: veja abaixo. 5. Compilador: pode ser útil para compilar o aplicativo quando a atualização automática da visualização não está funcionando.
6. Valor da cena 7. Cache 8. Desligar: Saia do projeto em que está e vá para outro. 9. Ocultar o simulador 10. Dispositivos: Fornece uma lista de dispositivos para testar a capacidade de resposta do miniprograma. 11. Você pode trabalhar em: wifi, 4G, 3G, 2G. 12. Oculte arborescência 13. Gerencie seus arquivos: pesquise, adicione e exclua uma pasta ou arquivo.
Debugger/Inspector: Essa ferramenta é uma parte importante do IDE, parece com o bom e velho Chrome DevTools .
1. Barra superior Rede: Este painel serve para depurar problemas de solicitação e soquete ou desempenho de carregamento de página. Armazenamento: permite acessar todos os dados que você possui em seu cache. AppData: é usado para exibir os dados atuais do projeto. Você pode editar diretamente os dados no painel e visualizá-los. Wxml: permite inspecionar e editar instantaneamente todos os elementos da sua página. Sensor: você pode simular a localização e o desempenho do dispositivo móvel para depurar a detecção de gravidade.
2. Painel Fontes O painel Fontes exibe os arquivos de script do projeto atual.
3. Console O console permitirá que você saiba quais erros você tem em seu código, registrando informações de diagnóstico e interagindo com o javascript na página como seu console.log() que você colocou e muito mais.
Informações do projeto: Esta página é onde você encontrará os detalhes do projeto atual como seu AppID, informações de diretório e muito mais. Ao clicar na opção de visualização você poderá testar o miniprograma diretamente no seu telefone após escanear um código QR.
Observação: enquanto testa seu miniprograma em seu telefone, você pode ativar a ferramenta de depurador diretamente em seu dispositivo.
Esta seção apresentará a estrutura do "início rápido" fornecido pelo WeChat (padrão) e os fundamentos necessários para cumprir esta estrutura.
Baixe o início rápido do WeChat.zip.
Arborescência de início rápido:
. ├── app.js ├── app.json ├── app.wxss ├── páginas │ ├── índice │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── registros │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss └── utilitários └──util.js
A página de índice deste padrão exibe uma página de boas-vindas com as informações do perfil do usuário atual. Um clique em seu avatar o redirecionará para uma nova página exibindo os registros atuais do miniprograma.
Os miniprogramas WeChat começam com arquivos de “aplicativos” (veja a imagem abaixo). Esses arquivos são o diretório raiz do miniprograma e a entrada do seu miniprograma. (Aqui está a documentação oficial do WeChat).
app.js é o código do script, a lógica global do seu miniprograma. Você pode configurar e manipular as funções do ciclo de vida do seu MP, declarar variáveis globais ou chamar uma 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 é a configuração global do miniprograma geral. Você pode configurar o caminho da página MP (miniprograma), o estilo da janela MP, definir o tempo limite da rede e a configuração de depuração.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}
Nota: Comentários não são permitidos no arquivo app.json .
app.wxss é a folha de estilo global do miniprograma. Você deve declarar regras de estilo comuns aqui.
As duas páginas do início rápido do WeChat são:
A pasta Pages é onde você cria ou cria suas páginas de miniprograma. Cada página criada deve conter dois arquivos:
Você pode adicionar mais dois arquivos em cada página criada:
Arquivo .json para configuração da página.
Arquivo .wxss para a folha de estilos da sua interface.
Regra: Cada página do seu miniprograma pode ser composta por quatro extensões de arquivo diferentes (js; json; wxml; wxss), mas deve ter o mesmo nome.
Mais detalhes: Uma nova página sempre conterá um arquivo .js e um arquivo .wxml no mínimo. A extensão do arquivo .json é usada caso você queira substituir a configuração da janela nesta página específica. Adicione .wxss se desejar adicionar uma folha de estilo à sua página.
Vamos ver o que acontece em cada página do projeto de início rápido.
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
} )
} )
}
} )
Comentários do trecho:
Page()
posteriormente para coletar informações do usuário.Page()
e define data:
para vincular dados dinamicamente à visualização.Tapped
redireciona o usuário atual para sua página de logs.onLoad
obtém informações do usuário e atualiza os dados 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 ) )
} )
} )
}
} )
Comentários do trecho:
formatTime
posteriormente.Page()
e define data:
.onLoad
recupera os logs atuais do usuário do cache wx.getStorageSync('logs')
. Em seguida, renderize os logs no formatTime
fornecido pelo require do 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
}
Observação:
Em Utils são armazenadas bibliotecas importadas que você pode precisar em outro lugar (em nosso exemplo, util.js é necessário em log.js). No trecho de código acima, a função formatTime
é definida em util.js para exibir corretamente a data de seus logs.
Até agora você percebeu que terá duas camadas em cada página:
Camada lógica (.js): processa os dados e os envia para a camada de visualização, enquanto recebe eventos acionados pela camada de visualização.
Camada de visualização (.wxml/.wxss): exibe os dados processados pela camada lógica em uma visualização, enquanto envia os eventos da camada de visualização para a camada lógica.
Podemos dividir o ciclo de vida de um miniprograma em dois ciclos, o ciclo do aplicativo e o ciclo da página. O ciclo de vida App()
é o ponto inicial e final do miniprograma, enquanto o ciclo de vida Page()
é ativado quando os usuários navegam pelo miniprograma.
A função App()
é usada para registrar um miniprograma. Leva um objeto como parâmetro que especifica as funções do ciclo de vida de um MP.
Comentários:
onLaunch
e inicializa o MP.onShow
é acionada.onHide
é acionada quando o usuário atual sai do miniprograma. 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'
} )
A estrutura WeChat oferece uma função global chamada getApp()
que é uma instância de App()
.
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data
A função getApp()
pode ser útil pelo simples motivo de que você não pode definir a função App()
dentro de uma função Page()
. Para acessar a instância do aplicativo você deve chamar a função getApp()
.
A função Page()
é usada para registrar uma página. Ele aceita um objeto como parâmetro, que especifica os dados iniciais da página, funções de ciclo de vida, manipulador de eventos e assim por diante.
Comentários:
onLoad
.onShow
.onShow
chama onReady
para renderizar a visualização.onShow
renderiza diretamente uma visualização.onHide
é acionado quando o miniprograma salta para outra página.onUnload
é chamada quando você sai de uma página usando wx.redirectTo()
e wx.navigateBack()
. Ou quando a página atual for reiniciada, 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.'
} )
}
} )
Quando o ciclo de vida App()
for concluído, a página será carregada chamando onLoad
pela primeira vez e só a chamará uma vez.
Quando o miniprograma está sendo executado em segundo plano (ciclo de vida do aplicativo) para o primeiro plano (ciclo de vida da página), ele primeiro chama a função App()
onShow
e, em seguida, chama a função Page()
onShow
ao mudar para o primeiro plano.
Recomendações do WeChat:
App()
não pode ser reutilizada e deve ser registrada uma vez no app.js .onLaunch
quando a página getCurrentPages()
ainda não tiver sido gerada.getApp()
você pode obter uma instância de App() mas as funções de ciclo de vida não tentam chamar as funções App()
. A configuração do seu miniprograma é simples e projetada para economizar tempo e frustração ao ter necessidades de personalização.
O WeChat divide a configuração do app.json em cinco partes:
Nesta parte, detalharemos este exemplo completo de configuração do 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"
} ]
}
}
A função pages
em app.json é definir todas as rotas do seu miniprograma. A configuração deste item é obrigatória e utiliza um array de strings . Cada subpasta e arquivos dentro da pasta de páginas pai corresponde a um caminho de roteamento .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
}
Dica: Cada vez que você adicionar um caminho de rota a "pages"
, o IDE criará automaticamente a pasta e os arquivos que correspondem ao caminho que você acabou de criar.
A estrutura WeChat traz diversas lógicas de roteamento:
Descrição do modo de roteamento:
Inicialização: Assim que o miniprograma é iniciado, a primeira página é carregada pelas funções onLoad
e onShow
.
Abra uma nova página: Abrir uma nova página oculta a página atual e salta para outra usando wx.navigateTo
. Nos bastidores, a primeira página será ocultada pela chamada da função onHide e saltará para a outra página chamando onLoad e onShow .
Redirecionamento de página: feche a página atual chamando onUnload e vá para uma página dentro do aplicativo usando wx.redirectTo
que chama as funções onLoad e onShow .
Retorno da página: onUnload
a página atual, chama a função onLoad
e exibe a página de destino chamando onShow
.
Recarregando, wx.reLaunch
: fecha todas as páginas e recarrega a página atual. * Não funciona em determinados dispositivos Android.
Alternar guias, wx.switchTab
: salta de uma página tabBar para outra e fecha ou oculta todas as outras páginas que não sejam tabBar usando onUnload, onHide e onShow . Descubra todos os cenários possíveis para troca de guias.
Alternar guias, restrições de navegação:
Recomendações do WeChat:
navigateTo
, redirectTo
só pode abrir uma página que não seja tabBar. - switchTab
só pode abrir e exibir a página tabBar. - reLaunch
pode ser usado para todas as páginas. getCurrentPages()
: Esta função é usada para obter a instância da pilha de páginas atual. É fornecido como uma matriz na ordem da pilha de páginas. O primeiro item da matriz é a primeira página e o último item é a página atual.
tabBar
como o nome sugere, é o item que configura a barra de abas superior ou inferior. tabBar
é um array que acomoda no mínimo 2 e no máximo 5 abas.
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"
} ]
}
}
Indicação de atributos:
Usar a chave list
tabBar
requer um objeto em cada elemento da matriz.
Os valores dos atributos List
são os seguintes:
Descrição dos atributos TabBar:
Recomendações do WeChat:
tabBar
como superior não pôde exibir ícones.tabBar
é 40kb, 81px * 81px.O item janela é usado para definir o título do miniprograma e o estilo comum da janela.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}
Descrição dos atributos da janela:
Atributo | Tipo | Valor padrão | Descrição |
---|---|---|---|
navegaçãoBarBackgroundColor | HexColor | #000000 | Cor de fundo da barra de navegação |
navegaçãoBarTextStyle | Corda | white | Cor do título da barra de navegação, black ou white |
navegaçãoBarTitleText | Corda | Título da barra de navegação | |
estilo de navegação | Corda | default | Estilo da barra de navegação, default ou custom . Use custom para personalizar o estilo da barra de navegação. |
cor de fundo | HexColor | #ffffff | Cor de fundo do aplicativo. Ex: a cor de fundo que você vê ao puxar para atualizar não afeta a cor dos elementos <page> . |
estilo de fundoTexto | Corda | dark | Puxe para atualizar o estilo do texto, dark ou light |
plano de fundoColorTop | Corda | #ffffff | Cor de fundo da parte superior da janela. Compatível apenas com iOS |
plano de fundoColorBottom | Corda | #ffffff | Cor de fundo da parte inferior da janela. Compatível apenas com iOS |
ativarPullDownRefresh | Booleano | false | Ative ou desative o pull para atualizar todo o aplicativo. |
onReachBottomDistance | Número | 50 | Defina a distância da parte inferior da página na qual o retorno de chamada onReachBottom() deve ser acionado. |
orientação da página | Corda | portrait | Defina o suporte para rotação da tela. Suporta auto , portrait e landscape . |
A orientação padrão do aplicativo pode ser configurada usando pageOrientation
na window
do arquivo de configuração app.json
. Este atributo suporta 3 valores:
auto
para permitir que o miniprograma funcione nos modos Retrato e Paisagem.portrait
para forçar o miniprograma a ser exibido apenas no modo retratolandscape
para forçar o miniprograma a ser exibido apenas no modo paisagem "enablePullDownRefresh": true
precisa ser configurado no app.json global como acima e então você pode chamar onPullDownRefresh()
nas páginas do miniprograma.
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 ( )
}
} )
O WeChat oferece a possibilidade de alterar o título da barra de navegação superior de cada página.
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 )
}
} )
}
} )
O tempo limite da rede pode ser fornecido em diversas solicitações de rede. Aqui está o link para a documentação do WeChat se você quiser ir mais longe.
Aqui está um link para a documentação do WeChat.
WXML é uma linguagem de marcação WeChat semelhante ao HTML. Ele combina uma biblioteca básica de componentes e um sistema de eventos para construir páginas dinâmicas.
O sistema de eventos WeChat se comporta como eventos Javascript clássicos que tratam de respostas lógicas para a camada de visualização.
A tabela abaixo lista as diferenças significativas que você encontrará no desenvolvimento entre WXML/HTML:
Mais explicações sobre <block>
:
<block>
não é um componente , é apenas um elemento de empacotamento , não fará nenhuma renderização na página e aceitará apenas propriedades de controle .
Nota: Todos os componentes e atributos estão em letras minúsculas.
A estrutura do miniprograma não permite que os desenvolvedores usem o DOM para controlar seus elementos WXML. Em vez disso, você atualizará sua camada de visualização (arquivo .wxml) por meio do método de vinculação de dados:
Para cumprir os requisitos do WeChat, o atributo data
deve ser inicializado no formato JSON na função Page()
. A técnica de vinculação de dados permite atualizar dados dinamicamente dentro da camada de visualização.
Uma boa prática é inicializar data
no topo da função 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' } ]
}
}
Os data:
que são passados para a camada de visualização são obtidos dos atributos de dados na função Page()
correspondente.
Sintaxe de vinculação de dados: a vinculação de dados usa a sintaxe Moustache (colchetes duplos) para agrupar variáveis. Esta sintaxe é uma análise de mecanismo de modelo sem lógica. Resumindo, é muito prático e fácil de usar!
O WeChat oferece muitas possibilidades em relação ao uso de vinculação de dados. Você tem a oportunidade de usar vinculação de dados em atributos de componentes, propriedades, operações de string, operações aritméticas, caminho de dados e array.
A propriedade de controle wx:for
vincula um array de sua camada lógica (arquivo .js), faz um loop por ele e atribui os dados.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view >
// .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} )
Semelhante a <view wx:for>
você pode usar <block wx:for>
para renderizar blocos de múltiplas linhas . (Veja o bloco na tabela WXML acima).
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 >
Para mais detalhes sobre o código acima, consulte este repositório Github.
Recursos adicionais:
Semelhante a wx:for
, wx:if
é usado para definir uma instrução condicional e determinar se o bloco deve ser renderizado ou não.
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
}
} )
Se quiser exibir mais de uma tag em seu bloco de instrução condicional, você pode usar <block wx:if>
.
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block >
Aprofunde-se na documentação wx:if
WeChat.
Os templates permitem definir trechos de código que você deseja reutilizar diversas vezes em diferentes arquivos do seu miniprograma.
O item do modelo WXML tem seu próprio escopo e só pode usar dados para transmitir.
Primeiro, para declarar um modelo você precisa definir seu nome.
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}} " />
Posteriormente, se você quiser chamar um modelo dentro do mesmo arquivo, use o atributo is
e o nome do modelo como valor para declarar o modelo necessário. E não se esqueça de passar os dados para o modelo usando o atributo data
.
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} )
Para declarar um modelo já definido em um novo arquivo você primeiro precisa importá-lo.
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'}} " />
Mais detalhes sobre a documentação do WeChat aqui.
Além das funções de inicialização de dados e ciclo de vida, a estrutura permite definir funções de manipulação de eventos.
O elemento WXML (manipulador de eventos) aciona o evento e a camada lógica vincula o manipulador de eventos para receber um objeto de evento como parâmetro.
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()
: Esta função atualiza os dados dentro da camada lógica que serão enviados para a camada de visualização. A função setData()
recebe um objeto como parâmetro e atualiza o valor da chave usando this.data
como caminho de dados.
Existem muitos tipos de eventos de ligação, a maioria dos componentes tem sua própria definição de evento de ligação.
Eventos de ligação de componentes:
bindsubmit
para um formulário.bindinput
para uma entrada.bindscroll
para uma visualização de rolagem. 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
}
} )
Eventos de ligação clássicos:
bind+event_type
catch+event_type
Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button />
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} )
Os dois eventos de ligação comuns usados são bind+event_type
e catch+event_type
. O evento catch é aquele que evita eventos de borbulhamento.
Conceito de evento borbulhante: para pessoas que não usam JavaScript, o evento borbulhante pode ser definido quando um evento ocorre em um elemento aninhado em outro elemento. Tanto o nó pai quanto os elementos aninhados são registrados como manipuladores de eventos para esse evento específico. O nó pai do elemento aninhado deve usar catch+event_type
, o que impedirá que o evento borbulhe para os elementos ancestrais.
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' )
}
} )
Usado principalmente quando você aninha elementos e não deseja exibir o nó pai do elemento vinculado.
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' ) ;
}
} )
Aqui estão algumas dicas práticas para permitir o compartilhamento de miniprogramas. O WeChat abre duas maneiras de compartilhar um miniprograma:
Possibilidade de ativar o botão avançar no menu suspenso que aparece clicando no canto superior direito ...
da página.
Crie um botão de avanço na página do seu miniprograma. Isso torna o processo de compartilhamento mais amigável.
Em ambas as variantes, o framework encaminhará automaticamente um cartão de miniprograma com uma captura de tela do seu cabeçalho MP.
Para habilitar este botão, precisamos usar uma função Page()
chamada 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'
}
} ,
Nesta função você deve definir um título que será exibido no topo do cartão de encaminhamento e o caminho da página atual . Se você esquecer de adicionar um título, o WeChat adicionará um por padrão (o nome do seu miniprograma).
Restrição: A única coisa que você pode definir neste caso é o evento onShareAppMessage
. O botão avançar será criado pelo próprio framework .
Este recurso permite que os desenvolvedores criem um botão de encaminhamento específico dentro da página usando a propriedade do botão open-type
e seu valor '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 >
Ao contrário do primeiro caso, temos que criar o manipulador de eventos que aciona a função onShareAppMessage
. Esta função chama wx.showShareMenu
e passa withShareTicket
como parâmetro.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} )
Nota: Ambas as variantes usam uma função Page()
que implica que você está compartilhando a página específica onde declara a função.
O WeChat visa construir uma experiência de usuário amigável , eficiente e consistente . Para que isso aconteça, a equipe de design oficial do WeChat fornece um repositório WeUI. Esta biblioteca front-end básica (WeUI) é consistente com a experiência visual nativa do WeChat. WeUI, pode ser entendida como uma biblioteca front-end do WeChat, semelhante ao Bootstrap . Inclui um grande conjunto de componentes como botão, célula, caixa de diálogo, progresso, brinde, artigo, planilha de ação, ícone e muito mais.
Repositórios úteis do Github:
Baixe o repositório WeUI localmente através do npm
:
npm install weui-wxss
O código baixado contém o código-fonte WeUI e um exemplo de miniprograma baseado em WeUI.
Vamos abrir o exemplo do miniprograma WeUI no WeChat IDE:
Importe o estilo WeUI em seu app.wxss para permitir o uso do estilo WeUI em seu miniprograma:
@import "style/weui.wxss" ;
Para mais detalhes sobre as diretrizes de design do WeChat você pode encontrar aqui a documentação completa.
WXSS possui quase todos os recursos do CSS. A folha de estilo definida em app.wxss são as regras de estilo comuns identificadas em cada página. A folha de estilo definida em uma página específica é um estilo local que atua apenas na página atual e, portanto, substitui os mesmos seletores usados em app.wxss . WXSS comparado ao CSS tem duas diferenças principais:
WXSS usa rpx
(pixel responsivo) como unidade. Permite ajustar pixels de acordo com a largura da tela. Você pode continuar a usar a unidade px
clássica (mas não a maneira WeChat de fazer as coisas). (1rpx = 0.5px ; 1px = 2rpx)
Para importar a folha de estilo de saída, use a instrução @import
seguida do caminho relativo e um ;
no final da declaração.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;
A estrutura WeChat não suporta muitos seletores CSS padrão, como o seletor em cascata.
Seletores suportados:
Recomendação WeChat:
A estrutura WeChat fornece aos desenvolvedores um grande conjunto de componentes básicos, a lista exaustiva de componentes está aqui.
<navigator>
é sua âncora em HTML. É usado para vincular de uma página a outra. O atributo mais importante do elemento navigator é 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 >
Descrição dos atributos do navegador:
Descrição dos valores de tipo aberto:
O componente Picker na documentação do WeChat é dividido em três seletores, o seletor clássico que é o padrão, o seletor de hora e o seletor de data .
O caso de uso abaixo é baseado em um seletor de data, mas a lógica permanece a mesma para outro seletor.
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
} )
}
} )
Atributos do seletor de data:
Um switch é uma alternância visual com dois estados, ligado e desligado.
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 )
}
} )
Alternar atributos:
Um brinde é um elemento não modal usado para exibir componentes breves e com expiração automática para informar os usuários.
No trecho de código abaixo, estamos fingindo o envio de um formulário para mostrar como um brinde está funcionando e sendo exibido.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >
No trecho de código acima criamos um botão dinâmico com a finalidade de enviar um formulário . O botão é animado por um botão giratório de carregamento quando você clica nele.
Em seguida, exibimos um brinde usando a API wx.showToast
para informar os usuários.
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
} )
}
} )
Uma caixa modal permite sobrepor um pequeno elemento em uma página . O principal benefício das caixas modais é que elas evitam a necessidade de usar janelas pop-up convencionais ou recarregamentos de página.
Existem cinco categorias situacionais onde as caixas modais são comumente usadas:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )
Parâmetros modais:
O componente map
é um componente nativo, possui uma longa lista de atributos, iremos examinar os principais. Aqui está o link para a documentação do WeChat para mais detalhes.
lista de atributos 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 >
Consulte a parte de serviços baseados em localização do wiki se quiser dar uma olhada nos serviços baseados em localização que o WeChat oferece por meio da API.
Recomendações do WeChat:
wx.getLocation
precisa especificar type
como gcj02
Esta seção tem como objetivo explicar as diferentes etapas que você deve seguir se quiser persistir os dados do seu aplicativo e buscar dados em um banco de dados. Selecionamos Leancloud.cn pela simplicidade de sua instalação para iniciantes.
Primeiro, algum contexto: O exemplo abaixo é baseado em um miniprograma que visa coletar feedbacks por meio de um formulário simples. Este miniprograma persiste os dados coletados no Leancloud.cn. Explicaremos como buscar e exibir dados armazenados no banco de dados. Para ilustrar esta segunda seção (busca de dados) criamos uma nova página que exibe todas as avaliações armazenadas no Leancloud.
Aqui está o repositório Github do projeto usado para criar este tutorial.
Especificações:
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 >
Quando a estrutura do formulário é criada conforme acima, a seguir precisamos criar o evento que é acionado pelo envio do formulário.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} )
Armazenamento local: na função bindFormSubmit
, atribuímos as entradas do usuário a variáveis locais com o objetivo de testar se podemos coletar as entradas do usuário do formulário localmente.
Antes de iniciarmos a instalação, se você estiver em desenvolvimento, coloque seu nome de domínio na lista branca marcando a última caixa de seleção da interface do projeto em seu IDE WeChat. Para necessidades específicas de depuração, você pode seguir este tutorial do Leancloud.
Para começar a configurar o Leancloud, primeiro crie uma conta no Leancloud.
Agora que você está pronto para a instalação e inicialização do Leancloud em seu miniprograma, você pode seguir a documentação que permitirá passar por um processo de duas etapas:
appId
e appKey
em seu 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' ,
} ) ;
Se você estiver perdido, consulte o repositório Github do projeto.
Em primeiro lugar, crie uma nova pasta chamada model e adicione um arquivo form.js
a esta pasta. Nomeie seu arquivo de acordo com o tipo de objeto que você deseja persistir, neste caso um formulário. Esta etapa não é obrigatória, mas permite manter seus arquivos organizados.
Vamos criar o objeto: No arquivo form.js que você acabou de criar, require av-weapp-min.js que você instalou em util.js e o atribui a uma constante AV
. Em seguida, instancie o objeto 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 ;
Agora que você instanciou o objeto Form
, crie o objeto form para encapsular os dados na camada lógica (aqui form.js) e redirecione o usuário após o envio do formulário.
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 ) ;
}
} )
Resumo do trecho de código:
binFormSubmit
adicionamos permissões que permitem ao Leancloud ler e escrever através do objeto que criamos e queremos persistir.setTimeout
que encapsulou os dados no novo objeto Form
e redireciona o usuário quando o formulário é enviado. NOTA: setACL(acl)
é uma propriedade integrada do LeanCloud.
Até agora, tudo é feito no seu mini-programa, o que resta a ser feito é uma projeção dos dados coletados no seu painel LeanCloud .
Form
neste exemplo.Teste -o para garantir que os dados coletados sejam persistidos no seu painel LeanCloud.
Primeiro, deixe -me lembrá -lo dos antecedentes desta seção. Queremos exibir em uma nova página a lista de críticas que coletamos e persistiu no LeanCloud . Presumo que você tenha seguido a primeira seção do tutorial (se você o perdeu, veja acima).
Especificações:
review
.Então, vamos criar uma nova página de revisão e um botão que redireciona para revisar a página . ( Dica: basta adicionar o caminho da rota ao seu app.json , a estrutura criará a nova pasta e arquivos da página por si só).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >
O próximo passo é buscar dados armazenados no LeanCloud e exibi -los .
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 >
Acima, criamos um bloco de renderização da lista usando wx:for
que seja exibido cada revisão e nome da pessoa que cria a revisão.
// 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 ) ;
} ,
} )
Snippet de código DiBrief:
AV
que contém os dados armazenados.forms
.Neste caso de uso, acabamos de ver como armazenar dados que coletamos localmente no LeanCloud e como buscar dados armazenados no LeanCloud.
Recomendamos que você leia a documentação do LeanCloud ou verifique o mini-Programa LeanTodo criado pelo LeanCloud, GitHub Repository.
Quando você estiver em produção, você deve configurar o nome do domínio LeanCloud na plataforma WeChat. Siga este tutorial de LeanCloud.
Todas as informações do usuário às quais você tem acesso através do 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) fornece uma função getUserInfo
no arquivo app.js. Como o nome sugere, essa função deve obter informações do usuário . Vamos passar por essa função passo a passo.
Descrição geral:
getUserInfo
possui um parâmetro CB , que também é uma função.If
da função getUserInfo
será passado se userInfo
da globalData
não for nulo.userInfo
é nulo, a função getUserInfo
chama a interface de login. // 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
}
} )
Primeiro caso, userInfo
Form globalData
não é nulo
A instrução IF de condição visa determinar se o argumento de CB passou para obter getUserInfo
é um tipo de função e, se for, ele passará userInfo
.
Como eles descobrem se o parâmetro CB é uma função?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
}
Vamos passar por esta função onLoad
de index.js
onLoad
chama a função getUserInfo
na instância do aplicativo .userInfo
para as informações atuais do usuário.userInfo
atualizado para o globalData
no arquivo app.js.Segundo caso, o userInfo é nulo
userInfo
for uma função NULL getUserInfo
retornará a instrução else
que chama a interface de login.getUserInfo
é chamado e atua como o bloco if
que vimos acima. Se o usuário atual já estiver login, as informações do usuário serão atribuídas à página globalData
através do Index.js , que chama a função onLaod
. E então a mesma lógica é aplicada.
Os mini-programas de WeChat têm um mecanismo de cache em sua API. De fato, cada mini-programa tem seu próprio armazenamento de cache local.
Lembrete: o armazenamento de cache é usado para armazenar dados que queremos acessar rapidamente. Reduz o tempo de espera do usuário , pois a solicitação é atendida no cache local , que está mais próximo dos clientes em comparação com o servidor original usado para solicitar seu banco de dados.
O armazenamento de cache oferece dois tipos de métodos para armazenar dados no cache:
wx.setStorage
: wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ;
Parâmetros de construção wx.setStorage
como um JSON, uma chave para especificar a chave e os dados armazenados para especificar o valor da chave para armazenar.
wx.setStorageSync
: wx . setStorageSync ( 'name' , 'Thibault' ) ;
A sintaxe wx.setStorageSync
é mais simples, os parâmetros são passados diretamente. E pode obter dados através da função de retorno de chamada recebida.
O WeChat fornece três ações principais no cache:
wx.setStorage
ou wx.setStorageSync
.wx.getStorage
ou wx.getStorageSync
.wx.clearStorage
ou wx.clearStorageSync
.wx.removeStorage
ou 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 ,
} )
}
} )
}
} )
Você pode chamar a interface do scanner do seu código de cliente usando a API wx.scanCode
. Ele fornece acesso direto ao scanner WeChat através de um botão CTA com o objetivo de digitalizar um código QR.
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 fornece um conjunto completo de serviços baseados em localização:
wx.chooseLocation
para escolher o local que você deseja exibir.wx.getLocation
para obter o local atual do usuário.wx.openLocation
para exibir a localização em sua exibição de mapa Buit-in .wx.createMapContext
para personalizar seu mapa. 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 )
}
} )
}
Acima, usamos o wx.getLocation
para recuperar a posição atual do usuário, obtendo sua latitude e longitude.
wx.getLocation
Detalhes mais: se um usuário deixar o mini-programa, mas exibir no topo do seu bate-papo no mini-programa, você poderá continuar chamando wx.getLocation
e, portanto, obtenha a localização do usuário continuamente.
Exiba a localização atual do usuário no mapa interno do WeChat: wx.openLocation
API CALL, Permite a abertura da Visualização do mapa interno do WeChat para exibir o local que você obteve da função listenerBtnGetLocation
que criamos acima.
NOTA: Chamada da API wx.openLocation
, redireciona o usuário para uma nova janela de mapa.
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 oferece quatro possibilidades:
wx.chooseImage
para escolher uma imagem do seu álbum ou câmera.wx.previewImage
para visualizar a imagem antes do upload no aplicativo.wx.getImageInfo
para obter informações da imagem (altura, largura, caminho, SRC).wx.saveImageToPhotosAlbum
para salvar a imagem do mini-programa no seu álbum. No exemplo abaixo, criamos uma função chamada listenerBtnChooseImage
com o objetivo de chamar o álbum ou câmera do usuário usando wx.chooseImage
. Em seguida, estamos usando wx.getImageInfo
para obter informações da imagem.
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 )
}
} )
}
} )
}
} )
Agora que temos uma imagem na página, vamos salvar a imagem do mini-programa para o álbum de usuários atual, tocando na imagem.
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' )
}
} )
}
} )
A WeChat Network API oferece solicitações HTTPs comuns, WebSocket, Upload e Download Arquivos.
wx.request
para fazer uma solicitação HTTPS padrão.wx.uploadFile
para fazer upload de um arquivo no servidor designado.wx.downloadFile
para baixar um arquivo do servidor designado. No exemplo abaixo, temos uma função e um manipulador de eventos: addNewPost
e onPullDownRefresh
, respectivamente, como afirma o nome, você poderá adicionar uma nova postagem e obter postagens usando uma chamada 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'
}
} )
}
} )
Agora que postamos, vamos pegar e exibi -lo na camada de visualização. Por uma questão de simplicidade, aproveitaremos o OnPullDownRefresh para recarregar novas postagens.
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.
} )
}
} )
}
} )
Ao longo de nosso caminho de criação de mini-programas, encontramos questões e perguntas, queremos compartilhar com você. Se você teve alguns problemas que deseja compartilhar, entre em contato conosco.
O WeChat permite apenas API que possui uma licença de ICP, para que você possa esquecer a maioria das APIs com as quais está familiarizado nos países ocidentais.
Aqui está um diretório de APIs disponíveis na China, confira.
background-image:
propriedade A imagem Ressources não pode ser obtida através da imagem de fundo CSS background-image: url(../../images/banner.png);
. Eu sei que é terrível, mas temos que lidar com isso.
Existem duas maneiras de ignorar essa frustração:
Você pode usar a background-image:
mas não pode usar um caminho realtivo , precisa codificar sua imagem no Base64 e depois passá-la para a background-image: url(base64 image);
. Aqui está uma ferramenta para codificar imagens na base64.
Ou você pode usar a tag <image>
e tratar imagens com mode
de tag <image>
tag. O WeChat possui 13 modos , 9 são o modo de corte e 4 são o modo de zoom . Aqui está um link para a documentação.
RPX significa pixel responsivo , que é a unidade dos mini-programas de WeChat. De acordo com a definição oficial, rpx
é baseado na largura da tela adaptativa.
De fato, a unidade RPX é baseada na unidade rem
, que significa "root em" . Por que não em
unidade EM?
A unidade em
é relativa ao tamanho da fonte do pai , o que causa um problema de composição . A unidade rem
é relativa ao elemento raiz, que se contém a questão da composição (serviço de dimensionamento da fonte).
No entanto, para voltar à unidade rpx
, as vantagens RPX são:
Você está trabalhando em um mini-programa? Entre em contato conosco se quiser compartilhar seu trabalho, encontre nossa equipe, peça ajuda!
Se você deseja contribuir, pode enviar uma solicitação de tração aqui ou nos dar um grito sobre Xangai (em) lewagon.com para sugestões!