[Miniprograma] Arquivo de Arquitetura e Configuração

O modelo de arquitetura do applet

Ambiente de hospedagem do miniprograma: cliente WeChat

O ambiente host serve para executar vários arquivos do applet: arquivo wxml, arquivo wxss, arquivo js

Quando o applet é baseado no ambiente WebView, a lógica JS do WebView, a criação da árvore DOM, a análise CSS, o cálculo de estilo, o Layout e o Paint (Composite) ocorrem no mesmo thread . Executar muita lógica JS no WebView pode bloquear a renderização , resultando em A interface está travada .

Sob essa premissa, o applet considera desempenho e segurança ao mesmo tempo, e adota uma arquitetura atualmente chamada de "modelo dual-thread" .

Modelo de dois fios :

O módulo WXML e o estilo WXSS são executados na camada de renderização , que usa o encadeamento WebView para renderização (um programa tem várias páginas, que usarão vários encadeamentos WebView).

Os scripts JS (app.js/home.js, etc.) são executados na camada lógica e a camada lógica usa JsCore para executar scripts JS.

Esses dois threads irão interagir por meio do cliente WeChat (Nativo).

arquivo de configuração do miniaplicativo

Muitos requisitos de desenvolvimento do applet são especificados no arquivo de configuração

Por exemplo, barra de navegação superior, barra de guia inferior e roteamento de página, etc.

Tudo é feito através de arquivos de configuração, sem a necessidade de escrevermos nosso próprio código

Por que fazer isso?

Fazer isso pode ser mais propício para nossa eficiência de desenvolvimento;

E pode garantir que alguns estilos do applet desenvolvido sejam relativamente consistentes;

Os arquivos de configuração comuns são os seguintes

project.config.json: Arquivo de configuração do projeto, como nome do projeto, appid, etc.;

• https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

sitemap.json: Pesquisa de mini programa relacionada;

• https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

app.json: configuração global;

page.json: configuração da página;

Mapa do Site de Configuração do Projeto

project.config.json: o arquivo de configuração do projeto

Mas geralmente modificamos a configuração do projeto não é modificado através do arquivo project.config.json;

Por exemplo, para modificar a versão da biblioteca base, abra Detalhes -> Configurações locais por sua vez

Após a modificação, descobrimos que o arquivo project.config.json não foi alterado e o número da versão da biblioteca básica foi modificado no arquivo project.private.config.json

O motivo é explicado na documentação oficial: Você pode configurar a configuração pública no project.config.jsonarquivo , e em project.private.config.jsonConfigurando a configuração pessoal, você pode project.private.config.jsonescrever para .gitignoreEvitar conflitos de gerenciamento de versão

sitemap.json

Configure se deseja permitir a receita do WeChat, o WeChat gerará receita para as palavras-chave da página do applet na forma de um rastreador, semelhante à otimização de SEO

Permitido por padrão

Em seguida, apresentamos os arquivos de configuração app.json e page.json em detalhes

Arquivo de configuração global do aplicativo

Existem muitas configurações globais, vamos listar algumas mais importantes aqui .

A configuração completa pode ser visualizada na documentação oficial, link para você: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

Atributos	modelo	Requeridos	descrever
Páginas	Corda[]	Sim	lista de caminhos de página
janela	Objeto	não	Comportamento de janela padrão global
Barra de abas	Objeto	não	O desempenho da barra de guias inferior

páginas: lista de caminhos de página

Ele é usado para especificar em quais páginas o applet consiste e cada item corresponde às informações do caminho (incluindo o nome do arquivo) de uma página.

Todas as páginas do applet devem ser registradas em páginas.

window: a exibição da janela padrão global

Como exibir a janela especificada pelo usuário, que também contém muitos outros atributos, mais configuração de atributo pode visualizar o documento oficial

tabBar: Exibição da barra de guias inferior

A lista na tabbar corresponde a um array, e o array armazena um objeto por um, que é usado para configurar a tabbar

Também podemos configurar a cor do texto selecionado, que possui uma propriedade selectedColor no mesmo nível da lista

"tabBar": {
    
    
  "selectedColor": "#f00"
},

Há também duas configurações no App.json

"style": "v2": Indica que o estilo de componente mais recente é usado

"sitemapLocation": "sitemap.json": Indica o local onde o arquivo de mapeamento do site está armazenado

---

arquivo de configuração de página de página

Cada página do miniaplicativo também pode usar um arquivo .json para configurar o desempenho da janela desta página .

Os itens de configuração na página substituirão os mesmos itens de configuração na janela do app.json na página atual.

A configuração completa pode ser visualizada na documentação oficial, link para você: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

Por exemplo: a barra de navegação exibida em diferentes páginas não é a mesma, podemos configurá-la no arquivo de configuração da página

{
    
    
	"usingComponents": {
    
    },
	"navigationBarTitleText": "分类页面",
	"navigationBarBackgroundColor": "#f00",
	"navigationBarTextStyle": "white"
}

Configurado na página substituirá a mesma configuração em app.json

"enablePullDownRefresh", definido como true para habilitar a atualização suspensa

{
    
    
  "enablePullDownRefresh": true
}

Após a abertura, podemos monitorar a atualização suspensa no código js

Page({
    
    
	onPullDownRefresh() {
    
    
		console.log("用户进行了下拉刷新");
	}
})