如果您正在开发,使用HTML/JavaScript,您可以使用内置的WinJS 库在HTML 中进行模板化。微软还为Angular、React 或Knockout 创建了许多adapters,以便在UWP 应用程序中使用它们。
通常大多数JavaScript 代码应该可以正常工作,您唯一应该考虑的是security limitations 在嵌入 iframe 或外部脚本时。要绕过这些限制,您应该更新使用的库的逻辑或使用 execUnsafeLocalFunction 方法手动强制执行。
MSApp.execUnsafeLocalFunction(function() {
var body = document.getElementsByTagName('body')[0];
body.innerHTML = '<div style="color:' + textColor + '">example</div>';
});
==
更新:
对于 C#,有两种选择:
- 继续寻找库或自己推动它将进行此类转换,或
- 围绕 webview 控件构建一个包装器,它可以为您使用现有的库。
在第二种情况下应该很容易:
1)您应该使用您在 JavaScript 中选择的任何库来实现从 JSON 到 HTML(带模板)的转换器,它应该可用于从外部上下文(全局函数或对象)调用。这样的函数应该以 JSON 字符串的形式接收数据并返回一个字符串(例如来自 innerHTML)。
2) 使用带有 InvokeScriptAsync/ScriptNotify 事件的标准技术让 WebView 控件在 C# 和 JS 环境之间传输数据。您实际上不需要在页面内显示 WebView。只需将其用作 JS 执行的环境即可访问相应库所需的 DOM。
下面是 WinJS 的代码示例:
HTML/JS. 带有 WinJS 库的 template.html 文件。全局js函数:
function convertFromJSON2HTML(jsonString, templateHTML) {
var templateEl = document.createElement("div");
templateEl.innerHTML = templateHTML;
var jsonData = JSON.parse(jsonString);
if (WinJS != undefined) {
var template = new WinJS.Binding.Template(templateEl);
//promise
template.render(jsonData).done(function(output) {
window.external.notify(output.innerHTML);
});
} else {
// catch error
}
}
C# 代码
public async Task<string> GenerateTemplate(string jsonData, string template)
{
var webView = new WebView();
webView.Source = new Uri("ms-appx-web:///HTML/template.html");
webView.DOMContentLoaded += async (o, e) =>
{
await webView.InvokeScriptAsync("convertFromJSON2HTML", new string[] { jsonData, template });
};
string output = "";
// Simple trick to convert event result to async result
TaskCompletionSource<bool> tcs = new TaskCompletionSource<bool>();
webView.ScriptNotify += (o, e) =>
{
output = e.Value;
tcs.SetResult(true);
};
await tcs.Task;
return output;
}
用法。我在这里使用的是 WinJS 样式的模板:
var result = await GenerateTemplate("{\"x\":\"test\"}","<p data-win-bind='textContent:x'></p>");
resultBox.Text = result;
另外,为了简化通信,我建议使用 AddAllowedWebObject 方法在两个环境之间传递 WinRT 对象,而不仅仅是文本。