5+APP，使用HbuilderX打包IOS包，切换WKWebview内核后启动白屏问题解决分享

分类：HBuilderX

WKWebview白屏 WKWebview

一、项目介绍
使用vue开发的的项目，通过Hbuilder X打包称APP。Andriod版本的包，安装后一直没什么问题。
在打IOS包时遇到了大问题。
二、问题描述
打好的ipa包，安装到测试设备，启动图标显示完之后，直接白屏。
开始真机调试，报错信息如下：
11:12:35.725 同步手机端程序文件完成
11:12:37.631 联机调试并非打包，调试基座 HBuilder 是默认的测试包，权限、图标都不可自定义。只有在点菜单"发行-发行为原生安装包"时才能自定义这些设置
11:12:37.652 iOS9.0及以上系统需要在"设置"-"通用"-"设备管理"(或"描述文件")中信任DCloud企业证书(Digital Heaven开头的证书)才可以正常使用
11:12:37.673 如手机上HBuilder调试基座未启动，请手动启动。如应用未更新，请在手机上杀掉基座进程重启
11:13:07.571 Script error.
11:13:07.592 filename:
11:13:07.613 lineno:0

三、定位问题
结合官方论坛的其他帖子，问题方向是WKWebview内核严格的跨域限制导致的。
问题定位历程是强行切换UIWebview，页面显示正常。
切换UIWebview步骤

在manifest.json文件，代码视图plus下新增
```
"kernel" : {  
        "ios" : "UIWebview", //或者 "WKWebview"  
    },
```
最初以为是整个文件跨域

参考链接https://ask.dcloud.net.cn/article/36348

后来将index.html引用的js全删掉换成只有静态文字，发现不是index.html跨域。

然后开始从入口js排查，vue项目，入口main.js里引用的js一点一点删除测试。
结果：


const requireComponents = require.context('./components', true, /\.vue/)  
requireComponents.keys().forEach(fileName => {  

const reqCom = requireComponents(fileName)  
const reqComName = reqCom.default['name']  
 Vue.component(reqComName, reqCom.default || reqCom)  
})

定位出是require.context这个批量引入组件导致的。
参考链接https://www.cnblogs.com/cai-xin/p/12410297.html
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头

也就是运行时去加载文件导致本地文件跨域。

结论：因require.context导致的本地文件跨域，最后更改组件批量引入方式使用import导入。

0 赞关注分享