Visualizar e depurar um MiniApp - SuperApp: Central de Documentação do Alibaba Cloud

Visualize e depure MiniApps usando o Visual Studio Code (VS Code) ou a extensão do VS Code para WindVane em um simulador Android ou iOS.

Use o VS Code se não precisar depurar APIs JavaScript do WindVane.
Use a extensão do VS Code para WindVane em um simulador Android ou iOS caso precise depurar APIs JavaScript do WindVane.

Visualizar um MiniApp no VS Code

Clique em Preview MiniApp no VS Code. Uma mensagem perguntará se o comando npm start foi executado. Selecione a opção correspondente ao estado atual do seu MiniApp.
Opção 1: Yes (The MiniApp can be previewed.)

O serviço do MiniApp já está em execução localmente. Visualize-o diretamente por meio de uma URL.
1. Selecione 「Yes (The MiniApp can be previewed.)」.
2. Uma caixa de entrada de texto aparecerá na parte superior do VS Code.
3. Insira a URL de visualização (por exemplo, http://localhost:3000).
4. O plug-in abrirá o navegador e exibirá a visualização.
Opção 2: No (The MiniApp must be started first.)

O MiniApp não está em execução. O plug-in o iniciará executando npm start.
1. Selecione 「No (The MiniApp must be started first.)」.
2. O plug-in WindVane MiniApp executa npm start no terminal.
3. Após o início do serviço, uma caixa de entrada de texto aparecerá na parte superior do VS Code.
4. Insira a URL exibida na saída de log do npm start.
5. O plug-in abrirá o navegador e carregará a página de visualização.

Nota

1. Comando de inicialização

Por padrão, a aplicação é iniciada com npm start.
Para usar um comando de inicialização diferente (por exemplo, npm run dev), acesse Settings, pesquise por SuperApp: Start Command e defina seu comando personalizado.

2. Servidor local

Ao iniciar o serviço, o Node.js cria um servidor local que torna o MiniApp acessível no navegador.

3. URL de visualização

A URL de visualização corresponde ao endereço do servidor local, em um destes formatos:
- http://localhost:<port>
- http://<local-IP>:<port>

4. Informações da porta (exemplo de scaffolding)

MiniApps inicializados com o scaffolding do plug-in usam a porta 3000 por padrão.
Visualize a aplicação em http://<local-IP>:3000 após a inicialização.
- Caso a porta 3000 já esteja em uso, o npm solicitará a mudança para outra porta (por exemplo, 3001). Se você confirmar, a URL de visualização mudará para http://<local-IP>:3001.

Insira a URL:

Visualização bem-sucedida:

Execute o comando Developer: Toggle Developer Tools para abrir o console de depuração e depurar o MiniApp no VS Code.

Visualizar e depurar MiniApps em um simulador

Importante

Após visualizar um MiniApp em um simulador pela primeira vez, a aplicação de depuração será instalada. Visualizações subsequentes não a reinstalarão. Caso encontre exceções de chamada JSAPI, o simulador pode estar executando uma versão desatualizada da aplicação de depuração. Desinstale manualmente a aplicação de depuração do simulador e visualize novamente para obter a versão mais recente.

Emulador Android

Clique em Preview MiniApp in Android Emulator para iniciar o emulador Android.
Após o início do emulador, uma caixa de texto aparecerá na parte superior do VS Code. Insira a URL de visualização do seu MiniApp.

Nota
O MiniApp deve estar em execução antes de ser visualizado em um emulador. Se você não tiver a URL, o MiniApp pode não ter sido iniciado. Para iniciá-lo, clique em Preview MiniApp e selecione No(The MiniApp must be started first.'npm start' or start command will be called). Como alternativa, execute npm start na CLI do seu dispositivo local.

A URL de visualização segue o formato http://localhost:<Port number> ou http://<IP address of your local device>:<Port number>. Por exemplo, se você inicializou o projeto usando o modelo de scaffolding do WindVane, a URL será http://<IP address of your local device>:3000.
Após inserir a URL, o emulador iniciará o scaffolding e carregará o MiniApp.

Abra o Chrome e acesse chrome://inspect/#devices. As informações do emulador e o objeto WebView aparecerão após o início do scaffolding.
Clique em inspect abaixo das informações do emulador no DevTools para depurar o MiniApp no objeto WebView.

Simulador iOS

No Safari, escolha Safari > Preferences > Advanced e selecione Show Develop menu in menu bar para ativar as ferramentas de desenvolvedor do Safari.
Clique em Preview MiniApp in iOS Emulator para iniciar o simulador iOS. Se houver vários simuladores disponíveis no seu dispositivo local, selecione um na lista suspensa. É necessário especificar um simulador para que a extensão do VS Code para WindVane possa iniciá-lo.
Após o início do simulador, uma caixa de texto aparecerá na parte superior do VS Code. Insira a URL de visualização do seu MiniApp.

Nota
O MiniApp deve estar em execução antes de ser visualizado em um simulador. Se você não tiver a URL, o MiniApp pode não ter sido iniciado. Para iniciá-lo, clique em Preview MiniApp e selecione No(The MiniApp must be started first.'npm start' or start command will be called). Como alternativa, execute npm start na CLI do seu dispositivo local.

A URL de visualização segue o formato http://localhost:<Port number> ou http://<IP address of your local device>:<Port number>. Por exemplo, se você inicializou o projeto usando o modelo de scaffolding do WindVane, a URL será http://<IP address of your local device>:3000.
No Safari, escolha Develop > Simulator. Todos os objetos WebView inspecionáveis serão listados.
Clique no objeto WebView que deseja inspecionar e depure o MiniApp no Web Inspector.