用uniapp重写小程序问题汇总

主要问题

bug: 通过ref调用组件方法时，发现使用的是上一次的数据。

原因：微信小程序可以在修改组件的properties的传值之后、立即调用组件方法；

uniapp在修改组件prop的传值之后，需要在this.$nextTick中调用组件方法。

但是在百度小程序里，即使有this.$nextTick依然没有解决这个问题，于是又追加了一个setTimeout。

Error: [TMA][WARN][RUNTIME] Page route 错误 +0ms switchTab before pages are registered.

解决：用最新的基础库。

bug: 通过value属性给input传值没有生效。

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。

解决：组件属性设置不生效解决办法

差异：getSetting返回

百度小程序即使没授权过，通过getSetting获取的authSetting中的scope.userInfo也为true。

支付宝小程序获取的authSetting中的用户信息授权状态对应的key不是scope.userInfo，而是userInfo。

• 微信、qq

bug：（微信、qq）swiper显示异常。

原因：swiper-item组件上不可以绑定内联样式（:style）。

问题：（微信、qq）自定义tabbar图片闪烁。

解决：用base64代替图片。

Error: （qq） 文件common/vendor.js超过500k，不进行ES5转换或压缩，请自行转换压缩。

原因1: 未压缩。

解决：在package.json的dev:mp-qq的配置末尾添加“–minimize”。

原因2：uniapp生成的qq小程序的vender.js文件中的sourceMappingURL过大。

解决：vue.config.js中配置：当process.env.UNI_PLATFORM === 'mp-qq'
时productionSourceMap = false。

bug：（qq【安卓】）canvas的@touchmove事件无法触发。

原因：不明。可能问题即原因。
另外，字节跳动小程序不支持canvas。

• 头条

bug: （头条）通过$ref获取一个组件的实例，并将这个实例赋值给一个变量后，这个变量所保存的实例的prop不会随着组件传值的改变而改变。

解决：不通过被赋值了this.$refs.xxxComponent的变量调用组件的方法，而是每次都用this.$refs.xxxComponent.xxxMethod()的方式调用组件的方法。

问题：（头条）只有抖音可以调起广告，今日头条不能调起广告，但是今日头条的createRewardedVideoAd不为空，此api的存在与否不能用来判断广告能否使用。

解决：用tt.getSystemInfoSync().appName.toUpperCase() === 'DOUYIN'来判断。

bug：（头条）样式混乱。

（1）在字节跳动的style中发现：

:host{
	display:block;
	white-space: normal;
}

的代码。

因为影响的范围不大，单独在两处设置了一下white-space的值即解决。

（2）头条的样式在对连续几个嵌套的元素使用height: 100%时会出问题。

bug: （头条、支付宝）button的getuserinfo事件失效。

只有微信、QQ、百度的button有getuserinfo事件。

头条调用getUserInfo弹起授权弹窗，如果点击取消后即拒绝授权，以后再也不能弹出（微信是从来不会弹窗）。这时候，只能靠openSetting来引导用户打开权限后，再调用getUserInfo获取用户信息。

虽然百度的button有getuserinfo事件，但百度的getUserInfo接口不能调用。可以把button的getuserinfo事件获取到的数据存起来，以模拟一个getUserInfo接口。

支付宝获取用户信息现已升级为“获取会员基础信息”，点击查看文档。其中button属性中的onGetAuthorize在uniapp中书写为@getAuthorize，即可成功编译。

• 百度

bug：（百度真机）运行上传功能失败。

原因：JSON.parse()使用时参数传入了object类型而不是string类型的数据，导致了报错。

因为返回的data为object类型，去掉JSON.parse()后，代码运行正常；不久后这里又开始报错，发现返回的数据又变为string类型。于是补充逻辑：判断返回数据为string类型时，再JSON.parse()一下。

因为JSON.parse()传入参数类型不为string的错误有多处，鉴于平台差异，最好在使用时都判断一下类型。

bug: （百度）图片预览失败，黑屏。

原因：百度小程序不支持将getImageInfo获取到的本地路径作为previewImage的图片列表参数。

解决：使用previewImage时，用网络图。

bug: （百度、支付宝）图片保存错误。

原因：百度的getImageInfo返回的数据中没有errMsg字段。

由于之前判断图片保存成功的方式是res.errMsg === 'getImageInfo:ok’，导致了错误。

解决：百度、支付宝小程序用其它字段（path）判断图片保存状态。

bug：（百度）数组的长度在页面上更新异常。

当用xxxList.length作为插值时，

对xxxList做长度减少的操作，页面更新正常；

对xxxList做长度增加的操作，页面不更新。

解决：额外定义一个变量来代替xxxList.length作为插值。

