@qihoo/wx2qh
Advanced tools
wx2qh 是用来将微信小程序迁移到 360 小程序的转化工具，它基于 AST，然后按照一定的规则静态分析来抹平平台之间的语法差异，简化迁移微信小程序到 360 小程序流程。
切记：
转换完成后，需要切换到转化后生成目录（dest 指定目录）安装 @qihoo/seapp-builder来构建转化后的代码
切记：转换完成后，需要切换到转化后生成目录（dest 指定目录）安装 @qihoo/seapp-builder来构建转化后的代码
建议全局安装。
npm i -g @qihoo/wx2qh
项目内安装：
npm i @qihoo/wx2qh
命令行参数如下：
wx2qh \<source\> \<output\> transform the files in source directory to dest
wx2qh version output version number
wx2qh help output usage infomation
options:
-f,--file set files pattern \<glob\>
-i,--ignore set ignore files pattern \<glob\>
-p,--preset set preset config \<string\>
-r,--ratio set rpx2px ratio \<number\>
参数说明：
source 待迁移微信小程序项目路径(必填)output 迁移后，360 小程序的生成目录(默认值为 . 即当前目录)-f,--file 指定要转化的文件(glob: dir/*.wxml)-i, --ignore 忽略要转化的文件-p, --preset 指定预设配置文件路径,详情见使用 preset-r, --ratio 指定 rpx2px 的转化比例(默认：2， 2rpx => 1px)编译整个 wxApp 目录下的文件并输出到 360mp 目录，这个时候会对 已存在的 360mp 目录做二次确认，防止因为路径填写错误 覆盖原有文件，360mp 目录不存在则没有二次确认。
wx2qh ./wxApp ./360mp
? The output directory `/work/360mp` is existed, Pick an action: (Use arrow keys)
\> Overwrite // 删除 360mp 目录，然后写入
Merge // 直接写入
Cancel // 取消
可以通过设置 file(f) 选项编译符合这个规则的文件，值是 glob 类型。
wx2qh ./wxApp ./360mp -f=*.wxml
可以通过设置 ignore(i) 选项忽略符合这个规则的文件，值是 glob 类型。
wx2qh ./wxApp ./360mp -i=*.test.js
可以通过设置 preset(p) 选项设置预设值，从而可以拓展和修改 wx2qh 的一些内置配置、插件等。preset 的路径支持情况如下：
wx2qh ./wxApp ./360mp -p ./wx2qh-plugin-preset
let app = null
Page({
beforeCreate() {
app = getApp()
}
})
{
"sdkversion": "1.0.0"
}
objectprocessor 执行器mapprocessor 的 Parser 和 Compiler 存储容器stringobjectsetarraystring | object) processor 名称
object 需要满足 { name, matcher }string | regexp | function) 过滤 files 中的 vfile
string 强制转换成正则function 自定义过滤规则，参数是 vfileprocessor 定义文本处理流程，详情请见processor
module.exports = function(api) {
// 1. (name: string, matcher: string): Processor {}
const processor = api.processor('demo', '*.wxml')
// 2. (name: string, matcher: RegExp): Processor {}
const processor = api.processor('demo', /\*.wxml/)
// 3. (name: string, matcher: function): Processor {}
const processor = api.processor('demo', file => file.path === 'index.wxml')
// 4. (name: object): processor {}
const processor = api.processor({ name: 'demo', matcher: '*.wxml' })
return processor
}
function) 持有 filesMap 上下文的回调函数,该 callback 会在输出文件之前串行调用module.exports = function(api) {
api.nextTick(callback)
function callback(filesmap) {
// some handling process...
}
}
string) 日志类型
string|object) 日志内容
object { file, row, column, message }, 会在 canSave=true 打印位置等其他信息boolean, optional) [default: false] 是否存入 logStoremodule.exports = function demoProcessor(api) {
// 1. (type: string, log: string): void {}
api.logger('error', 'I am a error log')
api.logger('warn', 'I am a warning log')
// 2. (type: string, log: object, canSave: boolean): void {}
api.logger(
'info',
{
file: 'app.json',
message: 'has sdkversion prop',
row: 10,
colum: 4
},
true
)
}
关于 processor，下面只列出一些常用接口，更详细文档请参考 unifiedjs
使用 use 方法为 processor 配置插件,并可以可选的传入配置项
Attacher)*, optional) 插件的配置选项object) { settings: {}, plugins: [] }，都是可选属性array) [plugin, preset, [plugin, options]]processor 返回当前调用 use 的调用者，可链式调用
module.exports = function demoProcessor() {
const processor = api.processor('demo', 'index.wxml')
processor
// plugin with options:
.use(plugin, {})
// Plugins:
.use([plugin, pluginB])
// Two plugins, the second with options:
.use([plugin, [pluginB, {}]])
// Preset with plugins and settings:
.use({
settings: [(position: false)],
plugins: [plugin, [pluginB, {}]]
})
// Settings only:
.use({ settings: { position: false } })
function plugin() {}
function pluginB() {}
return processor
}
processor 插件仅仅是一种概念，而 attacher 是 processor 插件的实现，它可以访问和修改 processor 的属性和方法，尤其是可以为 processor 添加必要的 Parser 和 Compiler 从而实现 text 到 ast 的反序列化，ast 到 text 的序列化。
demoProcessor.js:
module.exports = function demoProcessor(api) {
const processor = api.processor('demo', 'demo.wxml')
// 获取内置的 compilation ，可以用来处理 xml 类型文件
const wxmlCompilation = api.compilation.get('wxml2vue')
processor
// 自定义
// .use([parser, compiler])
// 内置
.use(wxmlCompilation)
.use(demoAttacher)
return processor
}
function demoAttacher(options) {
return span2div
function span2div(tree) {
// process tree...
const spanElement = tree.children[0]
const spanText = spanElement.children[0]
spanElement.tagName = 'div'
spanText.value = `I am a div`
}
}
// 自定义 Parser ，也可以使用第三方 Parser 以及 内置的
function parser(settings) {
this.Parser = parser
function parser(doc) {
return {
type: 'default',
contents: String(doc),
toString() {
return this.contents
}
}
}
}
// 自定义 Compiler ，也可以使用第三方 Parser 以及 内置的
function compiler() {
this.Compiler = compiler
function compiler(tree) {
return tree.toString()
}
}
demo.wxml:
<span>I am a span</span>
cmd:
wx2qh ./demo.wxml ./360mp -p ./demoProcessor.js
output 360mp/index.wxml:
<div>I am a div</div>
上下文对象（this）指向 processor
*, optional) 配置选项transformer 可选
node) 经过 Parser 转换后的语法树vfile) 正在被 processor 处理的 filefunction, optional)void，当前处理的 node 将继续流入下一个 transform。Error， processor 将停止工作。node，返回的 node 将流入下一个 transformerPromise，将会等到 Promise 达到最终状态，然后将返回值流入下一个 transformer 或者中断 processorError, optional)node, optional)vfile, optional)preset 配置如下：
// 是否需要合并内置 options
root: true, // boolean
// === wx2qh cli options ===
file: '**',
ignore: [],
preset: undefined,
ratio: 2,
// ====
// === prettier config ===
// 是否开启 使用 prettier 格式化代码
prettier: true,
// prettier 配置
prettierrc: {
// 默认 parser
parser: 'babel',
// 根据条件选择合适的 parser
parserEntries: [
[/\.js$/, 'babel'],
[/\.wxss$/, 'scss'],
[/\.wxml$/, 'html'],
[/\.json$/, 'json']
],
printWidth: 80,
trailingComma: 'none',
tabWidth: 2,
semi: false,
singleQuote: true,
useTabs: false,
bracketSpacing: true,
insertPragma: false,
arrowParens: 'avoid',
htmlWhitespaceSensitivity: 'ignore'
},
// ===
// 插件列表 processor
plugins: [
require('wxml2vue'),
require('wxjs2vue'),
require('wxss2css'),
require('wx2qh-plugin-preset')
]
我们将以下几个方面来阐述 wx2qh 的迁移能力，您能够了解到它做了什么
wxml 语法转换为 vue 语法
将微信小程序标签上的属性绑定语法变为 360 小程序绑定语法，如：
| 微信小程序 | 360 小程序 |
|---|---|
| id="item" | id="item" |
| id=" {{item}} " | :id="item" |
将微信小程序组件转换为 360 小程序组件。如果 360 小程序组件没有该组件，则不转换且给出提示。
目前支持组件转换的列表如下：
| 微信小程序 | 360 小程序 |
|---|---|
| movable-view | se-movable-view |
| movable-area | se-movable-area |
| scroll-view | se-scroll-view |
| swiper | se-swiper |
| swiper-item | se-swiper-item |
| view | se-view |
| icon | se-icon |
| progress | se-progress |
| rich-text | se-rich-text |
| text | se-text |
| button | se-button |
| checkbox | se-checkbox |
| checkbox-group | se-checkbox-group |
| form | se-form |
| input | se-input |
| radio | se-radio |
| radio-group | se-radio-group |
| slider | se-slider |
| switch | se-switch |
| audio | se-audio |
| image | se-image |
| video | se-video |
| ad | se-ad |
| block | template |
将微信小程序的指令转换为 360 小程序指令：
| 微信小程序 | 360 小程序 |
|---|---|
| wx:for="{{array}}" wx:for-item="xxx" wx:for-index="yyy" | v-for="(xxx, yyy) in array" |
| wx:if | v-if |
| wx:elif | v-else-if |
| wx:else | v-else |
将微信小程序的 template 转换成 360 小程序中的 component，目前仅支持 template 的内容转换。微信小程序源码中，通过<import src="a.wxml"/> 和 <include src="header.wxml"/> 这两种方式引用的地方需要将转换后的内容手动添加过来。
转换前：
<template name="A">
<div wx:for="{{ array }}" wx:for-item="it" wx:for-index="$index">{{it}}{{$index}}</div>
<template name="B">
<div class="x-{{ ccc }}">{{ bbb }} {{ array.length }}</div>
</template>
<template is="C" data="{{ ...xxx, x: xxx[eee + 'c'] ? ccc : 22 }}"></template>
</template>
转换后：
<template name="A" scope="{ array, ccc, eee, xxx }">
<div v-for="(it, $index) in array">{{it}}{{$index}}</div>
<template name="B" scope="{ array, bbb, ccc }">
<div :class="\`x-\${ccc}\`">{{ bbb }} {{ array.length }}</div>
</template>
<component is="C" v-bind="{ ...xxx, x: xxx[eee + 'c'] ? ccc : 22 }"></component>
</template>
转换前：
<template is="{{staffName}}" data="{{...staffA}}"></template>
转换后：
<component :is="staffName" v-bind="{ ...staffA }"></component>
遍历所有 css 属性，将 wx 小程序的 rpx 转化为 px。
由于我们底层是基于 Vue 的，文档从 Vue 的角度说明迁移后的能力支持
接口支持情况如下，其他的 选项(option) 请参考能力支持表格：
App({
func1: function() {},
data1: 111
})
let app = null
Page({
beforeCreate() {
app = getApp()
}
})
注意格式问题
- 代表待定，目前不支持，未来可能支持N 代表遗弃，现在和未来都不支持Y 代表已支持，（框架支持）| 微信小程序 | 描述 | Seapp | Version |
|---|---|---|---|
App: onLaunch | lifecycle-监听小程序初始化 | beforeCreate created beforeMount mounted | |
App: onShow | lifecycle-监听小程序启动或切前台 | - | |
App: onHide | lifecycle-监听小程序切后台 | - | |
App: onError | 错误监听函数 | - | |
App: onPageNotFound | 页面不存在监听函数 | - | |
Page: data | 页面的初始数据 | data | |
Page: onLoad | lifecycle-监听页面加载 | mounted | |
Page: onShow | lifecycle-监听页面显示 | onShow | |
Page: onReady | lifecycle-监听页面初次渲染完成 | onReady | |
Page: onHide | lifecycle-监听页面隐藏 | onHide | |
Page: onUnload | lifecycle-监听页面卸载 | beforeDestroy destroy | |
Page: onPullDownRefresh | 监听用户下拉动作 | - | |
Page: onReachBottom | 页面上拉触底事件的处理函数 | - | |
Page: onShareAppMessage | 用户点击右上角转发 | - | |
Page: onPageScroll | 页面滚动触发事件的处理函数 | - | |
Page: onResize | 页面尺寸改变时触发 | - | |
Page: onTabItemTap | 当前是 tab 页时，点击 tab 时触发 | - | |
Component: properties | 组件的对外属性 | props | |
Component: data | 组件的内部数据 | data | |
Component: observers | 组件数据字段监听器 | watch | 2.6.1 |
Component: methods | 组件的方法 | methods | |
Component: behaviors | 类似于 mixins 和 traits | mixins | |
Component: created | lifecycle-在组建实例创建时执行，不能调用 setData | beforeCreate created | |
Component: attached | lifecycle-在组件实例进入页面节点树时执行 | beforeMount | |
Component: ready | lifecycle-在组件布局完成后执行 | mounted | |
Component: moved | lifecycle-在组件实例被移动到节点树另一个位置时执行 | - | |
Component: detached | lifecycle-在组件实例被从页面节点树移除时执行 | destroy | |
Component: relations | 组件间关系定义 | - | |
Component: externalClasses | 组件接受的外部样式类 | Y | |
Component: options | 一些选项（文档中介绍相关特性时会涉及具体的选项设置） | - | |
Component: lifetimes | 组件生命周期生命对象 （权重 > normal） | Y | 2.2.3 |
Component: pageLifetimes | 组件所在页面的生命周期声明对象 | - | 2.2.3 |
Component: definitionFilter | 定义段过滤器，用于自定义组件扩展 | - | 2.2.3 |
All: 其他 | 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问 | Y |
由于 360 小程序 api 与微信小程序 api 无论是方法名，参数形式基本保持一致，所以 360 小程序实现了的 api 迁移后都支持
FAQs
360小程序迁移工具
The npm package @qihoo/wx2qh receives a total of 0 weekly downloads. As such, @qihoo/wx2qh popularity was classified as not popular.
We found that @qihoo/wx2qh demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.