HTML5是現(xiàn)代化Web技術(shù)中的一種主流標(biāo)準(zhǔn)，它在Web應(yīng)用程序中扮演著重要的角色。在系統(tǒng)架構(gòu)中，后端往往會(huì)使用JSON格式的接口來傳輸數(shù)據(jù)，而在前端，我們可以使用H5技術(shù)來傳送JSON數(shù)據(jù)給APP使用。

//示例JSON數(shù)據(jù)
{
"name": "Lucy",
"age": 18,
"birthday": "2003-08-01",
"hobby": [
"sing",
"dance",
"travel"
]
}

在前端中，我們可以使用H5的特性將JSON數(shù)據(jù)發(fā)送到APP端。這個(gè)特性是使用JavaSript的window.postMessage()函數(shù)實(shí)現(xiàn)的。工作原理是將JSON數(shù)據(jù)序列化后作為一個(gè)字符串傳輸給APP端，并通過onmessage函數(shù)監(jiān)聽APP端返回的信息。

//H5發(fā)送消息到APP
var data = {
"name": "Lucy",
"age": 18,
"birthday": "2003-08-01",
"hobby": [
"sing",
"dance",
"travel"
]
};
window.postMessage(JSON.stringify(data), '*');
//H5接收APP返回信息
window.addEventListener('message', function(event) {
var result = JSON.parse(event.data);
console.log(result);
})

在APP端，我們需要監(jiān)聽H5發(fā)來的消息，并將JSON數(shù)據(jù)解析成對(duì)象。這里我們使用了WebView的loadUrl()方法將JSON數(shù)據(jù)通過URL Scheme傳遞給APP，并在APP端通過URL攔截器處理這個(gè)請(qǐng)求，將JSON數(shù)據(jù)解析成對(duì)象并傳遞給APP。

//APP監(jiān)聽H5發(fā)來的消息
webView.addJavascriptInterface(new Object() {
@JavascriptInterface
public void sendMsgToApp(String msg) {
Gson gson = new Gson();
People people = gson.fromJson(msg, People.class);
Toast.makeText(MainActivity.this, "姓名：" + people.getName() + " 年齡：" + people.getAge(), Toast.LENGTH_SHORT).show();
}
}, "Android");
//APP處理URL請(qǐng)求
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("json:")) {
String msg = Uri.decode(url.substring(5));
view.loadUrl("javascript:window.Android.sendMsgToApp('" + msg + "')");
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
});

在H5和APP之間傳輸JSON數(shù)據(jù)是非常常見的操作。以上示例展示了如何使用H5的window.postMessage()函數(shù)將JSON數(shù)據(jù)傳輸給APP，并在APP端使用WebView實(shí)現(xiàn)URL Scheme攔截器解析JSON數(shù)據(jù)。通過這種方式，H5和APP之間可以輕松、快速地實(shí)現(xiàn)數(shù)據(jù)傳遞，為Web應(yīng)用程序的開發(fā)提供了很大的便利。