特殊：（百度、支付宝）当scroll-view元素内滚动区域的长度不大于scroll-view本身在此方向的长度时，不会触发scrolltolower事件。当没有对一个纵向的scroll-view设置高度，它的高度完全被它所包含的元素撑开所决定时，会导致不能正常触发scrolltolower。

• 支付宝

问题：（支付宝）通过v-show隐藏组件失败。

选中元素可以看到v-show已经编译成了支付宝支持的hidden=true，其它小程序也出现过v-show失效的情况，所以不推荐在uniapp中使用v-show。

解决：改为v-if。

问题：（支付宝）样式错乱。

解决：用uniapp时，不同组件中的同名样式类名在支付宝会互相干扰，需要在style标签中加上scoped、修改类名。

支付宝小程序还需要一些样式重置：

/* #ifdef MP-ALIPAY */
button{
  border: none;
}
input{
  background: transparent;
}
/* #endif */

特殊：（支付宝）文件名或文件夹名中不允许出现 @ 符号。

问题：（支付宝）开发工具【清缓存】中的【清除数据缓存】表面清除了缓存，实际上没有清除；调试器里Storage面板左上角圆形的Clear All按钮才能真的清除缓存。

bug：（支付宝）canvas绘制失败。

解决：添加id。canvas 组件的标识是 id，而不是 canvas-id。

bug：（支付宝）上传图片卡在上传中。

原因：uni.uploadFile在且仅在支付宝小程序上有个一必填字段fileType。

bug：（支付宝）某个接口在开发工具上请求异常。

原因：对比其它小程序，发现支付宝小程序请求参数中有汉字，而其它小程序会自动将汉字进行编码。用encodeURIComponent手动编码之后解决。

问题：（支付宝）在手机上，某个通过js计算设置宽度的列表宽度异常大。

原因：其它平台通过uni.getSystemInfoSync()获取到的screenWidth、screenHeight的值均为css像素，但在手机上的支付宝小程序获取到的值为物理像素。

解决：在支付宝平台上，当获取到的screenWidth>500时，取screenWidth/pixelRatio的值使用。

bug：（支付宝）选择图片获取数据有误。

原因：支付宝用chooseImage()获取到的数据中没有tempFiles字段，只有tempFilePaths字段。

Error：（支付宝）有的图片保存失败，在getImageInfo处报”下载文件失败”的错误。

解决：
原有保存逻辑：uni.getImageInfo-> uni.saveImageToPhotosAlbum。

支付宝作区分：uni.saveImageToPhotosAlbum。

因为saveImageToPhotosAlbum接口不支持网络图片路径，所以原有的保存逻辑中，需要先用getImageInfo来获取一个本地路径再保存。而uni.saveImageToPhotosAlbum编译成支付宝小程序代码后是my.saveImage，这个接口对图片路径是没有要求的，所以当运行平台为支付宝时可以省去uni.getImageInfo这步。

bug：（夸克、uc）用we-cropper剪裁的图片不能用。

原因：

（1）支付宝画布导出图片的接口不是uni.canvasToTempFilePath()，而是CanvasContext.toTempFilePath()，并且取apFilePath的值。

平台差异说明。

（2）其它小程序在某个页面获取的临时路径，在关闭该页面后不会失效。而夸克、uc通过toTempFilePath获取到的临时路径（apFilePath），在获取页面关闭后会失效。

解决：

（1）将使用某临时路径的业务放在获取该路径的当前或之后的页面中。

（2）将获取临时路径的逻辑放在组件中，并在相应页面引入使用。

bug：（夸克【ios】）chooseImage()成功后立即跳转页面没有反应。

解决：延时跳转。

参考文章

• uni-app适配微信小程序自定义tabBar
• uni-app · 支付宝小程序踩坑
• uni-app 开发支付宝/百度小程序注意事项

其它问题

问题：导入项目时没有反应（mac电脑，百度小程序、支付宝小程序）。

原因：开发工具不明原因的没有了权限。
解决：

（1）使用root权限打开应用程序。（但是过于麻烦。）

（2）因为每次用npm运行项目都需要sudo来执行，怀疑node安装到了一个权限太高的地方，通过nvm重新安装一次node之后解决。

问题：ios用charles连代理后接口请求不到。

原因：在下载证书并在描述文件中启用证书后，还需要在设置→通用→关于本机→证书信任设置里面启用完全信任Charles证书。

微信代码转uniapp代码的全局替换总结：

• wx: —> v-
• v-key —> :key
• {{ —> （空）
• }} —> （空）
• bind:?tap —> @click
• catch:?tap —> @click.stop
• bind:? —> @
• wx. —> uni.
• this.data. —> this
• elif —> else-if
• triggerEvent —> $emit

持续更新地址