uni-app项目使用Vue全局混入功能打包成H5应用后，在部分iOS系统下显示空白页

uni-app项目使用Vue全局混入功能打包成H5应用后，在部分iOS系统下显示空白页

操作步骤：

  • 使用全局混入 mixins

预期结果：

  • 低版本IOS系统下（IOS 10），显示空白页

实际结果：

  • 低版本IOS系统下（IOS 10），显示空白页

bug描述：

uni-app项目使用Vue全局混入功能，打包成H5 应用，在部分ISO系统下显示空白页！

现象
  • 不论是通过HX创建的uni-app项目还是通过cli方式创建的uni-app项目，若项目中使用了全局混入功能，将导致H5应用在低版本IOS系统下显示为空白页。
测试机型
  • IOS 11以上系统正常，IOS10（含）一下机型显示空白页，测试手机 iPhone 6s, IOS10.3

更多关于uni-app项目使用Vue全局混入功能打包成H5应用后，在部分iOS系统下显示空白页的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HBuilderX 3.1.2 已经修复

更多关于uni-app项目使用Vue全局混入功能打包成H5应用后，在部分iOS系统下显示空白页的实战教程也可以访问 https://www.itying.com/category-93-b0.html


来个链接，我先看下

https://static-8580889c-605d-4775-b7e6-b2c5a0d35576.bspapp.com/#/

你试试看这个，我通过HX创建的uni-app项目默认模板，没有任何业务代码，只是加了全局混入，IOS10.3的手机上打开是空白页

回复 m***@foxmail.com: 试了试确实有报错，测试工程上传，我调试一下

回复 DCloud_UNI_GSQ: 下面的回复给了demo

你试试这个，其实就是很uni-app简单模板加Vue全局混入

问题已确认：在 app 初始化以前调用了uni.getSystemInfoSync导致
后续会考虑优化：解决调用报错问题

这是一个已知的兼容性问题，主要原因是iOS 10及以下版本对ES6语法支持不完善导致的。以下是具体分析和解决方案：

  1. 问题根源：
  • iOS 10的JavaScriptCore引擎对ES6语法支持有限
  • Vue的混入功能使用了部分ES6特性
  • 打包后的代码可能包含某些iOS 10不支持的语法
  1. 解决方案： a) 修改项目配置： 在vue.config.js中添加transpileDependencies配置：
module.exports = {
  transpileDependencies: ['your-mixin-file']
}

b) 使用Babel转译： 确保babel.config.js中包含对ES6语法的转换：

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
回到顶部