Many applet developers will encounter such a problem. They have developed corresponding applet codes in different environments such as WeChat and Alipay, but the grammar of applets on different platforms is not consistent.
This article will quickly understand the related issues "How to use third-party tools to convert applet codes to each other?" through a step-by-step approach.
Step 1: Create Alipay Mini Program
As the name suggests, in this article, we will use the "Alipay Mini Program" as an example to explain how to convert the Mini Program format.
First, you need to start the Alipay Mini Program Development Tool, and select "Mini Program > Alipay Mini Program > Blank Template" in it, and then we will get a mini program in Alipay format.
After the Alipay applet is created, we can see the project organization shown in the figure above in the resource manager. Friends who are familiar with small programs can easily find that no matter which small program they are, the basic project structure is relatively similar. Let's review the main project structure by the way:
- js page logic
- axml page structure
- acss page style sheet
- json page configuration
- app.js register applet, applet life cycle, applet global variables
- app.json Applet global settings: page configuration, window configuration, tabBar configuration, subpackage configuration, etc.
- app.acss applet global style sheet
- mini.project.json Small program project configuration
Step Two: Learn about Antmove
Antmove originated from an internal project of Gaode Map (since Q4 2021, Gaode belongs to Ali's local life business line).
At the beginning of the establishment of the AutoNavi mini program platform, many business partners hoped to launch their mini program applications on the AutoNavi mini program platform (Alipay mini program platform), but they already had their own WeChat mini program applications, and then Developing a set of AutoNavi (or Alipay) is a resource burden for enterprises.
Based on this requirement, a conversion tool from WeChat Mini Program to AutoNavi Mini Program was implemented internally, and this tool helps these enterprise users to quickly launch their applications on AutoNavi. At present, hundreds of small programs have completed the format migration and conversion of small programs with the help of Antmove.
Due to some irreversible differences that always exist in different applet platforms, and different product capabilities that may exist for specific platforms, Antmove has realized the ability of cross-terminal syntax and conditional compilation to help developers reduce the cost of different code maintenance as much as possible . However, Antmove cannot help users achieve 100% code migration. You can click here to view Antmove's conversion support for WeChat and Alipay applets.
Step 3: Compile in VS Code
In order to use Antmove, we chose to install the corresponding extension in VS Code this time to realize one-click conversion and compilation of the applet code.
First, you need to search for Antmove in the VS Code extension to download and install the Antmove vscode conversion plugin. Then open the corresponding applet project and enter the corresponding command.
- The way to open the command panel in macOS is: Command + Shift + P
- The way to open the command panel in Windows is: Ctrl + Shift + P
We can run the Antmove: Run antmove alipay-wx command in the newly opened command window to convert the Alipay applet into the WeChat applet.
Because FinClip is highly compatible with the syntax of WeChat applets, it means that the converted applet code can be used directly in the FinClip environment.
After running the above command, a pop-up window will be given, select the converted code storage directory, and then the code conversion is completed. We can open the corresponding project content through FinClip IDE.
Appendix: You can also try to compile using the command line
Of course, if you don't want to use VS Code, you can also develop it in the form of npm or yarn. In the form of npm or yarn, it can not only be easily debugged in the development environment, but also can be packaged and deployed in the production environment with confidence, enjoying the many benefits brought by the entire ecosystem and tool chain.
Global installation
$ npm install antmove -g
or
$ yarn global add antmove
local installation
$ npm install antmove --save
or
$ yarn add antmove
command line use
npm i -g antmove
The following command line can only be used through npm or yarn global installation
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 即可。
configuration parameters
--input,-i
可选，编译源码目录，如果不传则是当前目录
--output,-o
必传，编译输出目录
--env,-e
可选（development/production），编译模式，生产模式代码会压缩，无编译日志及运行时日志
--watch,-w
可选（true/默认false），值为true时开启监听模式，实时监听输入路径文件变化
If you encounter any difficulties in using Antmove, or encounter doubts in the process of using FinClip, you can also check out the FinClip developer help community for more information.