webView与vue交互

画重点：本本介绍webView和vue交互包含一下4点

 

1、设置title

2、app url传参到vue

3、js调用app本地方法

4、app调用js方法

 

一 设置title，由于vue是单页应用，传统项目那样配置<title>标题</title>会无效

    1、vue设置

    1）在components下面创建多个vue组件，如下图所示：

　　　　　

 

    2）配置路由；在router/index.js文件中配置

import Vue from \'vue\'
import Router from \'vue-router\'
import HelloWorld from \'@/components/HelloWorld\'
import FirstPage from \'@/components/FirstPage\'
import TwoPage from \'@/components/TwoPage\'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: \'/\',
      name: \'HelloWorld\',
      component: HelloWorld,
      meta:{
       title:"首页"
      }
    },
    {
      path: \'/firstPage\',
      name: \'FirstPage\',
      component: FirstPage,
      meta:{
        title:"firstPage"
       }
    },
    {
      path: \'/twoPage\',
      name: \'TwoPage\',
      component: TwoPage,
      meta:{
        title:"twoPage"
       }
    }
  ]
})

3）在main.js中设置

router.afterEach(function (to, from) {
  if(to.meta.title){
      document.title = to.meta.title;
  }
});

4）运行项目自测  npm run dev，浏览器访问：http://localhost:8080；跳转页面如发现title有改变说明vue配置title已成功；

 

2、app webView设置，

1）webView设置WebChromeClient

webView.setWebChromeClient(chromeClient)

2)重写WebChromeClient的onReceivedTitle(WebView view, String title)方法，其中title就是当前web页面的title，可将此title设置到app的title中显示；

 

二 app url传参到vue

　　app提供参数以供前端载入页面立刻使用，一般采用url传参

       1、vue设置

       1）创建utils.js文件，其内容如下（获取url路径上的参数）

export default{
    getUrlKey: function (name) {
        return decodeURIComponent((new RegExp(\'[?|&]\' + name + \'=\' + \'([^&;]+?)(&|#|;|$)\').exec(location.href) || [, ""])[1].replace(/\+/g, \'%20\')) || null
    }
  }

      2）在main.js中引入utils.js文件，并获取url上相关的参数；代码如下

import utils from \'./utils\'

let chainName = utils.getUrlKey(\'chainName\')
console.log("chainName:"+chainName)
alert("chainName:"+chainName)

    3）代码完成后部署项目，浏览器访问 http://localhost:8080?chainName=emememememem;得到下图所示，证明vue已经接收到参数

   

 

三 js调用app本地方法

    1、app端设置

   1)  webview设置 如下：

webView.addJavascriptInterface(this, "app");

@android.webkit.JavascriptInterface
public void actionFromJs(String args) {
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            ToastUtil.toastShort("form web args:" + args);

        }
    });
}

  其中：app 是注入到js中的对象，js中通过app调用actionFromJs方法

    2、vue设置

<template>

<div class="hello">

<h1>first page</h1>

<p>传入原生参数是：js调用了android中的actionFromJs方法</p>
<p><button @click = "callApp()">callApp</button></p>
</div>

</template>

export default{
methods:{
   callApp(){
      // 由于对象映射，所以调用app对象等于调用Android映射的对象
      app.actionFromJs("js调用了app中的actionFromJs方法");
         }
      }
   }

</script>

 

　四  app调用js方法

  1、vue设置；vue让app能调入js方法，需要将方法赋给window；因为vue将js进行封装操作

 
  <script >

  export default {
    mounted() {
      window.formToApp = this.formToApp;
    },
    methods: {
      formToApp(args) {
        alert("app args:" + args);
      }
    }
  }

  </script>

 

   2、app设置

   在需要调用js方法位置执行即可

  callJs("formToApp", "app调用了formToApp方法");

   public void callJs(String name, String args) {
        String url = "javascript:" + name + "(\'" + args + "\')";
        webView.loadUrl(url);
    }