首页 > 其他分享 >vue和原生交互

vue和原生交互

时间:2023-03-08 10:14:40浏览次数:34  
标签:原生 vue orderSuccess pay window params Android 交互

vue调用原生的方法

    var u = navigator.userAgent;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android安卓
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios苹果
    if (isAndroid) {
      window.android.pay();
      // 或者
      // Android.pay(JSON.stringfy(params));
      // 传参给安卓
      let params={
        name:"123",
        age:"123"
      }
      Android.pay(JSON.stringfy(params));
    } else if (isiOS) {
      window.webkit.messageHandlers.pay.postMessage(null);
    }

 

vue放出方法让原生调用

<script>
   export default {
   mounted() {
      let that = this;
      window.orderSuccess = that.orderSuccess;
      window.orderFailed = that.orderFailed;
   },
   methods: {
      // 支付成功
      orderSuccess() {
         console.log("支付成功");
      },

      // 支付失败
      orderFailed() {
         console.log("支付失败");
      }

   }
   };
</script>

 

标签:原生,vue,orderSuccess,pay,window,params,Android,交互
From: https://www.cnblogs.com/chenzhengyang/p/17190989.html

相关文章

  • 组合式vue
    vue组合式风格setup所有使用到的响应式状态都应在setup函数里面定义。<script>//`setup`是一个专门用于组合式API的特殊钩子函数setup(){conststate=r......
  • 在Vue中体验LeanCloud无后台轻量级数据存储服务
    ......
  • Vue3 使用 vant中的swipe,添加左右箭头切换轮播
    vant中的 swipe 是带有左右箭头切换轮播方法的,只不过文档中没有相关的案例。  我这边使用的是vue3ts写的这个功能。页面部分   定义一个方法,ref="swi......
  • vue3:setup语法糖使用教程
    setup语法糖简介直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可......
  • antdesign-vue 遇到的一些问题
     问题:点击展开没反应 解决办法::expanded-row-keys.sync="expandedRowKeys"去掉即可......
  • Vue el-form回车想提交表单数据,但会刷新页面的解决办法
    原因W3C标准中有如下规定Whenthereisonlyonesingle-linetextinputfieldinaform,theuseragentshouldacceptEnterinthatfieldasarequesttosubmi......
  • vue2与vue3不同点:opitons api 与cmposition api
    vue2:optionsapi采用的是命令式编程,而vue3组合式api采用的是函数式编程,两者存在很大的差异,vue3更灵活,难度也更大。script语法糖,vue3可以通过导入函数的方式来定义响应......
  • vue-router的笔记
    路由:hash地址与组件之间的对应关系SPA:单页面应用程序前端路由的工作方式1、用户点击了页面上的路由链接2、导致了url地址栏的hash值变化3、前端路由监听到了hash地址......
  • vue生命周期以及如何将axios挂载到vue的原型链上
    生命周期组件的生命周期是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行 ......
  • vue组件之间通信以及混入
    子组件向父组件共享数据使用自定义事件父向子用自定义属性兄弟之间用eventbus组件的$nextTick(cb)方法,会把cb回调到下一个dom更新周期之后执行Vue2中非父子组件之间用......