微信小程序转uniapp迁移步骤及遇到的问题

背景

公司有一个历史项目，是使用原生小程序开发的。最近客户提了需求，想要H5端也可以访问，为了节省时间和成本，所以最终决定迁移到uniapp，一套代码可以多端生成，这篇文章主要记录迁移的步骤和遇到的问题。

迁移步骤

第一步：安装miniprogram-to-uniapp插件

把微信小程序转成uni-app，推荐一款【miniprogram-to-uniapp】小程序转换工具插件

前提是先安装好nodejs

再执行命令

npm install miniprogram-to-uniapp -g

因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。

第二步：查看是否安装成功

在执行命令

wtu -V

显示版本号，说明安装成功。

第三步：转换

在命令行输入wtu -i “你的小程序项目路径”

不知道路径的，可以先通过命令行进入项目

执行命令

pwd

就能获取项目路径

执行命令

wtu -i /Users/yzw/asto-projects/atg-wx-app

第四步：使用HBuilder X运行转换后的项目

将转换后的项目导入到HBuilder X

点击菜单 运行->运行到小程序模拟器->微信开发者工具

查看运行之后的小程序，是否正常显示

第五步：调试修改

运行项目，如果有报错信息，解决报错的问题

可能会遇到的问题

1、删除 const app = getApp();

2、以 wx. 开头的方法更新为 uni. 开头

3、数据绑定 this.setData({ a : 1 }) 更新为 this.a = 1

4、路由跳转 wx.navigateTo() 更新为uni.navigateTo()

5、属性绑定从

attr=”“，改为 :attr=”a”

title=”复选框“ 改为 :title=”‘复选框’ + item”

6、事件绑定从 bind:click=”toggleActionSheet1” 改为 @click=”toggleActionSheet1”

7、阻止事件冒泡 从 catch:tap=”xx” 改为 @tap.native.stop=”xx”

8、wx:if 改为 v-if

9、wx:for=”“ wx:key=”“ 改为`v-for=”(item,index) in list”