●實作練習：預期畫面

webview load html from assets    webview load html from assets

 

●補充說明

(一)WebView

=>離線的時候也能用webview，這是連到android本機端的網頁

=>所以可以把網站都丟到這個asset資料夾中，就能在離線的狀況下看網站:這叫hybrid的作法

 
1.使用webview先在AndroidManifest.xml中設定權限
<uses-permission android:name="android.permission.INTERNET"/>
 
2.拉出一個webview，給id
 
3.在app下面new一個assets folder，放在main下面=>確定
 
4.再到assets folder new一個file=>named index.html，加上<h1>和<p>
5.把程式碼修改為連到這個網址，注意這邊的android_asset不加s
wv.loadUrl("file:///android_asset/index.html");
 
6.設定第二頁，在index.html中加上可以跳到下一頁的連結
<p><a href="page2.html">前往第二頁</a></p>
 
7.在java code加上下面兩行，才能正確連結到下一頁，因為android 8以後有改strictMode，應該是因為安全性設定的問題，不能直接用file:///開檔案，要用fileprovider，這兩個的用法是建立一個VmPolicy物件(模擬器規則物件)，讓這個程式可以不用被app的規則限制住而是用模擬器規則(因為只是用來做測試的，所以不需要很多規則)，這不是一個好的做法，但暫時先這樣做=>在api22以前沒有這個問題
 
StrictMode.VmPolicy.Builder builder =
 new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());
 
(二)如何回上一頁=>做完上面，會發現跳到第二頁以後無法返回上一頁，因為如果直接按back button會跳出app，這是因為我們的app只有一個activity，android的back buttong功能是離開activity，這邊因為page2也在同一個activity中所以無法回上一頁，這邊就要使用onBackPressed()
 
public void onBackPressed(){
    if(wv.getUrl().contains("index.html")){
        super.onBackPressed();
    }else{
        wv.goBack();
    }
}
 
(三)如果在第二頁加上javascript程式碼，要記得在javacode加上
wv.getSettings().setJavaScriptEnabled(true);

 

 

●程式--html

(一)index.html

<h1>Hello World!</h1>
<p>i am the index</p>
<p><a href="page2.html">前往第二頁</a></p>

 

(二)page2.html

<h1>this is page 2</h1>
<script>
    function calc(){
    var q1=document.getElementById("q1").value;
    var q2=document.getElementById("q2").value;
    var ans=eval(q1)+eval(q2);
    var spanans=document.getElementById("ans");
    spanans.innerHTML=ans;
    }

</script>
<input type="text" id="q1"/>+
<input type="text" id="q2"/>
<input type="button" value="=" onclick="calc()">
<span id="ans"></span>

 

●程式--java code

WebView wv;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    wv=(WebView)findViewById(R.id.wv);

    //要設定javascript可以運作
    wv.getSettings().setJavaScriptEnabled(true);
    
   //一定要設定WebViewClient，否則找不到page2.html
   wv.setWebViewClient(new WebViewClient());

    //android_asset不加s
    wv.loadUrl("file:///android_asset/index.html");

    //加上這個就可以開檔案，因為android 8以後有改strictMode，
    //不能直接用file:///開檔案，要用fileprovider來做
    StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
    StrictMode.setVmPolicy(builder.build());

}
//當按下手機的back button時的method
public void onBackPressed(){
    //取得url以後檢查url中有沒有index.html，
    //如果有就跳出activity，沒有就回上一頁
    if(wv.getUrl().contains("index.html")){
        //呼叫父類別的onBackPressed()會直接離開activity，
        //但是不可以將此功能註解掉
        super.onBackPressed();
    }else{
        //回上一頁
        wv.goBack();
    }
}

 

●程式參考(GitHub)：Webview Load html from Assets

arrow
arrow
    文章標籤
    Webview Android assets javascript Android實作練習
    全站熱搜

    muchone 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