1. Freemarker官方網(wǎng)站
注：官網(wǎng)下載的freemarker是無(wú)法直接應(yīng)用到Android中的，如果要使用需要修改源碼
測(cè)試代碼下載
1). 在assets文件夾下創(chuàng)建main.tpl文件, 其中${user}為動(dòng)態(tài)替換的內(nèi)容
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:</p>
</body>
</html>
2). 導(dǎo)入freemarker.jar與openbeans.jar
compile files('libs/freemarker.jar')
compile files('libs/openbeans.jar')
3). 將main.tpl文件拷貝至項(xiàng)目的/data/data/package/file/目錄下，并更名為main.ftl
/**
* 準(zhǔn)備模板
* @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). 根據(jù)main.ftl文件生成對(duì)應(yīng)的main.html網(wǎng)頁(yè)
/**
* 生成網(wǎng)頁(yè)
* @throws IOException
* @throws TemplateException
*/
private void genHTML() throws IOException, TemplateException {
String destPath = getFilesDir().getAbsolutePath();
FileWriter out = null;
// 數(shù)據(jù)源
Map<String, String> root = new HashMap<>();
// 傳入字符串
root.put("user", "mazaiting");
Configuration cfg = new Configuration(new Version(2, 3, 25));
// 設(shè)置編碼字符
cfg.setDefaultEncoding("UTF-8");
// 設(shè)置報(bào)錯(cuò)提示
cfg.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
// 設(shè)置報(bào)錯(cuò)提示
cfg.setLogTemplateExceptions(true);
out = new FileWriter(new File(destPath + "main.html"));
// 設(shè)置.ftl模板文件路徑
cfg.setDirectoryForTemplateLoading(new File(destPath));
// 設(shè)置template加載的.ftl模板文件名稱
Template temp = cfg.getTemplate("main.ftl");
// 將數(shù)據(jù)源和模板生成.html文件
temp.process(root, out);
out.flush();
out.close();
}
5). 在WebView中加載網(wǎng)頁(yè)
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項(xiàng)目地址
1). 在assets文件夾下引入template.js文件
2). 編寫(xiě)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代碼中獲取到數(shù)據(jù)-->
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). 對(duì)WebView進(jìn)行設(shè)置
WebView mWebView = (WebView) this.findViewById(R.id.webView);
// 設(shè)置webView允許JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
// 創(chuàng)建JSON對(duì)象
final JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("user", "mazaiting");
} catch (JSONException e) {
e.printStackTrace();
}
// 設(shè)置JavaScript執(zhí)行的方法
mWebView.addJavascriptInterface(new Object(){
@JavascriptInterface
public String getString() {
return jsonObject.toString();
}
}, "java");
try {
// 設(shè)置網(wǎng)頁(yè)
mWebView.post(new Runnable() {
@Override
public void run() {
String url = "file:///android_asset/main.html";
mWebView.loadUrl(url);
}
});
} catch (Exception e) {
e.printStackTrace();
}
