[Applet] Use o uni-app para criar uma estrutura para o ambiente de applet

O diretório de desenvolvimento é:

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

Atributos	Tipo	Obrigatório	Descrição do produto	Compatível com plataforma
globalStyle	Objeto	Não	Definir o desempenho da janela da página padrão
Páginas	Matriz de objeto	Sim	Definir o caminho da página e o desempenho da janela
abas	Objeto	Não	Defina o desempenho da guia inferior
condição	Objeto	Não	Configuração do modo de inicialização
subPacotes	Matriz de objeto	Não	Configuração de carregamento do subcontrato
preloadRule	Objeto	Não	Regras de pré-download de subcontratação	WeChat Mini Program
trabalhadores	Corda	Não	Worker Diretório de código colocado	WeChat Mini Program

globalStyle

　　Usado para definir a barra de status do aplicativo, a barra de navegação, o título, a cor de fundo da janela etc.

　　Atenção

• • O link para a imagem titleImagedeve ser usado quando o applet Alipay é usado, httpse precisa ser depurado pela máquina real para ver o efeito.
  • globalStyleAs configurações nas configurações titleImagetambém serão substituídas- pages> styleo título do texto nas configurações
  • navigationBarTextStyle pode estar bagunçado no iOS13, esse problema será corrigido em uma versão futura
    
    
    

Páginas

uni-app O nó de páginas configura em quais páginas o aplicativo consiste. O nó de páginas recebe uma matriz. Cada item da matriz é um objeto e seus valores de propriedade são os seguintes:

Atributos	Tipo	Valor padrão	Descrição do produto
caminho	Corda		Caminho da página de configuração
estilo	Objeto		Configurar o desempenho da janela da página.Para itens de configuração, consulte o pageStyle abaixo

Dicas:

• O primeiro item do nó de páginas é a página de entrada do aplicativo (ou seja, página inicial)
• Páginas novas / reduzidas no aplicativo precisam modificar a matriz de páginas
• O nome do arquivo não precisa ter o sufixo, a estrutura encontrará automaticamente o recurso da página no caminho

 

abas

Se o aplicativo for um aplicativo com várias guias, você poderá usar o item de configuração tabBar para especificar o desempenho da barra de guias e a página correspondente exibida quando a guia for alternada.

Dicas

• Ao definir a posição para cima, o ícone não será exibido
• A lista na tabBar é uma matriz, e apenas um mínimo de 2 e um máximo de 5. Podem ser configuradas.As guias são classificadas na ordem da matriz.
• A opção da barra de guias pode não renderizar a tempo quando é carregada pela primeira vez.Você pode exibir um floco de neve em espera no ciclo de vida onLoad de cada página da barra de guias (o hello uni-app usa esse método)
• A página da barra de guias permanecerá na memória após ser exibida uma vez.A alternância da página da barra de guias novamente acionará o onShow de cada página e não o onLoad.
• Atualmente, a barra de guias na parte superior é suportada apenas no applet WeChat. Se você precisar usar a guia superior, é recomendável não usar a configuração superior da barra de guias, mas fazer você mesmo a guia superior.Você pode consultar o hello uni-app-> template-> guia superior.

 

Perguntas frequentes sobre a barra de guias

• O js api do Tabbar vê interface-interface-tabbar , que pode exibir exibição e ocultação dinâmicas (como a camada pop-up não pode cobrir a barra de guias), modificação de conteúdo (como internacionalização), item mais ângulo e outras funções. Também há exemplos no hello uni-app.
• Para eventos de clique no item da barra de guias , consulte onTabItemTap no ciclo de vida da página .
• O código salta para a página da barra de guias; a API só pode usar uni.switchTab , não uni.navigateTo, uni.redirectTo; ao usar o componente navigator para pular, você deve definir open-type = "switchTab"
• A barra de tabulação é simulada por uma div no final do H5 e faz parte da janela da tela do front-end.Se você quiser usar o método de posicionamento inferior, use variáveis ​​css --window-bottom, como um botão suspenso 10px acima da barra de tabulação.bottom: calc(var(--window-bottom) + 10px)
• A altura padrão da barra de guias é diferente em plataformas diferentes. Ana paula
• Exemplo de modelo da barra de tabulação com o sinal + no meio, para referência . Pode cruzar o final, mas o sinal + não é gerado.
• Se você precisar de uma barra de tabulação no meio, poderá personalizá-la.Existem exemplos no mercado de plug-ins, como o colorUI. No entanto, observe que o desempenho da barra de guias front-end não é tão bom quanto a barra de guias nativa. Se for um método de várias páginas, a barra de guias inferior exibirá a animação de transição ao alternar. Se for um método de página única, haverá problemas de desempenho com o conteúdo complexo da página. Existem muitos exemplos semelhantes da barra de abas de pesquisa de mercado de plug - ins .
• Se você usar o nvue no lado do aplicativo e personalizar a barra de guias, não haverá problema de experiência de desempenho.
• O projeto nvue puro (o renderizador no manifesto é nativo), atualmente usando a barra de guias em pages.json afeta o desempenho, é recomendável usar o front-end para implementar uma barra de guias de página única. Este bug será resolvido mais tarde.
• O problema da barra de guias é exibida no teclado pop-up do aplicativo Android. Após a atualização para o HBuilderX 2.2, não existe mais.
• Existe apenas uma barra de tabulação nativa na página inicial. Para as guias na página secundária, o front-end a implementará por si só.
• Se você precisar fazer login primeiro e depois entrar na página da guia, não precisará definir a página de destino como a página inicial; a página inicial ainda é a página da barra de guias. Consulte o modelo de login do HBuilderX ao criar um novo projeto uni-app
• A camada de máscara pop-up front-end não pode bloquear o problema da barra de guias e a barra de guias é ocultada dinamicamente durante o método de processamento de ponta a ponta. O lado do aplicativo pode usar plus.nativeObj.view ou subNVue para pop-up e máscara, consulte a parte inferior do exemplo do menu de compartilhamento de ícones nativo
• O WeChat Mini Program Simulator versão 1.02.1904090 possui um erro.Depois de ampliar a porcentagem da página do simulador, a barra de guias irá congelar após clicar várias vezes. A máquina real não é prejudicial, preste atenção ao usá-la. Ana paula

manifest.json O arquivo é o arquivo de configuração do aplicativo, usado para especificar o nome, o ícone e as permissões do aplicativo.

 

 

 package.json

　　Ao package.jsonadicionar uni-appnós de expansão ao arquivo , você pode implementar plataformas de compilação condicional personalizadas (como o applet Dingding, o número do serviço WeChat etc.).

O uso da configuração do Package.json estendeu (copie o código para remover os comentários!):

{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }

}

Dicas:

• UNI_PLATFORMEncha suporta apenas uni-appsuportado pela plataforma de referência padrão, actualmente limitado aos seguintes enumeração app-plusvalores: h5, mp-weixin, mp-alipay, mp-baidu, mp-toutiao,,mp-qq
• BROWSER Só UNI_PLATFORMé h5válido, actualmente limitado aos seguintes enumeração Chromevalores: Firefox, IE, Edge, Safari,,HBuilderX
• package.jsonNenhum comentário é permitido no arquivo, caso contrário, a configuração estendida é inválida.
• vue-cliPrecisa atualizar para a versão mais recente, o HBuilderX precisa ser atualizado para a versão Alpha 2.1.6+