Muitos desenvolvedores de applets encontrarão esse problema. Eles desenvolveram códigos de applets correspondentes em diferentes ambientes, como WeChat e Alipay, mas a gramática dos applets em diferentes plataformas não é consistente.
Este artigo entenderá rapidamente os problemas relacionados "Como usar ferramentas de terceiros para converter códigos de applet entre si?" por meio de uma abordagem passo a passo.
Passo 1: Crie o Mini Programa Alipay
Como o nome sugere, neste artigo, usaremos o "Alipay Mini Program" como exemplo para explicar como converter o formato Mini Program.
Primeiro, você precisa iniciar a Ferramenta de Desenvolvimento do Mini Programa Alipay e selecionar "Mini Programa > Mini Programa Alipay > Modelo em Branco" e, em seguida, obteremos um mini programa no formato Alipay.
Após a criação do applet Alipay, podemos ver a organização do projeto mostrada na figura acima no gerenciador de recursos. Amigos que estão familiarizados com pequenos programas podem descobrir facilmente que, não importa qual seja o programa pequeno, a estrutura básica do projeto é relativamente semelhante. A propósito, vamos revisar a estrutura principal do projeto:
- lógica da página js
- estrutura de página axml
- folha de estilo da página de acesso
- configuração da página json
- applet de registro app.js, ciclo de vida do applet, variáveis globais do applet
- configurações globais do applet app.json: configuração de página, configuração de janela, configuração de tabBar, configuração de subpacote, etc.
- folha de estilo global do miniaplicativo app.acss
- mini.project.json Configuração de projeto de programa pequeno
Etapa dois: aprender sobre o Antmove
O Antmove originou-se de um projeto interno do Gaode Map (desde o quarto trimestre de 2021, o Gaode pertence à linha de negócios de vida local de Ali).
No início do estabelecimento da plataforma de miniprograma AutoNavi, muitos parceiros de negócios esperavam lançar seus aplicativos de miniprograma na plataforma de miniprograma AutoNavi (plataforma de miniprograma Alipay), mas eles já tinham seus próprios aplicativos de miniprograma WeChat e, em seguida, Desenvolvendo um conjunto de AutoNavi (ou Alipay) é um fardo de recursos para as empresas.
Com base nesse requisito, uma ferramenta de conversão do WeChat Mini Program para o AutoNavi Mini Program foi implementada internamente, e essa ferramenta ajuda esses usuários corporativos a iniciar rapidamente seus aplicativos no AutoNavi. Atualmente, centenas de pequenos programas concluíram a migração de formato e conversão de pequenos programas com a ajuda do Antmove.
Devido a algumas diferenças irreversíveis que sempre existem em diferentes plataformas de miniaplicativos e diferentes recursos de produtos que podem existir para plataformas específicas, o Antmove percebeu a capacidade da sintaxe cross-terminal e da compilação condicional para ajudar os desenvolvedores a reduzir o custo de manutenção de código diferente tanto quanto possível . No entanto, o Antmove não pode ajudar os usuários a obter 100% de migração de código. Você pode clicar aqui para ver o suporte de conversão do Antmove para os miniaplicativos WeChat e Alipay.
Etapa 3: compilar no código VS
Para usar o Antmove, optamos por instalar a extensão correspondente no VS Code desta vez para realizar a conversão com um clique e a compilação do código do applet.
Primeiro, você precisa procurar Antmove na extensão VS Code para baixar e instalar o plug-in de conversão Antmove vscode. Em seguida, abra o projeto de applet correspondente e insira o comando correspondente.
- A maneira de abrir o painel de comando no macOS é: Command + Shift + P
- A maneira de abrir o painel de comando no Windows é: Ctrl + Shift + P
Podemos executar o Antmove: Execute o comando antmove alipay-wx na janela de comando recém-aberta para converter o miniaplicativo Alipay no miniaplicativo WeChat.
Como o FinClip é altamente compatível com a sintaxe dos applets WeChat, isso significa que o código do applet convertido pode ser usado diretamente no ambiente FinClip.
Depois de executar o comando acima, uma janela pop-up será exibida, selecione o diretório de armazenamento do código convertido e, em seguida, a conversão do código será concluída. Podemos abrir o conteúdo do projeto correspondente através do FinClip IDE.
Apêndice: Você também pode tentar compilar usando a linha de comando
Claro, se você não quiser usar o VS Code, também pode desenvolvê-lo na forma de npm ou yarn. Na forma de npm ou yarn, ele pode não apenas ser facilmente depurado no ambiente de desenvolvimento, mas também pode ser empacotado e implantado no ambiente de produção com confiança, aproveitando os muitos benefícios trazidos por todo o ecossistema e cadeia de ferramentas.
instalação global
$ npm install antmove -g
ou
$ yarn global add antmove
instalação local
$ npm install antmove --save
ou
$ yarn add antmove
uso da linha de comando
npm i -g antmove
A linha de comando a seguir só pode ser usada por meio da instalação global npm ou yarn
antmove wx-alipay（使用前请将终端切换到需转换编译的微信小程序项目路径）
antmove wx-alipay -i ./ -o ./dist/alipay-app
antmove - 该命令更加灵活，可配置输出输出目录/编译模式等
antmove wx-alipay -i ./wechat-mini/project -o ./dist/alipay-mini/project --env development
如上的命令表示将 ./wechat-mini/project 微信小程序项目转换为支付宝小程序项目，转换到 ./dist/alipay-mini/project 目录 如果你不想输入参数，可以体验交互式的命令方式，执行 antmove 即可。
parâmetros de configuração
--input,-i
可选，编译源码目录，如果不传则是当前目录
--output,-o
必传，编译输出目录
--env,-e
可选（development/production），编译模式，生产模式代码会压缩，无编译日志及运行时日志
--watch,-w
可选（true/默认false），值为true时开启监听模式，实时监听输入路径文件变化
Se você encontrar alguma dificuldade no uso do Antmove ou tiver dúvidas no processo de uso do FinClip, também pode verificar a comunidade de ajuda do desenvolvedor do FinClip para obter mais informações.