uni-datetime-picker组件在uni-app中运行到支付宝小程序打不开

uni-datetime-picker组件在uni-app中运行到支付宝小程序打不开

操作步骤：

复现步骤

uniapp项目表单里添加一个时间日期选择组件，运行到支付宝小程序，点击时间组件会提示错误。

预期结果：

点击正常弹出组件。

实际结果：

不弹出组件，会报错。

bug描述：

uni-datetime-picker组件运行到支付宝小程序打不开。 支付宝小程序点击时间日期组件提示：Cannot read property ‘toLowerCase’ of undefined at Proxy.platform (uni-datetime-picker.js:304)。 源码处打印navigator信息，打印出的信息里面userAgent没有数据，但是在源码处使用了userAgent.toLowerCase()导致报错，拉不起来组件。

信息类别 信息内容
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 window 10
HBuilderX类型 正式
HBuilderX版本号 3.8.7
第三方开发者工具版本号 3.0.2
基础库版本号 2.7.12
项目创建方式 HBuilderX

更多关于uni-datetime-picker组件在uni-app中运行到支付宝小程序打不开的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

确实有问题，需要你在uni-datetime-picker.vue组件中，在454行将 this.isPhone = navigator.userAgent.toLowerCase().indexOf(‘mobile’) !== -1 改成 if(this.isPhone){
this.isPhone = navigator.userAgent.toLowerCase().indexOf(‘mobile’) !== -1
return
}else{
return
}

更多关于uni-datetime-picker组件在uni-app中运行到支付宝小程序打不开的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的原因是支付宝小程序环境下navigator.userAgent未定义，而uni-datetime-picker组件内部直接调用了toLowerCase()方法导致报错。

解决方案有两种：

  1. 临时方案：在onLoad中手动设置navigator.userAgent
onLoad() {
  if(typeof navigator.userAgent === 'undefined') {
    navigator.userAgent = 'alipay';
  }
}
  1. 推荐方案：升级uni-datetime-picker组件到最新版本，官方已修复此问题。可以通过以下命令更新：
npm update [@dcloudio](/user/dcloudio)/uni-ui
回到顶部