1. Freemarker官方網站
注：官網下載的freemarker是無法直接應用到Android中的，如果要使用需要修改源碼
測試代碼下載
1). 在assets文件夾下創建main.tpl文件, 其中${user}為動態替換的內容
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:</p>
</body>
</html>
2). 導入freemarker.jar與openbeans.jar
compile files('libs/freemarker.jar')
compile files('libs/openbeans.jar')
3). 將main.tpl文件拷貝至項目的/data/data/package/file/目錄下，并更名為main.ftl
/**
* 準備模板
* @throws IOException
*/
private void prepareTemplate() throws IOException {
// 獲取app目錄 data/data/package/file/
String destPath = getFilesDir().getAbsolutePath();
File dir = new File(destPath);
// 判斷文件夾是否存在
if (!dir.exists()){
dir.mkdir();
}
// 需要生成的.ftl模板文件名及路徑
String tempFile = destPath + "/" + "main.ftl";
if (!(new File(tempFile).exists())){
// 獲取assets中.tpl模板文件
InputStream is = getResources().getAssets().open("main.tpl");
// 生成.ftl模板文件
FileOutputStream fos = new FileOutputStream(tempFile);
byte[] buffer = new byte[7168];
int len;
while ((len = is.read(buffer)) > 0){
fos.write(buffer, 0, len);
}
fos.flush();
fos.close();
is.close();
}
}
4). 根據main.ftl文件生成對應的main.html網頁
/**
* 生成網頁
* @throws IOException
* @throws TemplateException
*/
private void genHTML() throws IOException, TemplateException {
String destPath = getFilesDir().getAbsolutePath();
FileWriter out = null;
// 數據源
Map<String, String> root = new HashMap<>();
// 傳入字符串
root.put("user", "mazaiting");
Configuration cfg = new Configuration(new Version(2, 3, 25));
// 設置編碼字符
cfg.setDefaultEncoding("UTF-8");
// 設置報錯提示
cfg.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
// 設置報錯提示
cfg.setLogTemplateExceptions(true);
out = new FileWriter(new File(destPath + "main.html"));
// 設置.ftl模板文件路徑
cfg.setDirectoryForTemplateLoading(new File(destPath));
// 設置template加載的.ftl模板文件名稱
Template temp = cfg.getTemplate("main.ftl");
// 將數據源和模板生成.html文件
temp.process(root, out);
out.flush();
out.close();
}
5). 在WebView中加載網頁
WebView mWebView = (WebView) this.findViewById(R.id.webView);
try {
prepareTemplate();
genHTML();
mWebView.post(new Runnable() {
@Override
public void run() {
String templateDir = getFilesDir().getAbsolutePath();
String url = "file://" + templateDir + "main.html";
mWebView.loadUrl(url);
}
});
} catch (Exception e) {
e.printStackTrace();
}
2. template.js項目地址
1). 在assets文件夾下引入template.js文件
2). 編寫main.html文件
<html lang="en">
<head>
<title>Welcome!</title>
</head>
<body>
<script id="script1" type="text/html">
<h1>Welcome <%=user%>!</h1>
</script>
<div id="contentTop"></div>
<p>Our latest product</p>
<script src="template.js"></script>
<script>
<!--從java代碼中獲取到數據-->
var data = JSON.parse(window.java.getString());
var tpl = template(document.getElementById('script1').innerHTML);
var html = tpl(data);
document.getElementById('contentTop').innerHTML = html;
</script>
</body>
</html>
3). 對WebView進行設置
WebView mWebView = (WebView) this.findViewById(R.id.webView);
// 設置webView允許JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
// 創建JSON對象
final JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("user", "mazaiting");
} catch (JSONException e) {
e.printStackTrace();
}
// 設置JavaScript執行的方法
mWebView.addJavascriptInterface(new Object(){
@JavascriptInterface
public String getString() {
return jsonObject.toString();
}
}, "java");
try {
// 設置網頁
mWebView.post(new Runnable() {
@Override
public void run() {
String url = "file:///android_asset/main.html";
mWebView.loadUrl(url);
}
});
} catch (Exception e) {
e.printStackTrace();
}
