【亲测免费】 miniprogram-to-uniapp 项目使用教程

1、项目介绍

miniprogram-to-uniapp 是一个开源工具，旨在帮助开发者将各种小程序（如微信、QQ、头条/抖音、支付宝/钉钉和百度等）转换为 uni-app 项目。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

该工具支持通过 Npm 安装和 HbuilderX 插件两种方式进行安装，并且提供了多种配置选项，如是否合并 wxss 文件到 vue 文件、是否转换为 vue-cli 项目等。

2、项目快速启动

安装

通过 Npm 安装

npm install miniprogram-to-uniapp -g

通过 HbuilderX 插件安装

请参考项目：【HBuilder X 插件】进行安装。

使用方法

默认转换

wtu -i "/miniprogram-project"

将 wxss 合并入 vue 文件

wtu -i "/miniprogram-project" -m

转换项目为 vue-cli 项目

wtu -i "/miniprogram-project" -c

将 template 里面的 import/template 和 include 标签转换为单独组件

wtu -i "/miniprogram-project" -t

运行转换后的项目

转换完成后，会在小程序项目的同级目录生成一个以 小程序项目名 + "_uni" 或 小程序目录名 + "_uni-cli" 命名的目录，即转换好的 uni-app 项目。请使用 HBuilderX 导入并运行。

3、应用案例和最佳实践

应用案例

假设你有一个微信小程序项目，路径为 /path/to/wechat-miniprogram，你可以使用以下命令将其转换为 uni-app 项目：

wtu -i "/path/to/wechat-miniprogram"

转换完成后，你可以在 HBuilderX 中导入生成的 wechat-miniprogram_uni 目录，并进行进一步的开发和调试。

最佳实践

1. 合并 wxss 文件：如果你希望将 wxss 文件合并到 vue 文件中，可以使用 -m 选项。
2. 转换为 vue-cli 项目：如果你希望生成的项目可以直接使用 vue-cli 进行开发，可以使用 -c 选项。
3. 转换 template 和 include 标签：如果你希望将 template 和 include 标签转换为单独的组件，可以使用 -t 选项。

4、典型生态项目

GoGoCode

miniprogram-to-uniapp 工具主要转换逻辑依赖于 GoGoCode，这是一个用于代码转换的工具库。

mp-html

工具使用 mp-html 替换 wxParse，以提供更好的 HTML 解析支持。

HBuilderX

uni-app 项目的开发和调试通常使用 HBuilderX 进行，HBuilderX 提供了丰富的插件和工具，帮助开发者更高效地进行开发。

通过以上步骤，你可以轻松地将各种小程序转换为 uni-app 项目，并利用 uni-app 的多平台支持特性，快速发布到多个平台。