WKWebView 加載 Uni-App 導出的本地 H5

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"];
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容