Como Vue3 desenvolve terminal móvel (Android, ios)

O Vue3 possui uma ferramenta fácil de usar para desenvolver terminais móveis?

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 uniapp.dcloud.net.cn/

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

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

4. ionic Descobri que esta estrutura suporta Vue3 angular react ts para construir programas de desktop Android iOS, que não é o que eu quero ionicframework.com/docs

5. Parece que weex vue2 desenvolve aplicativos nativos sem manutenção. O último horário de manutenção é 2019 weexapp.com/zh/guide/in…

6. Flutter Eu também gosto de docs.flutter.dev/get-started…

Pré-condições

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

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 juejin.im/post/7251113487317106745
Recomendado
Clasificación