WKWebView 加载 Uni-App 导出的本地 H5
WKWebView 加载 Uni-App 导出的本地 H5
韦弦zhy
发布于 2022-09-21 08:22:43
发布于 2022-09-21 08:22:43
Uni-App 打包发布的H5包直接放到APP中加载可以用于提升加载速度，一般有两种方式：
- 直接把包放到 iOS 项目中加载 (多用于开发阶段测试)
- 从后台服务器预下载到文件沙盒内加载 (可以减少APP包大小，同时也能实现热更新功能)
加载步骤
一、创建一个uni-app项目，并打包成H5
- 在官方工具HBuilder中创建一个测试项目
创建uni-app
- 修改 manifest.json 文件中的 h5配置的运行的基础路径为：
./
修改配置
- 发行为H5
H5发行
二、iOS项目内直接加载包内 Uni-App
- 将整个Uni-App包以引用（蓝色文件夹）的方式加入项目
引入Uni-App
- 加载 uni-app
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSString *pathString = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"h5"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:pathString]];
[self.webView loadRequest:request];
}- 加载uni-app需要携带参数
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSString *pathString = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"h5"];
NSString *pathString2 = [[NSString stringWithFormat:@"?id=%@",@"testId"] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLFragmentAllowedCharacterSet]];
NSURL *baseUrl = [NSURL fileURLWithPath:pathString];
NSURL *loadUrl = [NSURL URLWithString:pathString2 relativeToURL:baseUrl];
NSURLRequest *request = [NSURLRequest requestWithURL:loadUrl];
[self.webView loadRequest:request];
}- 加载uni-app指定页面例如 view 示例页面，和上面一样
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSString *pathString = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"h5"];
NSString *pathString2 = @"#/pages/component/view/view";
NSURL *baseUrl = [NSURL fileURLWithPath:pathString];
NSURL *loadUrl = [NSURL URLWithString:pathString2 relativeToURL:baseUrl];
NSURLRequest *request = [NSURLRequest requestWithURL:loadUrl];
[self.webView loadRequest:request];
}三、加载沙盒内Uni-App
基本逻辑和加载本地一致，但是必须使用 relativeToUrl 方法加载，首先确认自己缓存的目录，然后给路径拼接file://协议头:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *basePath = [[paths objectAtIndex:0] stringByAppendingString:@"h5"];
NSString *path = [basePath stringByAppendingString:@"index.html"];
NSURL *baseUrl = [NSURL fileURLWithPath:basePath];
// 需要手动拼接 file://
NSString *loadPath = [[NSString stringWithFormat:@"file://%@",path] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLFragmentAllowedCharacterSet]];
// 最终加载路径
NSURL *loadUrl = [NSURL URLWithString:loadPath relativeToURL:baseUrl];
[self.webView loadFileURL:loadUrl allowingReadAccessToURL:[NSURL fileURLWithPath: [paths objectAtIndex:0]]];
}
iOS 加载Uni-APP 效果
Tips: 打包出来的H5先用电脑试下能否成功加载 index.html ~
如果是Origin null is not allowed by Access-Control-Allow-Origin.问题导致无法加载可以按如下设置，使WKWebView允许跨域：
[self.webView.configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-08-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录