The AntMove-small program converter recommended in this issue is based on the conversion of Alipay/wechat small programs to multi-terminal small programs, making the cross-platform development of small programs easy.

Background

Due to some irremediable differences between platforms, it is not easy to convert a piece of code completely. There is also the problem of different product requirements due to differences in platform functions in developer projects. Antmove therefore supports conditional compilation to help you do secondary development after conversion, conditionally compiling files such as templates, configurations, scripts, and styles.

Quick use

< Template

Use the is-xxx attribute in the template (currently supports is-wx, is-alipay, is-swan, is-tt, is-quick)

< ! -- Source code --> 
< text is-wx>  This is wechat mini program < /text>  // Code that needs to be compiled into the wechat mini program
< text is-alipay>  This is Alipay mini program < /text>  // Code that needs to be compiled into the Alipay applet
< view class="question"  bindtap="toQuestion"> 
   <text class="question-title">What are the reasons for choosing Kindle over paper books? < /text> 
< /view> 

Compiled with wx-alipay type

< ! -- Using Antmove converted Alipay mini program template --> 
< text>  This is Alipay mini program < /text> 
< view class='question'  onTap='antmoveAction' data-antmove-tap='toQuestion'> 
   <text class='question-title'> What are the reasons for choosing Kindle over paper books? < /text> 
< /view> 

< Script

Use an if else conditional statement, such as: Wx. __target__ === ‘alipay’, wx before the comparison operation represents the platform side of the source code (support wx, alipay), The ‘alipay’ after comparison represents the output platform (support ‘alipay’, ‘wx’, ‘tt’, ‘swan ‘, ‘quick’)

// Source code 
let type = null;
if (wx.__target__ === 'alipay') {
    type = 'alipay';  // Code that needs to be compiled into Alipay mini program 
} else {
    type = 'wx';  // Code that needs to be compiled into wechat mini program 
}

Compiled with wx-alipay type

// Using Antmove to convert Alipay mini-program js
let type = null;
type = 'alipay'; 

< Configuration

Use “_< Output platform prefix > Env” as the key (_wxEnv, _alipayEnv, _swanEnv, _quickEnv, _ttEnv)

// Source code 
"_wxEnv":{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0068C4",
    "navigationBarTitleText": "Zhihu wechat mini program ",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
  },
"_alipayEnv": {
  "window": {
    "navigationBarTitleText": "Zhihu Alipay mini program ",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
}

Compiled with wx-alipay type

// json
"window": {
  "navigationBarTextStyle": "white",
  "defaultTitle": "Zhihu Alipay mini program ",
  "pullRefresh": true
}

Specific operations

Step 1

First, you need to have a wechat source code that can be compiled across the end, and then use Antmove to compile to other platforms

/**
* Get Alipay mini program code
*/
antmove wx-alipay -i ./ -o .. /minialiapp

Step 2

Use antmove wx to get the wechat code. The purpose of doing so is to maintain a cross-end wechat source code compilation to different platforms

/**
* Get clean wechat code
*/
antmove wx -i ./ -o .. /miniwxapp

Feature

• Easy to use, one-click conversion
• Complete with detailed compile-time logging/run-time logging tools
• The compiled code is readable and can be reprogrammed
• Secondary compilation support
• Component conversion support

Installation

VsCode extension installation

Search for Antmove in the vscode extension. Download and install the Antmove vscode conversion plug-in to implement one-click conversion.

We recommend using npm or yarn for development, not only for easy debugging in the development environment, but also for safe packaging and deployment in the production environment to enjoy the benefits of 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

If your network environment is not good, cnpm is recommended.