# wx-compiler
# 介绍
wx-compiler - 是 Antmove 2.0 微信转支付宝重构版本，目前可基于微信小程序转换为支付宝小程序。
# 使用
# 命令行使用
npm i -g antmove
通过 npm 或 yarn 全局安装才能使用如下命令行
antmove wx2my（使用前请将终端切换到需转换编译的微信小程序项目路径）
antmove wx2my -i ./ -o ./dist/alipay-app
如上的命令表示将
./微信小程序项目转换为支付宝小程序项目，转换到./dist/alipay-app目录
# Node.js 使用方式
# 示例
const path = require('path');
const wx2my = require('@amove/wx-alipay');
let outputPath = path.join(__dirname, '../../dist/my-demo');
let inputDirPath = path.join(__dirname, '../../examples/wx-demo');
const opts = {
dist: outputPath,
entry: inputDirPath,
component2: true,
scope: true,
};
wx2my(opts);
# 转换器定制化
如果你想扩展 wx-compiler 的功能，可以集成自定义插件，wx-compiler 就是通过官方维护的各个子插件集合而成。
# 示例
const path = require('path');
const wx2my = require('@amove/wx-alipay');
const { useReducer } = require('@amove/next');
let outputPath = path.join(__dirname, '../../dist/my-demo');
let inputDirPath = path.join(__dirname, '../../examples/wx-demo');
// 自定义插件
// 分包自定义处理
useReducer({
AppSubpackages (node) {
// node.body.json 即分包配置设置
console.log(node.body.json);
}
});
const opts = {
dist: outputPath,
entry: inputDirPath,
component2: true,
scope: true,
plugins: [
{
AppSubpackages (node) {
// 另外一种引入插件的方式
// node.body.json 即分包配置设置
console.log(node.body.json);
}
}
]
};
wx2my(opts);
# 编译原子类型
# AppJson
- 全局配置文件编译处理
# 使用示例
useReducer({
AppJson (node, store) {
let json = this.$node.content;
// you can process app.json here
if (json.window) {
json.windowInfo = json.window;
delete json.window;
}
}
});
# 编译结果示例
- 编译前
{
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
- 编译后
{
"windowInfo": {
"navigationBarTextStyle": "black",
"backgroundColor": "#F8F8F8",
"defaultTitle": "演示",
"titleBarColor": "#F8F8F8"
}
}
# AppJsonMounted
- 全局配置文件编译处理完成钩子
# AppJsonTabbar
- 全局配置之 tabbar 处理
# 使用示例
useReducer({
AppJsonTabbar (node, store) {
if (node.body.tabbar) {
node.body.tabbar.list = [];
}
}
})
# 编译结果示例
- 编译前
{
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
},
{
"pagePath": "page/weui/example/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "扩展组件"
},
{
"pagePath": "page/API/index",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
},
{
"pagePath": "page/cloud/index",
"iconPath": "image/icon_cloud.png",
"selectedIconPath": "image/icon_cloud_HL.png",
"text": "云开发"
}
]
}
}
- 编译后
{
"tabBar": {
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"textColor": "#7A7E83"
}
}
# AppSubpackages
- 分包处理
# 使用示例
useReducer({
AppSubpackages (node, store) {
if (node.body.json) {
// process subpackages
}
}
});
# 编译结果示例
- 编译前
{
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
- 编译后
{
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/page1",
"pages/page2"
]
},
{
"root": "packageB",
"pages": [
"pages/page3",
"pages/page4"
]
}
]
}
# AppPlugins
- 插件处理
# 使用示例
useReducer({
AppPlugins (node, store) {
if (node.body.json) {
// process plugins
}
}
});
# ComponentJson
- 组件配置文件编译处理
# 使用示例
useReducer({
ComponentJson (node, store) {
if (node.body.json) {
// process component json
}
}
});
# 编译结果示例
- 编译前
{
"component": true,
"usingComponents": {
"mpCell": "../cell/cell",
"mpCheckboxGroup": "../checkbox-group/checkbox-group"
}
}
- 编译后
{
"component": true,
"usingComponents": {
"mp-cell": "../cell/cell",
"mp-checkbox-group": "../checkbox-group/checkbox-group"
}
}
# ComponentJsonMounted
- 组件配置文件编译处理完成钩子
# PageJson
- 页面配置文件编译处理
# 使用示例
useReducer({
PageJson (node, store) {
if (node.body.json) {
node.body.json.usingComponents = {};
}
}
});
# 编译结果示例
- 编译前
{
"usingComponents": {
"mp-cells": "../../components/cells/cells",
"mp-cell": "../../components/cell/cell",
"mp-badge": "../../components/badge/badge"
}
}
- 编译后
{
"usingComponents": {}
}
# PageJsonMounted
- 组件配置文件编译处理完成钩子
# UsingComponent
- 自定义组件引用处理
# 使用示例
useReducer({
UsingComponent (node, store) {
if (node.body.json) {
// 组件名驼峰转中横杠格式
}
}
});
# 编译结果示例
- 编译前
{
"usingComponents": {
"mpIcon": "../../components/icon/icon"
}
}
- 编译后
{
"usingComponents": {
"mp-icon": "./../../components/icon/icon"
}
}
# AppWxss
- 全局样式文件编译处理
# 使用示例
useReducer({
AppWxss (node, body) {
// process
}
});
# 编译结果示例
- 编译前
checkbox, radio{
margin-right: 10rpx;
}
- 编译后
@import '/__antmove/static/app.acss';
checkbox, radio{
margin-right: 10rpx;
}
# AppJs
app.js 文件编译处理
参数
- {Object} [body] //节点信息
# 使用示例
appJs(node, store){
// process appJs
}
# 编译结果示例
- 编译前
App({
onLaunch(opts) {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: config.envId,
traceUser: true,
})
}
}
})
- 编译后
const _App = require("./__antmove/component/componentClass.js")("App");
const _my = require("./__antmove/api/index.js")(my);
_App({
onLaunch(opts) {
if (!_my.cloud) {
console.error("请使用 2.2.3 或以上的基础库以使用云能力");
} else {
_my.cloud.init({
env: config.envId,
traceUser: true
});
}
}
})
# PageWxss
- 页面样式文件编译处理
# 使用示例
useReducer({
PageWxss () {
// Process PageWxss
}
});
# 编译结果示例
- 编译前
@import '../common.wxss';
page {
color: #333;
}
- 编译后
@import '../common.acss';
.page-container-classname {
color: #333;
}
# PageJs
- 页面 js 文件编译处理
# 使用示例
PageJs (node,store) {
// Process pagejs
}
# 编译结果示例
- 编译前
Page({
open: function(){
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
});
}
})
- 编译后
const _Page = require("../../../../__antmove/component/componentClass.js")("Page");
const _my = require("../../../../__antmove/api/index.js")(my);
_Page({
open: function () {
_my.showActionSheet({
itemList: ["A", "B", "C"],
success: function (res) {
if (!res.cancel) {
console.log(res.tapIndex);
}
}
});
}
})
# ProcessXmlAst
- 处理模版节点树
# 使用示例
useReducer({
ProcessXmlAst (node, store) {
// Parse xml ast
let {
ast, //分析的节点树
num, //用于调用子原子时加到key值上
projectPath, //页面小程序根路径，pages/xx/xx
deep, //节点深度
isInit, //页面是不是首次调用该原子
refRender //创建自定义组件节点
} = node.body;
}
})
# ProcessDirective
- 处理属性中指令
# 使用示例
useReducer({
ProcessDirective (node) {
// You can process directive here
let {
props, //节点属性
prop //节点属性名
} = node.body;
}
})
# ProcessEvents
- 处理属性中事件
# 使用示例
useReducer({
ProcessEvents (node) {
// You can process event here
let {
props, //节点属性
prop //节点属性名
} = node.body;
}
});
# ComponentBehavior
- 对有behavior的js文件的编译处理
# 使用示例
useReducer({
ComponentBehavior (node) {
// You can process behavior here
}
})
# WxsImportExpression
- 对wxs文件模块导入的编译处理
# 使用示例
WxsImportExpression(node, store) {
// Process wxs module
}
# XmlTagElement
- 分析模版标签
# 使用示例
useReducer({
XmlTagElement (node,store ) {
// You can process xmlTag here
let {
tagAst, //分析的节点
num, //用于调用子原子时加到key值上
projectPath, //页面小程序根路径，pages/xx/xx
deep, //节点深度
refRender //创建自定义组件节点
} = node.body;
}
})
# XmlElementProps
- 处理节点属性
# 使用示例
XmlElementProps (node, store) {
// you can preocess nodeprops here
let {
tagAst, //分析的节点
num, //用于调用子原子时加到key值上
projectPath //页面小程序根路径
} = node.body;
let {props, type} = tagAst;
}
# XmlElementChildren
- 处理节点子节点
# 使用示例
useReducer({
XmlElementChildren (node, store) {
// You can process children node here
let {
ast, //分析的节点
num, //用于调用子原子时加到key值上
projectPath, //页面小程序根路径，pages/xx/xx
deep, //节点深度
refRender //创建自定义组件节点
} = node.body;
}
})
# XmlElmentProp
- 处理通用属性
# 使用示例
useReducer({
XmlElmentProp (node, store) {
// You can process xml props here
let {
propKey, //属性键
props, //属性信息对象
index, //用于调用子原子时加到key值上
type, //标签名
length //标签的属性个数
} = node.body;
let prop = propKey;
})
# XmlTagElementMounted
- 处理标签原子结束
# PackageJson
- 编译处理package.json文件
- 参数
- {String}[dist]
# 使用示例
PackageJson(node, store) {
// process pacakge json
}
# outputFile
- 输出代码
- 参数
- {Object} [body]
- {String} [dist] //输出地址
- {String} [content] //输出内容
- {Object} [body]
# 使用示例
useReducer({
outputFile (node) {
// output file
}
})