ฉันรู้ว่านี่เป็นเรื่องเก่า แต่เอกสารประกอบอาจไม่ชัดเจนทั้งหมดเมื่อพูดถึงไฟล์ในเครื่อง ดังนั้นฉันคิดว่าฉันจะแบ่งปันความคิดของฉัน หวังว่าจะเป็นประโยชน์กับทุกคนที่สะดุดที่นี่
เอกสารประกอบระบุว่า:
หากต้องการแสดงเนื้อหาในเครื่องโดยใช้ WebView คุณจะต้องเปิดไฟล์ HTML เช่นเดียวกับไฟล์อื่นๆ จากนั้นโหลดเนื้อหาเป็นสตริงลงในคุณสมบัติ Html ของ HtmlWebViewSource
สิ่งสำคัญที่ควรทราบคือคุณสมบัติ Source ของ WebView มีไว้สำหรับ URL ภายนอกหรือ HtmlWebViewSource เท่านั้น คุณไม่สามารถใส่ URL ในเครื่องในคุณสมบัติแหล่งที่มา การใช้ถ้อยคำ คุณจะต้องเปิดไฟล์ HTML เช่นเดียวกับวิธีอื่นๆ (ตามที่ระบุไว้หลังจากนั้นไม่นาน) ที่คุณต้องโหลดเนื้อหาของไฟล์จากดิสก์ลงในตัวแปรโดยใช้เส้นทางไฟล์แบบเต็ม ไม่ใช่ URL
คำถามก็จะกลายเป็น แล้วลิงค์ไปยังไฟล์ในเครื่องอื่น ๆ ล่ะ? นั่นคือสิ่งที่คุณสมบัติ BaseUrl ของ HtmlWebViewSource เข้ามามีบทบาท เอกสารระบุถึงสิ่งนี้โดยระบุสิ่งต่อไปนี้:
แม้ว่าหน้าแรกจะโหลดแล้ว แต่ WebView ก็ไม่รู้ว่า HTML มาจากไหน นั่นเป็นปัญหาเมื่อต้องจัดการกับเพจที่อ้างอิงถึงแหล่งข้อมูลในเครื่อง ตัวอย่างที่อาจเกิดขึ้น ได้แก่ เมื่อเพจท้องถิ่นลิงก์ถึงกัน เพจใช้ไฟล์ JavaScript แยกต่างหาก หรือเพจลิงก์ไปยังสไตล์ชีต CSS
กล่าวอีกนัยหนึ่ง ลิงก์ใดๆ ไปยังแหล่งข้อมูลในเครื่องใน HTML ของคุณจะถูกต่อท้ายด้วย BaseUrl โดย Webview โดยอัตโนมัติ
เพื่อสรุปสิ่งต่างๆ
สร้างอินเทอร์เฟซ IBaseUrl ในโปรเจ็กต์ที่แชร์ของคุณ
public interface IBaseUrl {
string Get();
}
สร้างการใช้งานเฉพาะแพลตฟอร์มของ IBaseUrl ในแต่ละโครงการแพลตฟอร์ม
ไอโอเอส:
[assembly: Dependency (typeof (BaseUrl_iOS))]
namespace WorkingWithWebview.iOS
{
public class BaseUrl_iOS : IBaseUrl
{
public string Get()
{
return NSBundle.MainBundle.BundlePath;
}
}
}
หุ่นยนต์
[assembly: Dependency (typeof(BaseUrl_Android))]
namespace WorkingWithWebview.Android
{
public class BaseUrl_Android : IBaseUrl
{
public string Get()
{
return "file:///android_asset/";
}
}
}
UWP
[assembly: Dependency(typeof(BaseUrl))]
namespace WorkingWithWebview.UWP
{
public class BaseUrl : IBaseUrl
{
public string Get()
{
return "ms-appx-web:///";
}
}
}
ตรวจสอบให้แน่ใจว่าไฟล์ HTML ของคุณอยู่ในโฟลเดอร์ที่เหมาะสมและมี Build Action ที่เหมาะสม
- iOS: ทรัพยากร การดำเนินการบิวด์: BundleResource
- Android: เนื้อหา, การดำเนินการสร้าง: AndroidAsset
- UWP: รูทโปรเจ็กต์, การดำเนินการสร้าง: เนื้อหา
ตรวจสอบให้แน่ใจว่า WebView มีคำขอความสูงและความกว้าง ไม่เช่นนั้นอาจไม่แสดงผล:
อาจจำเป็นต้องตั้งค่าคุณสมบัติ widthRequest และ HeightRequest ของ WebView เพื่อดูเนื้อหา HTML ขึ้นอยู่กับเค้าโครงที่ WebView เป็นลูกของ ตัวอย่างเช่น สิ่งนี้จำเป็นใน StackLayout
เมื่อการตั้งค่าเสร็จสิ้น คุณสามารถนำไปใช้จริงในโปรเจ็กต์ที่แชร์ของคุณได้ นี่เป็นตัวอย่างง่ายๆ:
// Use DI function to get the BaseUrl for the platform
var baseUrl = DependencyService.Get<IBaseUrl>().Get();
// You could append subfolders here if you don't
// want all the HTML files mixed with other resources:
// var baseUrl = System.IO.Path.Combine(DependencyService.Get<IBaseUrl>().Get(), "subfolder");
// Define the location of your initial HTML page using the base url
var initialHtmlPath = System.IO.Path.Combine(baseUrl, "index.html");
// Create the viewsource, loading the first HTML file as a string
var localHtmlViewSource = new HtmlWebViewSource();
localHtmlViewSource.BaseUrl = baseUrl;
localHtmlViewSource.Html = System.IO.File.ReadAllText(initialHtmlPath);
// Set the webview to use the local source
HelpWebView.Source = localHtmlViewSource;
person
kiddailey
schedule
02.03.2021
