@qihoo/wx2qh v1.0.6

wx2qh

Introduction

wx2qh 工具只做静态分析，主要是经过差异化对比微信小程序和360小程序的语法规则来转换代码，能够解决语法的差异，而运行时差异需要通过二次开发修复

Quik Start

Install

  npm install -g @q/wx2qh

Usage

  wx2qh <source> <destination>

转换完成后，需要安装 @qihoo/seapp-builder来构建转化后的代码

问题

• 转换 getApp() 在所有调用 getApp 的地方改写成如下：

let app = null
Page({
  beforeCreate() {
    app = getApp()
  }
})

• app.json 中添加 sdkversion 字段

{
  "sdkversion": "1.0.0"
}

能力

我们将以下几个方面来阐述 wx2qh 的迁移能力，您能够了解到它做了什么

• 视图
• 样式
• 框架
• 接口

视图

wxml 语法转换为 vue 语法

转化关系对应

一、attrs

将微信小程序标签上的属性绑定语法变为 360 小程序绑定语法，如：

二、components

将微信小程序组件转换为 360 小程序组件。如果 360 小程序组件没有该组件，则不转换且给出提示。

目前支持组件转换的列表如下：

三、directives

将微信小程序的指令转换为 360 小程序指令：

四、template

将微信小程序的 template 转换成 360 小程序中的 component，目前仅支持 template 的内容转换。微信小程序源码中，通过<import src="a.wxml"/> 和 <include src="header.wxml"/> 这两种方式引用的地方需要将转换后的内容手动添加过来。

template 模版内容转换

转换前：

<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 引用转换

转换前：

<template is="{{staffName}}" data="{{...staffA}}"></template>

转换后：

<component :is="staffName" v-bind="{ ...staffA }"></component>

样式

基础组件标签转换

1. wx 小程序里有，但 360 小程序里没有的基础组件标签：不用转换，直接将该节点转化为注释节点。
2. wx 小程序里有，但 360 小程序里没有且与 html 原生标签同名的基础组件：不做处理，直接使用原生标签。
3. wx 小程序里有，且 360 小程序里也有的基础组件标签：统一转换为 class 选择器形式，.is_基础组件标签名。

单位转换

遍历所有 css 属性，将 wx 小程序的 rpx 转化为 px。

框架

由于我们底层是基于 Vue 的，文档从 Vue 的角度说明迁移后的能力支持

接口支持情况如下，其他的 选项(option) 请参考能力支持表格：

• App
  • 支持 data 和 methods 直接定义在 选项(options) 根级别上

App({
  func1: function() {},
  data1: 111
})

• getApp
  • 由于框架实现差异，getApp 只能在 beforeCreate 或之后的 vue 生命周期中获取

let app = null
Page({
  beforeCreate() {
    app = getApp()
  }
})

• Page
  • 支持 this.setData
• getCurrentPages
  • 暂不支持(需要开发者二次开发改写)
• Component
  • 选项(options)支持情况见下表格
• Behavior
  • 暂不支持(需要开发者二次开发改写)

能力支持

注意格式问题

• - 代表待定，目前不支持，未来可能支持
• N 代表遗弃，现在和未来都不支持
• Y 代表已支持，（框架支持）

接口

由于 360 小程序 api 与微信小程序 api 无论是方法名，参数形式基本保持一致，所以 360 小程序实现了的 api 迁移后都支持

360 小程序 api 文档