vue中如何用ios安卓的方法_vue 项目怎样调用原生的安卓ios方法 - CSDN
  • 最近在用vue做项目,项目在安卓4,5,ios9页面显示空白,问题解决跟大家分享一下安卓4,5,ios9页面空白原因:低版本不支持es6,需要将es6编译成es5具体解决方法1.npm install --save-dev babel-preset-es2015(安装...
    最近在用vue做项目,项目在安卓4,5,ios9页面显示空白,问题解决跟大家分享一下
    安卓4,5,ios9页面空白原因:低版本不支持es6,需要将es6编译成es5

    具体解决方法

    1.npm install --save-dev babel-preset-es2015(安装ES2015转码规则)

    2.npm install --save-dev babel-polyfill

    3.npm install es6-promise

    4.main.js 中引用 

    import Es6Promise from 'es6-promise'

    Es6Promise.polyfill()

    import 'babel-polyfill'

    5.修改.babelrc文件  

    {
    "presets": ["es2015" , "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    6.webpack.base.conf.js 中修改
      对VUX进行转ES5
       {
        test: /vux.src.*?js$/,
        loader: 'babel-loader',
        query: {
        presets: ['es2015']
        },
        },
    对自定义脚本进行转ES5
        {
         test: /\.js$/,
        loader: 'babel-loader',
        query: {
        presets: ['es2015']
        },
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        }

    希望能帮到大家,如果有错误的地方,请指出,谢谢



    展开全文
  • 各种百度之后,在别的站看到一篇文章,介绍可以使用 WebViewJavascriptBridge与原生app进行通信; 在项目尝试了一下,确实有效记录一下。 原文链接: ... 1,引入第三方WebViewJavascriptBridge的库 ...

    各种百度之后,在别的站看到一篇文章,介绍可以使用 WebViewJavascriptBridge与原生app进行通信;

    在项目中尝试了一下,确实有效记录一下。

    原文链接:

    https://blog.csdn.net/szjSmiling/article/details/82773293

    1,引入第三方WebViewJavascriptBridge的库

     1     function setupWebViewJavascriptBridge(callback) {
     2       if (window.WebViewJavascriptBridge) {
     3         return callback(window.WebViewJavascriptBridge)
     4       }
     5       if (window.WVJBCallbacks) {
     6         return window.WVJBCallbacks.push(callback)
     7       }
     8       window.WVJBCallbacks = [callback]
     9       let WVJBIframe = document.createElement('iframe');
    10       WVJBIframe.style.display = 'none'
    11       WVJBIframe.src = 'https://__bridge_loaded__'
    12       document.documentElement.appendChild(WVJBIframe);
    13       setTimeout(() => {
    14         document.documentElement.removeChild(WVJBIframe)
    15       }, 0)
    16     }
    17     export default {
    18       callhandler(name, data, callback) {
    19         setupWebViewJavascriptBridge(function (bridge) {
    20           bridge.callHandler(name, data, callback)
    21         })
    22       },
    23       registerhandler(name, callback) {
    24         setupWebViewJavascriptBridge(function (bridge) {
    25           bridge.registerHandler(name, function (data, responseCallback) {
    26             callback(data, responseCallback)
    27           })
    28         })
    29       }
    30     }

    新建一个js文件,把上面的代码复制粘贴就好了

    2,在main.js中引入文件

    import Bridge from './assets/js/bridge.js'
    
    Vue.prototype.$bridge = Bridge

    3,调用方法

    let ua = navigator.userAgent;
                let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
                let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                // console.log(isAndroid, '安卓')
                // console.log(isiOS, 'ios')
                if (isiOS) {
    
                    this.$bridge.callhandler('popToStudyRootVC', (data) => {
                        // 处理返回数据
                        console.log(data, '我走了这里')
                    })
                }
    popToStudyRootVC:是有原生开发的同事定义的方法名

    这样就完成了

     

    转载于:https://www.cnblogs.com/yutianA/p/11200768.html

    展开全文
  • 前公司商城App项目使用的是H5开发,有微信公众号、IosAndroid三个版本,H5版本是自己写的一套框架,已经了有些年头了,承载不下不断涌现出的新需求。而IosAndroid端通过webview加载h5文件显示,App的原生功能...

    前公司商城App项目使用的是H5开发,有微信公众号、Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求。而Ios和Android端通过webview加载h5文件显示,App的原生功能和H5交互的代码写得有些凌乱,在我接手项目后老板完全没给重构的时间,所以只能在做新功能的时候顺手一点点的重构。后来要做一个与原先的商城相对独立的新商城,而且新商城的入口放在老商城中。因为时间紧任务重,使用React Native或者weex的话需要将原项目重构后再引入,考虑到可能存在的各种各样的坑,不太可能使用这些解决方案。使用vue或者react构建一个web项目再嵌入原有的app项目中是最稳妥的。最终因为vue的名字在字符数和音节数量上占了绝对的优势而入选。

    vue项目构建

    预备

    vue中文文档: https://cn.vuejs.org/v2/guide/instance.html

    构建工具环境
    nodejs: http://nodejs.cn

    构建工具vue-cli:
    https://github.com/vuejs/vue-cli

    如果是第一次接触vue或者在已有项目中引入vue时可以选择用CDN版本或者下载js文件

    vue的生产版本js:
    https://vuejs.org/js/vue.min.js

    引入CDN版本:
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    构建项目

    如果是作为一个新项目,还是建议使用vue-cli构建项目,省时省心

    安装完nodejs环境后在终端里输入:
    npm install --global vue-cli

    进入要存放项目的目录后创建一个基于webpack模板的新项目
    vue init webpack my-project

    其他模板还有pwa、browserify、webpack-simple、simple、browserify-simple等,可以自行到Github上了解:https://github.com/vuejs-templates

    在构建时有这么几个选项需要注意:
    Vue build:
    选择Runtime + Compiler: recommended for most users
    官方的解释https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

    vue-router:
    建议选上,文档地址 https://router.vuejs.org/zh-cn/

    ESLint:
    建议选上,模板使用Standard ,官网地址 https://eslint.org

    编译与运行

    进入项目根目录打开package.json文件可以看到项目的各项配置,其中scripts下存放的是各种命令,在命令行中通过npm run ***来执行

    npm run dev 或者 npm start

    相当于执行webpack-dev-server --config build/webpack.dev.conf.js启动开发环境

    在开发中经常会使用process.env.***的值来区分不同的环境。环境变量的值在/config/*.env.js文件中配置,webpack.dev.conf.js文件中引入的配置文件是dev.env.js,我们可以在开发是判断process.env.NODE_ENV的值是否为development来确定当前环境是否为开发环境

    在不改任何配置的情况下启动后,在浏览器中输入http://localhost:8080就可以看到效果了

    image

     

    npm run build

    执行此命令后会对当前项目进行编译打包,编译完成后我们就可以在/dist目录下看到我们需要的项目文件了。

    编译完成后可以在终端上看到这样一段温馨提示,“不允许通过直接打开index.html文件进行访问哦”

     

    image

    这也就意味着将打包后的项目直接放到Ios或Android项目中使用webview加载也是不允许的。这可如何是好呢?
    我们偷偷的点开/dist/index.html文件看看会发生什么吧?

     

    image

    一片空白并且报了ERR_FILE_NOT_FOUND的错误,没有找到css和js文件。用编辑器打开文件后可以看到,这几个文件的路径确实有些问题,于是在路径前加上一个.号后发现打开页面不再是一片空白了。

    image

     

    但是,我们不可能每次编译都重新手动修改一次文件吧?很明显这个是可以在编译的配置里面设置的.
    打开/config/index.js文件,找到build {}的配置下有一个assetsPublicPath: '/'的参数配置,修改成assetsPublicPath: './'就好啦,执行npm run build后资源文件的路径就修改成./了。

    image

     

    现在无论是用http://还是file://访问都没问题了。放到Ios或者Android项目中应该也没有问题了

    关于source map

    使用webpack编译后会发现每个资源文件都有一个对应的.map文件,而且这个文件所占的体积还不小,在没加任何代码的情况下将项目文件压缩成zip包后大小为227k,如果删除.map文件后只有50k,可以想象.map文件对项目体积的影响。
    在编译完项目后我们自己写的所有js代码会被压缩到一个app.***.js文件中,这时候如果在线上某个函数报错了,.map文件可以帮我们定位到报错的函数具体是在哪个文件里的。然而大多数情况下.map文件是没有必要打包放到线上的.
    打开/config/index.js文件,找到build {}的配置下的productionSourceMap改成false就不会生成.map文件啦

    image

     

    压缩打包

    在一般项目中在开发完成后我们通常会将文件打包成一个zip文件,这样不但方便保存和传输,还有一种仪式感。那么要怎样在编译完成之后自动打包成zip文件呢。
    首先我们需要安装一个webpack-zip-plugin工具
    npm i webpack-zip-plugin --save-dev

    然后打开/build/webpack.prod.conf.js文件,在文件中引入相关的包

    const WebpackZipPlugin =require('webpack-zip-plugin')
    

    plugin: []中加入WebpackZipPlugin的配置:

        new WebpackZipPlugin({
          initialFile: './dist/release/',  //需要打包的文件夹(一般为dist)
          endPath: './dist/release/',  //打包到对应目录(一般为当前目录'./')
          zipName: 'release.zip' //打包生成的文件名
        })
    

    可以在dist目录下看到release.zip文件啦。

    关于跨域

    在本地开发的时候如果要调用服务端的接口,肯定会遇到跨域问题,这时候我们只需要在/config/index.js文件中的dev: {}里面加上proxyTable就行了.

        proxyTable:{
          '/server': {
            target: 'http://192.168.11.5:3001'
          }
        }
    

    这样我们就可以将http://localhost:8080/server路径的所有请求都转发到http://192.168.11.5:3001/server下了

    Android项目

    关于WebView

    无论是Android的WebView还是Ios的UIWebView和WKWebView都只是提供一套接口方便开发者调用,而实际工作都是交给WebKit完成的。后来Google在WebKit的基础上按照自己的风格与优化出了Blink,用于自己的浏览器产品。由Blink我们可以看出Google在Android的WebView优化上做出了不少的努力。但是还是会难以抑制的担心系统WebView的性能,尤其是当看到腾讯X5内核标注的技术特性。不管怎样,腾讯爸爸的话还是要信的,所以在demo中使用了X5内核。

     

    image

    http://x5.tencent.com/tbs/guide/procIntro.html

    加载vue项目

    将Vue项目生成的文件放到Android项目的Assets目录下,使用WebView的loadUrl方法加载就行了

    mWebView.loadUrl("file:///android_asset/vue/index.html"); 
    

    关于跨域

    如果vue项目中有请求服务端数据的功能,就有可能产生跨域的问题,日志中会发现如下错误

    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

    Android的WebView处理跨域问题很简单,只要将AllowUniversalAccessFromFileURLs设置为True就行了

    WebSettings webSetting = mWebView.getSettings();
    webSetting.setAllowUniversalAccessFromFileURLs(true);
    

    Ios项目

    加载vue项目

    Ios可以使用UIWebView或者WKWebView直接加载

    <!--    UIWebView   -->
    let mWebView = UIWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
    
    let url = URL(fileURLWithPath: path!)
    self.view.addSubview(mWebView)
    mWebView.loadRequest(URLRequest(url: url))
    
    <!--    WKWebView   -->
    let mWebView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        
    let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
        
    let url = URL(fileURLWithPath: path!)
    self.view.addSubview(mWebView)
    mWebView.load(URLRequest(url: url))
    

    demo

    github: https://github.com/ljnjiannan/vue-demo



    作者:低调的喃喃
    链接:https://www.jianshu.com/p/6e8d88ddb0b7
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • vue项目可以使用WebViewJavascriptBridge与iosAndroid交互。搜了一下找到了bridge.js的代码如下: function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { return ...

    vue项目可以使用WebViewJavascriptBridge与ios和Android交互。搜了一下找到了bridge.js的代码如下:

    function setupWebViewJavascriptBridge (callback) {

      if (window.WebViewJavascriptBridge) {

        return callback(window.WebViewJavascriptBridge)  }

      if (window.WVJBCallbacks) {

        return window.WVJBCallbacks.push(callback)  }

      window.WVJBCallbacks = [callback]

      let WVJBIframe = document.createElement('iframe')

      WVJBIframe.style.display = 'none'

      WVJBIframe.src = 'https://__bridge_loaded__'  document.documentElement.appendChild(WVJBIframe)

      setTimeout(() => {

        document.documentElement.removeChild(WVJBIframe)  }, 0)

    }

    export default {

        callhandler (name, data, callback) {

                setupWebViewJavascriptBridge(function (bridge) {

                      bridge.callHandler(name, data, callback)    })

                },

        registerhandler (name, callback) {

                setupWebViewJavascriptBridge(function (bridge) {

                          bridge.registerHandler(name, function (data, responseCallback) {

                    callback(data, responseCallback)

              })

          })

      }

    }

    在 main.js 中引入该文件

    import Bridge from './config/bridge.js'

    Vue.prototype.$bridge = Bridge

    在需要调用客户端方法的组件中(事先需要与客户端同事约定好方法名)

    this.$bridge.callhandler('ObjC Echo', params, (data) => {

      // 处理返回数据

    })

    当客户端需要调用 js 函数时,事先注册约定好的函数即可

     

    this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {

        alert('JS Echo called with:', data)  responseCallback(data)

    })

    以上来自:
    作者:w_zhuan
    链接:https://www.jianshu.com/p/0dcb9699b703
    来源:简书

    但是在应用过程中发现还是有些问题,connectWebViewJavascriptBridge没有被调用导致收不到客户端传过来的数据。

    所以加了一段调用它的:

    connectWebViewJavascriptBridge(function(bridge) {

        bridge.init(function(message, responseCallback) {

            bridgeLog('默认接收收到来自Java数据: ' + message);

            var responseData = '默认接收收到来自Java的数据,回传数据给你';

            responseCallback(responseData);

        });

    })

    ok,解决。

     

    展开全文
  • vueios遇到的bug

    2020-03-06 16:23:54
    vue移动端再页面底部添加一个固定的按钮,按钮再安卓上面一直固定在底部,但是再ios上面就会跟着页面滚动向上,然后再滑落到底部,解决办法,就是把页面的高度设为100%,头部占百分之几,尾部占百分之几,剩下的就是...

    vue移动端再页面底部添加一个固定的按钮,按钮再安卓上面一直固定在底部,但是再ios上面就会跟着页面滚动向上,然后再滑落到底部,解决办法,就是把页面的高度设为100%,头部占百分之几,尾部占百分之几,剩下的就是中间的页面内容的高度,然后滚动的部分就只有这么高,问题就解决了

    展开全文
  • 模板: 其中,img是一张图片,在微信提示打开浏览器下载 &amp;amp;lt;div id=&amp;quot;showad&amp;quot; v-show=&amp;quot;ShowDark&amp;quot;&amp;amp;gt; &amp;amp;lt;div ...
  • VueiOSAndroid交互

    2018-12-20 12:28:05
    一、原生调用Vue方法 1、Vue  created() { //Vue方法给原生调用,则需要把方法挂在Window下面 window.getDataFromNative = this.getDataFromNative; }, methods: { getDataFromNative(params) { //params:...
  • 1、H5调原生方法  安卓方法 window.webReturn.treasureToPay(orderId); treasureToPay是与安卓约定的方法名;orderId是传的参数;不传时为空即可 IOS方法 window.webkit.messageHandlers.treasureToPay....
  • vue中暴露js方法给app(androidios)调用 首先声明以下例子(代码)适用于h5通过采用自定义Url拦截,JS回传数据的方式调取原生方法(即H5通过window.location=url的方式调用接口)。 话不多说直接上代码: mounted...
  • ios调用vue中方法vue中,只需要将方法绑定到window即可,ios就能够调用到 created(){ //供iso调用前需要绑定到window上 window.getParamsFromOc = this.getParamsFromOc; }, vue调用io...
  • vue判断安卓还是IOS

    2020-03-24 11:53:08
    vue判断是安卓还是IOS 写博客是为了做笔记 最近工作上遇到这样一个需求:vue写的页面,需要同时跟安卓ios进行交互; 若是安卓,执行代码:android.finishActivity(); 若是IOS,执行代码: try { window.webkit...
  • 在我们开发,会遇到贼多... 但是用vue写的方法,要在androidios原生怎么调用呢,这种情况我们就应该把我们vue methods 里面的方法载到到window对象,如下图:我们直接在mounted()方法中 把methods里面的方...
  • 这里写自定义目录标题前端 vue H5和安卓IOS 实现互调,传递参数,调用安卓iOS方法**H5和IOS通信的方法**H5 调用 安卓 iOS方法,向安卓IOS 传递参数欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有...
  • 最近做的一个项目,基本上是抛弃了原生,整个app就是一个webview,web不能实现的功能...点击取按钮后,会调用getValueForKey方法,然后js会调用app定义好的getValueForKey方法,然后app的webview再调用js定义的ge...
  • vue和原生(iosandroid)的交互封装
  • created(){ const u = navigator.userAgent; const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) { alert("ios"); } else { alert("andriod"); } },
  • vue判断Android还是ios

    2019-06-14 14:49:40
    appSource() { const u = navigator.userAgent; const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) { return "ios"; } else { return "andriod"; } },
  • 之前也是搜索了很多资料,发现在vue项目不能使用qrcode插件,qrcodejs2插件就成功了 1、首先在vue项目运行 npm install qrcodejs2 -dev ,我的这个是在开发环境中使用,因为需要根据部署不同的服务器每次进入...
  • h5调用原生App的方法合集
  • Vueios 安卓对接

    2020-06-29 17:13:06
    Vueios 安卓对接 function callHandler(handlerName, options, callback) { log && log('callHandler:' + handlerName, options); console.log('callHandler:' + handlerName, options); ...
1 2 3 4 5 ... 20
收藏数 15,316
精华内容 6,126
关键字:

vue中如何用ios安卓的方法