Como desenvolver Android ou ios com Vue3

O Vue3 tem uma ferramenta de desenvolvimento nativa fácil de usar?

1. uniapp Acho 个人que o uniapp é adequado para desenvolver pequenos programas e afins, e haverá alguns problemas no desenvolvimento de aplicativos nativos com isso

  • Limitação de desempenho : Como o Uniapp implementa plataforma cruzada por meio da camada intermediária, pode haver perda de desempenho quando o aplicativo acessa as funções subjacentes. Comparado com o desenvolvimento nativo, o Uniapp pode ter um desempenho ruim em cenários de aplicativos que lidam com dados em larga escala, animações complexas e requisitos de alto desempenho.

  • Restrições de plataforma : Diferentes plataformas têm suas próprias especificações e características de design, e o Uniapp pode estar sujeito a algumas restrições de plataforma quando multiplataforma. Algumas funções específicas da plataforma ou projetos de interface podem não ser totalmente realizados e precisam ser resolvidos usando o método de desenvolvimento nativo de uma plataforma específica.

  • Maturidade do ecossistema: Comparado com o desenvolvimento nativo, o ecossistema do Uniapp é relativamente novo, com suporte e recursos relativamente limitados. Ao encontrar um problema, pode ser difícil encontrar uma solução perfeita e os desenvolvedores podem precisar gastar mais tempo e energia para resolver o problema.

  • Diferenças na experiência do usuário: Devido às diferentes especificações de design e hábitos do usuário de diferentes plataformas, a experiência do usuário de aplicativos desenvolvidos com o Uniapp pode ser diferente em diferentes plataformas. Os desenvolvedores precisam realizar adaptações e ajustes específicos para cada plataforma para proporcionar uma melhor experiência ao usuário.

  • Limitação de suporte de função: Uniapp fornece componentes e APIs de plataforma cruzada tanto quanto possível, mas algumas funções e interfaces específicas da plataforma podem não ser totalmente suportadas. Nos casos em que são necessários recursos específicos da plataforma, pode ser necessário desenvolvimento nativo ou plug-ins personalizados.

  • documento uni https://uniapp.dcloud.net.cn/

2. react tem react native para desenvolver aplicativos nativos Vue无法使用https://www.reactnative.cn/

3. Cordova https://cordova.apache.org/ suporta html js css nativo empacotado em ios android exe dmg

4. ionic Descobri que este framework suporta Vue3 angular react ts para construir programas de desktop Android e iOS, o que não é exatamente o que eu quero https://ionicframework.com/docs

Pré-condições

1. Instale o ambiente Java e o SDK do editor Android

  • java JKD Download https://www.oracle.com/java/technologies/downloads/#java8-windows
  • Baixe o editor Android https://developer.android.google.cn/studio/
  • Ou mensagem privada para instalar o pacote

Após a conclusão da instalação, verifique as variáveis ​​de ambiente

imagem.png

imagem.png

imagem.png

Verifique o SDK do editor Android e instale-o se não estiver instalado

imagem.png

imagem.png

imagem.png

iônico

npm install -g @ionic/cli

Inicializar Vue3o projeto

Após a conclusão da instalação, haverá um comando iônico

ionic start [name] [template] [options]
#            名称      模板    类型为vue项目
ionic start app tabs --type vue

imagem.png

npm install #安装依赖
npm run dev 启动测试

imagem.png

Após a conclusão da inicialização, ele vem com uma demonstração de guias

imagem.png

executar para depurar o editor android

npm run build
ionic capacitor copy android

Preste atenção para verificar

imagem.png

Se não houver tal arquivo, exclua o diretório android e execute o seguinte comando novamente

ionic capacitor copy android

visualizar

ionic capacitor open android

Ele vai te ajudar a abrir o editor do Android

Se for relatado um erro informando que o sdk está ausente, verifique o diretório sdk

imagem.png.

esperando a compilação

imagem.png

Clique na seta verde acima para executar

imagem.png

atualização quente

Se você deseja atualizar o aplicativo de visualização, você precisa de um dispositivo Android

Continue clicando no número da sua versão para ativar o modo de desenvolvedor

bd36c9f72990ae5cf2275e7690c7f354.jpg

Ative a depuração usb para se conectar ao computador

8f1085f12207c5107d39dd8d193dadfb.jpg

ionic capacitor run android -l --external

Selecione o dispositivo Android agora mesmo

imagem.png

hot update bem sucedido

imagem.png

20c29c088e7f4f152fe1af0adbc4035f.jpg

Acho que você gosta

Origin blog.csdn.net/qq1195566313/article/details/131507483
Recomendado
Clasificación