HTML5是現代化Web技術中的一種主流標準，它在Web應用程序中扮演著重要的角色。在系統架構中，后端往往會使用JSON格式的接口來傳輸數據，而在前端，我們可以使用H5技術來傳送JSON數據給APP使用。

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

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

//H5發送消息到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端，我們需要監聽H5發來的消息，并將JSON數據解析成對象。這里我們使用了WebView的loadUrl()方法將JSON數據通過URL Scheme傳遞給APP，并在APP端通過URL攔截器處理這個請求，將JSON數據解析成對象并傳遞給APP。

//APP監聽H5發來的消息
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請求
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數據是非常常見的操作。以上示例展示了如何使用H5的window.postMessage()函數將JSON數據傳輸給APP，并在APP端使用WebView實現URL Scheme攔截器解析JSON數據。通過這種方式，H5和APP之間可以輕松、快速地實現數據傳遞，為Web應用程序的開發提供了很大的便利。