安卓调用vue methods中的方法

    mounted() {
      //安卓调用vue方法并传参
      window['setAddress'] = val => {
        this.setAddress(val)
      }
      // window['setModel'] = val => {
      //   this.setModel(val)
      // }
    }
//methods中设置方法
 	//调用安卓ios方法
      toAdress() {
          if(this.isAndroid_ios()) {
            window.local_obj.onAddress();
          }else {
            window.webkit.messageHandlers.onAddress.postMessage(null);  //ios
          }
      },
      // app调用h5方法
      setAddress(val){
          this.adress = val
      },
      // setModel(str){
      //     this.price_name = str
      // },

Vue.js中,如果尝试直接调用Android应用的原生方法,并且这导致了代码执行的阻塞,通常是因为JavaScript的异步特性与Android原生代码交互的问题。Vue组件之间的通信通常是通过事件系统或者是`this.$emit`和`this.$on`来实现非阻塞操作的。 优化方案有以下几个步骤: 1. **使用Promise或async/await**: 如果原生方法返回值需要等待,可以将其封装成一个返回Promise的方法。在Vue中使用`new Promise((resolve, reject) => { ... })`包裹原生代码,然后在回调函数里处理结果,避免阻塞UI线程。 ```javascript // 示例 methods: { callNativeMethod() { return new Promise((resolve, reject) => { nativeMethod().then(result => resolve(result)).catch(reject); }); } } ``` 2. **解耦数据更新**: 尽量减少直接修改Vue实例状态的行为,而是通过事件通知视图更新。例如,在原生方法完成后,触发一个自定义事件。 ```javascript callNativeMethod().then(() => this.$emit('native-method-done')); ``` 3. **利用Vuex或Event Bus**: 如果数据同步涉及到整个应用,可以考虑使用Vuex管理状态,或者创建一个全局的Event Bus来传递事件。 4. **处理错误**:确保在调用原生方法时捕获并处理可能出现的错误,防止因为异常而导致页面卡死。 5. **使用API Gateway或Service Worker**: 对于长时间运行的操作,可以考虑使用API Gateway作为中介,或者使用Service Worker在后台运行耗时任务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值