热点新闻
WKWebView 加载 Uni-App 导出的本地 H5
2023-07-28 08:32  浏览:1088  搜索引擎搜索“手机财发网”
温馨提示:信息一旦丢失不一定找得到,请务必收藏信息以备急用!本站所有信息均是注册会员发布如遇到侵权请联系文章中的联系方式或客服删除!
联系我时,请说明是在手机财发网看到的信息,谢谢。
展会发布 展会网站大全 报名观展合作 软文发布

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"];

发布人:e4b4****    IP:117.173.23.***     举报/删稿
展会推荐
让朕来说2句
评论
收藏
点赞
转发