小程序转快应用工具

Jun 12, 2020

目的

随着快应用的生态逐渐繁荣,越来越多的用户决定加入快应用的大生态中,对于已经有微信小程序的用户来说,由于快应用的语法与微信小程序的语法还是有一定的不同,我们决定为了减少用户从小程序转到快应用平台的成本,推出了一套新工具: 小程序转快应用工具,这套工具可以大幅降低拥有小程序的开发者进入快应用生态的成本。

文章导航

  • How :如果你只关注如何转换
  • Getting Deeper:如果你想知道转换工具将您的代码转换成什么样子

How

如果你已经拥有了小程序的项目,你需要完成一下几步

方法一: 使用npm转换工具

  1. 安装qa-adapter(快应用语法转换器,将小程序的语法转换为快应用识别的语法):npm install qa-adapter -g。
  2. 安装成功之后 用命令 adt [sourceDir] [destDir?optional] 来转换项目。

方法二: 使用IDE转换工具

  1. 下载快应用开发工具
  2. 搜索hap-transformer插件并安装。

hap-transformer

  1. 安装完成之后运行插件,mac电脑上(Cmd + Shift + P),windows电脑上(Ctrl + Shift + P)打开命令台并搜索"transfer wechat miniprogram into quick app",或者在IDE3.1版本之后,侧边栏上增加了快捷功能入口也可以运行插件的功能。

  2. 选择相应的小程序输入目录和相应的输出路径,并选择兼容模式,点击完成即可。

-------

通过以上两种方法你将得到转换后的快应用项目,之后我们就可以在IDE中预览项目结果了

接下来我们要在开发工具中的插件市场中搜索并下载hap-chimera-toolkit,安装该插件之后的开发工具就可以预览兼容模式的快应用了,点击上面的模拟器按钮即会弹出右侧的模拟窗口。

hap-chimera-toolkit

  1. 在真机上安装快应用调试引擎之后,点击预览界面上面的二维码标志,用手机调试器的扫码便可以在真机上安装快应用啦~,微信小程序就这样轻松的转换成为了快应用,🐂🍺!

Getting deeper

让我们来看下转换插件做了什么,下面这个是微信的项目

weixin

之后是转换后的快应用

quickapp-1

项目结构的变化

从项目结构上来看几乎没有什么变化,但是文件稍有变化。

  1. 例如微信的配置文件是project.config.json 变成了快应用中的quickapp.config.json,比较project.config.json和quickapp.config.json两者的内容没有变化,因为兼容版配置对其微信小程序。
  2. wxss文件变成了css文件,只是文件后缀改变。
  3. wxml文件变成了qxml,只是文件后缀改变。
  4. 同时项目目录下多了一个 .quickapp 的文件夹,打开该目录可以看到两个目录build和dist,dist下为自动生成的rpk,直接推入手机就可以运行。build下是编译后的生成文件。
  5. 其中还有生成的jsconfig.json文件是开发工具的配置文件。

接口的变化

打开页面的js文件,发现接口从wx.navigateTo 变成了 qa.navigateTo

打开页面的template文件如下图, 发现模版指令从wx:xxx 变成了 qa:xxx

qxmldiff

以上的两个点就是项目转换之后主要的变化啦。

总结

快应用兼容版能够大幅度减少微信小程序的拥有者接入快应用生态的成本,简单的转换之后就能够运行在快应用平台上。

兼容版快应用和微信小程序的具体差异可以查看官网的 与小程序的差异

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.