新增二维码访问页面
sheng du authored
1a62a765
Name Last commit Last update
.hbuilderx add
api 新增二维码访问页面
components add
config 新增二维码访问页面
font add
pages 新增二维码访问页面
static add
uni_modules add
unpackage/dist 新增二维码访问页面
utils add
.gitignore 新增二维码访问页面
App.vue add
README.md add
index.html add
main.js 打包及依赖和修改
manifest.json 打包及依赖和修改
package.json add
pages.json 新增二维码访问页面
project.config.json add
project.private.config.json add
sitemap.json add
transform.log add
uni.scss add

miniprogram-to-uniapp 转换说明

0x00 转换模式

根据转换模式,转换后的项目使用相应的工具打开,目前有两种模式:

HBuilder X 模式

转换后的目录(以_uni结尾的目录), 需使用HBuilder X导入,进行运行和调试。 如果项目使用了npm模块,需先使用npm install等命令进行安装,然后再运行

Vue-cli 模式

转换后的目录(以_vue-cli结尾的目录), 需使用命令行安装依赖、运行和打包。 详见文档:https://uniapp.dcloud.io/quickstart-cli.html#%E8%BF%90%E8%A1%8C%E3%80%81%E5%8F%91%E5%B8%83uni-app

注: 上述两种项目类型,可以相互转换。 uni-app HBuilderX 工程与 vue-cli 工程相互转换

0x01 调试建议

如果您想转换小程序为uni-app项目,并发布为App, 建议运行到H5平台,因为H5平台速度快,而且与App平台贴合度更高。 只有当强依赖硬件时,才使用真机调试,这样可以节约时间!

0x02 常见问题

1.命令行提示:“'wtu'不是内部或外部命令, 也不是可运行的程序”

一般是node未安装在默认目录导致的,参照文章 解决“npm不是内部或外部命令“ 解决。

2.PowerShell里提示:无法加载文件 XXXXXXXXX.ps1,因为在此系统上禁止运行脚本。

以管理员身份运行powershell,执行

set-executionpolicy remotesigned

输入 y 即可 或者,在PowerShell输入 cmd 后回车也行

3.setData为什么没有转换?需要我手动改吗?那我有100多个页面怎么改呀?

setData函数已内置,在main.js通过mixin全局混入,所以不用转换,可直接使用setData函数!!!

4.命令行报错:"cannot read property ‘某某某’ of undefined"

报错解释:有代码“xx.某某某”,但xx的值是undefined,因此,需要进报错的页面,调试调试,为啥xx为undefined,相应的调试代码即可。 常见原因:可能接口跨域,可能真的没值,也可能没声明变量,也可能是工具转换问题等。

5.为什么我运行到H5或app时,拿不到小程序用户的信息?为什么登录失败?

转换后的uni-app项目,如需运行到其他小程序、H5和App时,登录和支付功能均需“重新对接”,需要增加 “新” 接口!

6.跨域问题:为什么我的接口都没有返回数据呀?

控制台有“CORS”、“Access-Control-Allow-Origin”等关键字时,不要犹豫,果断判断是因为跨域,导致访问接口失败。 跨域,前端老生常谈,有N种解决办法,最简单的办法是运行到“内置浏览器”。 PS: 仅仅 H5 平台存在跨域问题!发布后上传到服务器无此问题!

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)

8.小程序转换为uni-app项目后,还能转换成其他小程序项目吗?

当然可以,必须可以! 小程序转换为uni-app项目后,就是uni-app项目了,uni-app项目能做啥就能做啥, 能再次生成为各种小程序、发布H5和App。

9.uni-app生成的小程序项目,还能再转换回uni-app项目吗?

不能。不支持这种项目的转换!

其他