微信小程序原生语言转uni-app

位置:首页 / 技术中心 / 杂项

杂项 Admin 2026-01-15 10:05:35 87

用的是HBuilder X的插件miniprogram-to-uniapp

转换日志

transform.log

统计信息:

Component数量: 38
Page数量: 317
支付api数量: 1
登录api数量: 3
chooseMedia数量: 36
getLocation数量: 65
getRelationNodes数量: 65
<ad/>数量: 0
<map/>数量: 9
<video/>数量: 24
Vant组件: van-icon、van-popup、van-loading、van-picker、van-datetime-picker、van-radio-group、van-radio、van-cell-group、van-field、
van-image、van-checkbox、van-count-down、van-button、van-search、van-overlay、
van-checkbox-group、van-uploader、van-tabs、van-tab、van-empty、van-toast、van-dialog、van-circle、van-transition、van-dropdown-menu、
van-dropdown-item、van-calendar、van-action-sheet、van-notice-bar、van-cell、
van-divider、van-tag、van-steps、van-card、van-cascader、van-sidebar、van-sidebar-item, 数量:37

项目转换完成!
用时: 399.23s
工具版本:v2.2.6
在该小程序项目的同级目录可以看到_uni结尾的项目,即是转换好的uniapp项目,相关日志在该目录里。

!!! 当前项目引用了npm模块,请转换完后,在命令行里运行“npm install”命令安装npm模块 !!!

可以看到这个项目还是挺大的,而且光vant组件就有37个,一开始是vant路径报错,我按照README.md的提示操作依旧报错

README.md

### 7.Vant项目怎么转换呀?

Vant项目比较常见的报错是:代码`<button class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }}
{{ item.className || '' }}"></button>`转到后,运行会报错,因为uni-app不支持在class里面写函数)

由于Vant的一些语法uni-app并不支持,因此需要特殊处理一下,这里分享三种方案,可以根据自己的情况进行选择。

#### 方案一:【替换Vant组件】
转换前,将vant组件全部用别的组件库替换掉再转换。

#### 方案二:【替换Vant组件】
转换后,将vant组件使用uview1.x替换掉同功能组件。

#### 方案三:【不替换Vant组件】
转换后,按uniapp引入小程序组件文档重新引入vant组件(小程序自定义组件支持:
https://uniapp.dcloud.io/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
我是用全局搜索将@vant/weapp/全部替换为@/wxcomponents/vant/解决了路径报错问题


之后根据console哪里报错就报它注释掉

发现这个方案不行。然后我打算将原始的微信小程序项目页面只保留登录和首页,看看情况

二分删除法也试一试

https://l4rz4zwpx7.k.topthink.com/@kmrvzg72lx/erfenshanchufa.html

发现一个bug一直卡在 开始转换 

解决办法是将要转换的目录修改名称

报错 TypeError: Cannot read property '$vm' of undefined

报错的主要原因是代码中某个字段是undefined 所以需要通过打断点,找到这个变量在哪里



然后发现这个地图变量是空的

解决方法是注释掉或者在onready里引入即可

最后也算是基本转换完成




18455111359 扫描二维码