vue里面写原生JS函数,安卓agentweb、webview与js操作，移动应用调用JS，移动混合开发JS互动

原创

于 2020-01-07 10:57:26 发布 · 7.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue调用原生JS函数 #webview js互动 #移动混合开发JS互动 #移动开发JS #agentweb与js互动

在安卓混合开发中，遇到Vue界面调用原生JS实现AgentWeb的条码扫描功能的问题。解决方法包括：原生JS函数应放置在导出的HTML模板文件中，而非Vue组件内；处理原生JS返回值更新Vue中input绑定值的难题。通过调整，成功实现了移动应用与JS的交互。

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

最近在做安卓混合开发时，遇到几个坑，在vue写的界面里面调用原生js去调用安卓插件agentweb的安卓条码扫描功能，最后是agentweb调用web的原生JS出问题，
问题1：在vue界面里面放原生的function在哪里？经过多轮研究，问题1终于解决了，但又遇到个问题2：原生函数把值给了input控件，但vue取不到input的值。查查资料又解决了。

解决问题一：原生JS函数放在哪里?要放在导出html模板文件里面，而不是放在写的vue界面里面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>SCAN_Demo</title>
    <script type="text/javascript">
      function SCANRsult(key){
          document.getElementById("SCANText").value = key;
          document.getElementById("bt_SCAN").click();
      }
    </script>
  </head>
  <body>
    <div id="app"></div>   
  </body>
</html>