目录
第一步：安装miniprogram-to-uniapp 插件
第四步：使用hbuilder X运行转换后的项目并在微信小程序编辑器查看
前言
背景：由于历史原因，公司有个历史项目使用vue开发的公众号H5，原生开发的微信小程序。两端功能的完全一样，但是需要维护两个项目，最近客户提了需求需要修改部分功能，博主接到需求后，觉得维护两套代码不仅是重复开发，测试起来也麻烦，因为之前是两个人开发不同端的缘故，导致大部分的bug都是因为两端不一致产生的。为了节省时间和维护成本，提升开发测试效率，在反复对比调研，最终选择了uniapp技术框架融合两端进行重构。博主目前正在使用uniapp开发H5和小程序，这篇文章是和大家分享并记录一下原生小程序在迁移到uniapp的步骤和时遇到的问题。
一、迁移步骤
第一步：安装miniprogram-to-uniapp 插件
在命令行里，运行【 npm install miniprogram-to-uniapp -g 】进行安装，因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。
如果运行npm报错，请先安装Node.js，下载地址：https://nodejs.org/zh-cn/
npm install miniprogram-to-uniapp -g第二步：查看是否安装成功
继续在命令行里，运行【 wtu -V 】，执行结果如下
显示版本号，说明已经安装成功了
第三步：使用插件进行转换
在命令行里，输入【wtu -i "你的小程序项目路径"】
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
如：【wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"】 ，回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即转换成功。
转换前
转换后
转换后的项目文件对比（左边是小程序项目，右边是uni-app项目目录）：
第四步：使用hbuilder X运行转换后的项目并在微信小程序编辑器查看
将转换后的xxx_uni项目导入到hbuilder X，
点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具！（如果是使用了vant的项目，请运行到H5，vant项目转换后仅支持H5和app）
然后查看转换后的项目运行到小程序，是否可以正常运行无报错！
第五步：调试修改
二、处理迁移问题
根据下方迁移内容，逐一更新页面方法，修复页面报错信息，页面显示、功能运行正常即迁移完成。
js部分
1，删除 const app = getApp();
2，以 wx. 开头的方法更新为 uni. 开头
3，数据绑定 this.setData({ a : 1 }) 更新为 this.a = 1
4，路由跳转 wx.navigateto() 更新为uni.navigateto()
5，onLoad（options）
templete
以下几条不影响使用，改不改都行
-
<block>标签可能是小程序<block>标签或templete模版转换生成的，有的页面转完后可能有多层<block>嵌套的情况，不影响使用，但是不代码太美观，修改的话<block> 标签替换为 <templete> 标签，样式估计也需要调整
-
页面事件 例如 <view @tap="clickBtn" data-id="id">点击</view>,页面转换完使用没问题，但是和平常开发vue不一样，更新的话可以改为<view @click="clickBtn(id)">， 在修改对应方法即可
-
引入wxs的页面 <script module="utils" lang="wxs" src="./utils.wxs"></script> 大部分方法可改为 computed、watch，
css部分
三、扩展
习惯vue写法来处理router路由的同学，还可以集成一个uni-simple-router插件来管理路由。
1、使用vue-cli 创建一个新的项目,使用uni-simple-router管理路由。
2、 打开该项目，新建页面，copy转换后的项目的代码
3、运行项目即可
总结
这篇文章记录了博主用使用uniapp集成H5和小程序两端的一些思路和解决方案。虽然很曲折，但还是很开心，故记录一下。希望这个记录能帮到看到这篇文章的小伙伴。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
