Extrair padrões repetidos
reutilização de estilo
Veremos que muitas vezes no processo de desenvolvimento, o mesmo estilo é usado em várias páginas.Na verdade, como mencionado anteriormente, o estilo comum pode ser colocado em app.wxss para que possa ser reutilizado diretamente.
Por exemplo: a disposição vertical do layout flexível é definida em app.wxss
.flex-col{
display: flex;
flex-direction: column;
}
Em seguida, outras páginas podem usar os estilos combinados diretamente:
As gerais são escritas em app.wxss, e as personalizadas são escritas em páginas específicas.
O acima é a reutilização de estilos, e outra é definir os valores de atributos específicos comumente usados em estilos como variáveis para facilitar a reutilização.
Reutilização de atributos
Use propriedades personalizadas CSS (variáveis)
para declarar uma propriedade personalizada. O nome da propriedade precisa começar com dois sinais de menos (–) e o valor da propriedade pode ser qualquer valor CSS válido.
page {
--color:#F8D300
}
Obs: Precisa ser definido no app.wxss, para que o wxss de todas as páginas possam ser utilizadas.
Ao usar uma variável local, envolva-a com a função var() para representar um valor de propriedade válido:
.content-btn {
background: var(--color);
}
Da mesma forma, além da cor, também existem algumas margens, tamanhos e outros atributos uniformes.
extrair método duplicado
Os alunos que desenvolveram pequenos programas devem saber que o app.js pode ser compartilhado globalmente. Portanto, neste momento, se houver métodos e propriedades exigidos por várias páginas, todos eles poderão ser escritos em app.js.
Do seguinte modo:
// app.js
App({
randomMsg(){
let msgs = this.globalData.msgs
let msg = msgs[Math.floor(Math.random() * msgs.length)];
return msg
},
globalData: {
msgs:["你好吗？","加油鸭！","早点睡！","奥利给！","别熬夜！"]
}
})
Como usar a página:
const app = getApp()
Page({
onLoad: function (options) {
console.log(app.globalData)
console.log(app.randomMsg())
},
})
Cenário aplicável: Compartilhamento no applet são os dados usados por várias páginas no ciclo de vida do aplicativo. Após o applet ser reiniciado, as variáveis globais serão reinicializadas.
Instalar pacotes de terceiros
Além de extrair métodos em utilitários, é fácil reutilizá-los. Às vezes custa muito para nós manter classes de ferramentas comuns e precisamos entender a fundo a API. Neste momento, usamos classes de ferramentas mantidas por outros.
Neste momento, iremos ao github para encontrar bibliotecas de código aberto relevantes e precisamos usá-las quando encontrarmos as corretas. Geralmente existem duas maneiras de usar:
- Copie o original diretamente para seu próprio projeto
- Referências remotas usando pacotes npm
Para referências específicas, consulte o artigo que escrevi antes: " Como introduzir pacotes npm em miniaplicativos WeChat?" "
Resumir
- Tanto os estilos CSS quanto os métodos JS devem ser reutilizados da forma mais abstrata possível, para melhorar a eficiência geral.
- No processo de otimização, primeiro parte e depois geral, não há melhor, mas melhor, e otimizar com base em cenários de negócios.
- As ferramentas comumente usadas não precisam reinventar a roda, e aprender a usar bibliotecas de código aberto de terceiros existentes pode melhorar a eficiência.