qa-transformer
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

小程序转快应用说明

tested with jest code style: prettier


虽然我们做了我们很多工作,你仍然需要需要快应用的语法进行熟悉,文档地址:https://doc.quickapp.cn/framework/

使用方法

npm install -g qa-transformer // 全局安装转换器
qa [wechat_app_dir] [output_dir] // 使用qa命令转换

转换情况概览

转换完成后,您可以搜索项目中的todo和logs.txt来查看需要您手动进行修改的位置


Template

Form

由于平台差异,快应用并不支持Form,小程序的Form绑定的事件可能需要您绑定到类似button的UI元素里面

router

转换完成后,template的router部门进行了polyfill处理,但对一些edge case可能无法覆盖到,需要您手动干预转换成快应用支持的语法,由于两个平台的差异,可能仍有部分router api无法支持,需要您进行改写

更多差异请参考doc/template部分


JS

我们对小程序的wx开头的api,做了polyfill,并将前缀改成了qa,你可以在src/polyfill/script看到所有的代码,后续,你可能需要将这些api转换到快应用原生的写法 我们在polyfill相关api的方法上加上了注释,可以帮您快速找到快应用对应的 api 位置。 很多快应用不支持的api,我们也会在您调用的时候在控制台进行说明,你可以使用debugger看到不支持的api调用

同步函数说明

在快应用中暂时没有同步API,所以如果你使用了微信小程序的同步API,我们给微信的同步API写了符合快应用语法规则的垫片(polyfill)方法,但是仍需要你手动在调用的位置把调用方法修改成快应用中能够支持的async/await形式。使用的方法你可以在这里看到

登录和支付相关接口说明

由于微信和快应用的登录和支付方式存在很大的不同,所以如果你的小程序使用了这些相关的接口,在转换之后需要你手动配置相关的接口才能使用,而小程序中的接口我们用垫片做了处理,使其不会影响到页面的加载和一些业务逻辑,具体的配置方法你可以在这里看到


CSS

由于小程序支持的CSS规则较之快应用更多,所以如果使用了快应用不支持的CSS规则(以后会逐步支持的😁),我们会把它注释掉,同时也会在注释的地方说明是哪种规则类型不支持,需要你手动修改。 这些CSS转换的信息你也可以在转换后的项目中的logs.txt中找到。 同时为了兼容一些样式,我们也增加了一个polyfill.css以支持快应用中的一些组件的正常显示,你可以在项目中的src/polyfill/stylesheet文件夹中找到它。

布局方式说明

目前快应用仅支持flex布局,所以如果你的小程序使用了大量position和float布局方式,在转换后的代码样式可能存在巨大偏差,建议先改为flex布局后再进行转换。如果你不熟悉flex布局,你可以在这里学习到相关的布局知识。


友情提示

转换后的代码由于两个平台的差异较大,可能不会顺利跑起来,需要你手动修改一些特定位置的代码。不要被转换后的报错吓到😁。另外,如果你使用了其他框架或工具(例如mpvue)生成的小程序,目前对这些小程序的转换是存在较大差异的,修改起来会很费力。

交流

你在使用中遇到了任何问题都可以在这里与我们交流。

Welcome to QuickApp, happy coding.

Readme

Keywords

none

Package Sidebar

Install

npm i qa-transformer

Weekly Downloads

7

Version

1.1.0

License

none

Unpacked Size

152 kB

Total Files

189

Last publish

Collaborators

  • dadong