最近一直在做h5相关,发现本地html模板导入进项目后,js和css并显示不出来,后来发现是路径的问题。
导入html文件夹方式
-
Create groups (创建虚拟结构-包结构)
app编译过后引入的文件会被放在同一个文件夹下面会忽略原本的文件夹,所以在HTML文件中的路径就会出现问题。因此html文件中引入css,js,图片等就不需要添加前缀路径了,直接写文件名就行。
<link rel="stylesheet" type="text/css" href="new_file.css"/>
<script src="myScript.js"></script>
-
Create folder references for any added folders (创建实体结构)
app编译过后引入的文件会按照原本的目录结构存放,这个时候就需要添加相对路径。因此html文件中引入css,js,图片等就需要添加前缀路径了。
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script src="js/myScript.js"></script>
加载本地动态html(代码中组合生成的html字符串)
1.使用绝对路径拼接
//获取文件全路径
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"newImage@2x" ofType:@"png"];
//代码加载图片需要前面拼接file:///
[self.htmlString appendFormat:@"<img src=\"file:///%@\" width=[\"40\" height=\"40\"/> \n",imagePath];
//baseURL为nil;
[webview loadHTMLString:mStringhtml baseURL:nil];
2.使用URLForResource
//获取文件URL
NSURL *fileUrl = [[NSBundle mainBundle] URLForResource:@"new_file.css" withExtension:nil];
/加载文件需要路径
[self.htmlString appendFormat:@"<link rel=\"stylesheet\" type=\"text/css\" href=%@ />\n",fileUrl];
//lbaseURL为nil;
[webview loadHTMLString:self.htmlString baseURL:nil];
3.使用bundleURL
/加载文件可以只需要文件名
[self.htmlString appendFormat:@"<link rel=\"stylesheet\" type=\"text/css\" href=\"new_file.css\" />\n "];
//使用[[NSBundle mainBundle] bundleURL];
[webview loadHTMLString:weakSelf.mStringhtml baseURL:[[NSBundle mainBundle] bundleURL]];