Android WebView加载 Vue 项目

本文详细介绍如何在Android WebView中启用localStorage,实现Vue应用的数据持久化,并通过URL参数向Vue前端传递数据,确保本地存储的有效利用及跨平台数据通信。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.允许 vue端使用 localStorage存储

需要在 android webview 中作如下设置

        myWebView.loadUrl("http://10.18.31.12:8081/?areaCode=620000&areaName=甘肃省");        
        //localStorage  允许存储
        myWebView.getSettings().setDomStorageEnabled(true);
        myWebView.getSettings().setAppCacheMaxSize(1024*1024*8);//存储的最大容量
        String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
        myWebView.getSettings().setAppCachePath(appCachePath);
        myWebView.getSettings().setAllowFileAccess(true);
        myWebView.getSettings().setAppCacheEnabled(true);

2.向vue端传递参数

android 端webView 拼接参数

myWebView.loadUrl("http://10.18.31.12:8081/?areaCode=620000&areaName=甘肃省");

vue首页面接收参数并存储到 localStorage

created(){
    var params = {};
    location.search.substr(1).split('&').forEach( function(item){
      var s = item.split('=');
      params[s[0]]=s[1];
    });
    localStorage.setItem('areaCode',params.areaCode);
    localStorage.setItem('areaName',params.areaName);
}

 

 

Android中使用WebView加载Vue单页应用,通常涉及到以下几个步骤: 1. **引入WebView组件**: 首先,在你的Android项目中添加一个WebView控件,这是用于显示网页内容的主要界面。 ```java WebView webView = findViewById(R.id.web_view); webView.setWebViewClient(new WebViewClient()); ``` 2. **配置WebView**: 设置WebView的安全模式,允许加载外部资源,并指定页面URL,指向你的Vue应用的线上地址。 ```java webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://your-vue-app-url"); ``` 3. **处理JavaScript交互**: 虽然可以直接通过WebView访问JavaScript,但为了更流畅的通信,可以创建一个JavaScriptInterface,让Vue能监听并触发特定的Android方法。 ```java class MyJavaScriptInterface extends ValueCallback<String> { @JavascriptInterface public void callFromJs(String data) { // 处理来自Vue的回调数据 } } webView.addJavascriptInterface(new MyJavaScriptInterface(), "androidCallback"); ``` 在Vue中,你需要调用这个接口方法,比如这样: ```javascript window.androidCallback("Hello from Vue!"); ``` 4. **通信方式**: - **消息传递**:Vue可以在JavaScript中触发`window.androidCallback`函数,而Android侧可以通过`callFromJs`方法接收并处理这些数据。 - **Web Storage**:Vue也可以使用localStorage或sessionStorage存储数据,然后通过URL参数或查询字符串传递给Android。 5. **注意点**: - 跨域问题需要服务器支持CORS(Cross-Origin Resource Sharing)。 - 长时间运行的WebView可能导致性能问题,考虑使用ServiceWorker进行离线缓存。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值