uni-app打包后，iOS中hybrid调用本地html路径含#不识别，Android及http访问无问题

uni-app打包后，iOS中hybrid调用本地html路径含#不识别，Android及http访问无问题

开发环境 版本号 项目创建方式
Windows Win10 HBuilderX

操作步骤：

例如： /hybrid/html/ecard/index.html#/shouye
ecard这个子项目使用angularjs写的，所以路径中会带有#这个符号。

预期结果：

可以正常路由到/shouye

实际结果：

在Android 中打包后可以正常打开，在iOS中则不行，在代码中调试发现是没有找到 /shouye这个路由，进一步识别路径，发现应该是“#”被转为“%23d”这样的字符。

bug描述：

APP打包后，在iOS中通过hybrid调用本地html，路径中包含#则不识别，

例如： /hybrid/html/ecard/index.html#/shouye
ecard这个子项目使用angularjs写的，所以路径中会带有#这个符号。

在Android 中打包后可以正常打开，在iOS中则不行，在代码中调试发现是没有找到 /shouye这个路由，进一步识别路径，发现应该是“#”被转为“%23d”这样的字符。

Android没有问题，http访问也没有问题。

在iOS中将路径换成：

http://test.tseo.cn/uniapp/mytest/hybrid/html/ecard/index.html#/shouye

更多关于uni-app打包后，iOS中hybrid调用本地html路径含#不识别，Android及http访问无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

是使用的 web-vew 组件吗？

更多关于uni-app打包后，iOS中hybrid调用本地html路径含#不识别，Android及http访问无问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，使用web-view组件。web-view组件的hybrid URL，参数中不带#的访问，一切正常。带了#来只是路由，URL中的SPA（但也应用）则找不到路由。直接通过http引入在web-view中则正常，只是通过hybrid从本地引入才出现此BUG。

可以参考以下内容： https://www.jianshu.com/p/94b1c1d8e42a

项目需要从本地加载的Url链接是

/var/mobile/Containers/Data/Application/22438350-8530-4B0B-BFDD-FBCE7A9F873B/Documents/components/dist/main.html#/main
但是调用
NSURL * URL = [NSURL fileURLWithPath:indexHtmlPath];
打印URL.absoluteString却变成了
file://var/mobile/Containers/Data/Application/22438350-8530-4B0B-BFDD-FBCE7A9F873B/Documents/components/dist/main.html%23/main
对比两个Url链接，除了# 被%23替换之外，链接还加了前缀file:/,我们能不能直接在初始化之前，自己拼接Url加上前缀，接着用我们常见的Url初始化方法，来初始化呐，答案是肯定de
indexHtmlPath = [NSString stringWithFormat:@“file:/%@”, indexHtmlPath]; NSURL * URL = [NSURL URLWithString: indexHtmlPath];

这是一个iOS平台特有的URL编码问题。在iOS中，#符号会被自动编码为%23，导致AngularJS的路由无法正确识别。

解决方案：

  1. 对于uni-app的hybrid模式，建议修改AngularJS的路由模式为HTML5模式：
$locationProvider.html5Mode(true);
  1. 如果必须使用hash模式，可以在iOS平台添加特殊处理：
// 判断平台并处理URL
if (uni.getSystemInfoSync().platform === 'ios') {
    window.location.hash = decodeURIComponent(window.location.hash);
}
  1. 另一种方案是修改uni-app的webview加载方式：
// 使用loadURL方法替代直接路径
plus.webview.create('','',{
    url: '/hybrid/html/ecard/index.html',
    additionalHttpHeaders: {
        'X-Requested-With': 'XMLHttpRequest'
    }
});
回到顶部