小韦云博文

小程序转uni-app的填坑之旅

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

最近需要把已经开发好的微信小程序转为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/1865,否则追究其法律责任

关键词:uniapp 微信小程序转为uni-app miniprogram-to-uniapp

广告位招商