最近需要把已经开发好的微信小程序转为uni-app,以支持更多客户端(如h5,app等)。
使用的转换工具是由uni-app提供的miniprogram-to-uniapp
,工具使用说明教程:
https://ask.dcloud.net.cn/article/36037
安装工具部分参考上面的教程,下面主要记录我的转换过程。
我的小程序目录是:E:\htdocs\xiaowei\weiapp
先在HBuilder开发工具里打开终端,查看wtu是否运行正常
wtu -V
正常情况下会输出版本号,但我这里报权限问题
wtu : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\wtu.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ wtu -i "E:\htdocs\xiaowei\weiapp"
+ ~~~
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
只能使用管理员权限启动一个新shell界面,我这里使用以管理员身份启动一个gitbase界面,再试上面的命令就可以正常了
切换到xiaowei目录下,然后执行转换命令
wtu -i "./weiapp"
成功后会输出以下日志
转换完成:
耗时:6508ms
当前转换模式:【Hbuilder X】,生成HbuilderX项目。
优点:上手快,项目结构较简单;
缺点:资源路径会因为表达式而无法全部被修复(“可能”需手动修复)
这里就可以看到在E:\htdocs\xiaowei
目录下生成了weiapp_uni
目录。
由于xiaowei目录是PHP的网站目录,经常会全站搜索更新一些文件,为防止uniapp目录下的js代码被替换,需要换个目录,我把weiapp_uni
目录复制到E:\nodejs
目录下。
然后把weiapp_uni
导入到HBuilder开发工具里,点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具
编译后报这个错误:getPlatformCompiler is not a function,应该是HBuilder版本太旧的原因,升级HBuilder到最新版本就正常了。
接着报图片找不到:
ModuleNotFoundError: Module not found: Error: Can't resolve '../static/activity/adron.png' in 'E:\nodejs\weiapp_uni'
图片都在根目录的static目录里,因此全站把../static
替换成/static
即可
18:28:15.346 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
18:28:15.356 语法错误: Unexpected token (1:1575)
18:28:15.357 at pages\my_event\my_event.vue:1
18:28:15.365 ERROR Build failed with errors.
这里因为在小程序使用了一个wxs插件,但wtu并没有为我引进来了,如在报错的页面里这样使用插件
<text v-if="item.prize_money">主播奖励:{{defaultVal.money(item.prize_money)}}元</text>
需要在页面里先引入defaultVal这个插件
<script module="defaultVal" lang="wxs" src="../../wxs/defaultUtil.wxs"></script>
修改完就可以正常启动小程序。
本文由小韦云原创,转载请注明出处:https://www.bctos.cn/doc/12,否则追究其法律责任
关键词:uniapp 微信小程序转为uni-app miniprogram-to-uniapp