背景

由于平台之间存在一些无法消除的差异，将一份代码完全转换并不容易。且开发者项目中也存在因平台功能差异而产生不同的产品需求的问题。由此Antmove支持条件编译来帮助您在转换后进行二次开发，可条件编译模版、配置、脚本和样式等文件。详情如下：

如何使用

在编写条件语句后，可以使用 antmove -t wx 命令得到干净的微信代码!

模版

在模版中使用 is-xxx 属性（目前支持is-wx、is-alipay、is-swan、is-tt、 is-quick）

<!--源代码-->
<text is-wx>这是微信小程序</text> //需要编译到微信小程序的代码
<text is-alipay>这是支付宝小程序</text> //需要编译到支付宝小程序的代码
<view class="question" bindtap="toQuestion">
   <text class="question-title">选择 Kindle 而不是纸质书的原因是什么？</text>
</view>

使用wx-alipay类型编译后

<!--使用Antmove转换后的支付宝小程序模版-->
<text>这是支付宝小程序  </text>  
<view class='question' onTap='antmoveAction' data-antmove-tap='toQuestion'>
   <text class='question-title'> 选择 Kindle 而不是纸质书的原因是什么？</text>
 </view>

脚本

使用if else条件语句，例如：wx.__target__ === 'alipay'，比较运算前的wx代表源代码的平台端（支持wx、alipay），比较运算后的 'alipay' 代表输出平台端（支持'alipay'、'wx'、'tt'、''swan、'quick'）

//源代码
let type = null;
if (wx.__target__ === 'alipay') {
    type = 'alipay';  //需要编译到支付宝小程序的代码
} else {
    type = 'wx';  //需要编译到微信小程序的代码
}

使用wx-alipay类型编译后

// 使用Antmove转换后的支付宝小程序js
let type = null;
type = 'alipay';

配置

使用 "_<输出平台前缀>Env" 作为键（_wxEnv、_alipayEnv、_swanEnv、_quickEnv、_ttEnv）

// 源代码
"_wxEnv":{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0068C4",
    "navigationBarTitleText": "知乎微信小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
  },
"_alipayEnv": {
  "window": {
    "navigationBarTitleText": "知乎支付宝小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
}

使用wx-alipay类型编译后

// 使用Antmove转换后的支付宝小程序json
"window": {
  "navigationBarTextStyle": "white",
  "defaultTitle": "知乎支付宝小程序",
  "pullRefresh": true
}

样式

在/xxxStart/和/xxxEnd/之间写下样式，xxx可替换为wx、alipay、swan、tt、quick

/*wxStart*/
.red {
  color: red;
}
/*wxEnd*/

/*alipayStart*/
.green {
  color: green;
}
/*alipayEnd*/

/*ttStart*/
.bule {
  color: bule;
}
/*ttEnd*/

使用wx-alipay类型编译后

.green {
    color: green;
}

具体操作

步骤1

首先需要你需要有一份可跨端编译的微信源码，然后使用Antmove编译到其他平台

/**
* 得到支付宝小程序代码
*/
antmove wx-alipay -i ./ -o ../minialiapp

步骤2

使用antmove wx得到微信端代码。这样做的目的是为了维护一份可跨端的微信源码编译到不同平台

/**
* 得到干净的微信代码
*/
antmove wx -i ./ -o ../miniwxapp