1. 把微信小程序转换成uniapp项目
1.1 安装miniprogram-to-uniapp 插件
打开cmd,运行【 npm install miniprogram-to-uniapp -g 】进行安装,因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装。
npm install miniprogram-to-uniapp -g
如果运行npm报错,请先安装Node.js,下载地址:Node.js
1.2 查看是否安装成功
wtu -V
1.3 其他方式及文档
1. GitHub开源地址:GitHub - zhangdaren/miniprogram-to-uniapp: 轻松将各种小程序转换为uni-app项目
2. uni-app官网:uni-app官网
3. DCLOUD提供的插件市场配合HBuilderX使用:miniprogram-to-uniapp v2 - DCloud 插件市场
4. miniprogram-to-uniapp插件使用介绍:miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目) - DCloud问答
2. 使用插件进行转换(转换完成会在同目录下生成:文件名_uni 的文件夹)
2.1 注意事项
每次转换时都会将输出目录清空,可能导致代码丢失,请注意代码备份/保存!!!!!!!
因为这种转换非100%,所以转换之后需要手动更改部分代码!!!
2.2 开始转换
打开cmd,输入【wtu -i "你的小程序项目路径"】
wtu -i "你的小程序项目路径"
2.3 转换可能需要更改的地方
1. js部分
1.删除 const app = getApp();2.以 wx. 开头的方法更新为 uni. 开头3.数据绑定 this.setData({ a : 1 }) 更新为 this.a = 14.路由跳转 wx.navigateTo() 更新为uni.navigateTo()5.onLoad(options)通过options或this.$Route.query获取页面传递参数6、部分页面生命周期释义,详见页面生命周期onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新onReachBottom:页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据onShareAppMessage:用户点击右上角分享onPageScroll:监听页面滚动
2. 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,=
3. css部分
css转换可能失败,大部分是单位转换失败,原px乘2,改为rpx即可盒子模型的问题(小程序默认content-box,uniapp默认样式border-box),修改box-sizing即可